Ajax應(yīng)用程序所用到的基本技術(shù)有哪些？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比突泉網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式突泉網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋突泉地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴(lài)。

Ajax 簡(jiǎn)介

Ajax 由 HTML、JavaScript? 技術(shù)、DHTML 和 DOM 組成，這一杰出的方法可以將笨拙的 Web 界面轉(zhuǎn)化成交互性的 Ajax 應(yīng)用程序。它是一種構(gòu)建網(wǎng)站的強(qiáng)大方法。

Ajax 嘗試建立桌面應(yīng)用程序的功能和交互性，與不斷更新的 Web 應(yīng)用程序之間的橋梁。可以使用像桌面應(yīng)用程序中常見(jiàn)的動(dòng)態(tài)用戶(hù)界面和漂亮的控件，不過(guò)是在 Web 應(yīng)用程序中。

Ajax 應(yīng)用程序所用到的基本技術(shù)：

1、HTML 用于建立 Web 表單并確定應(yīng)用程序其他部分使用的字段。

2、JavaScript 代碼是運(yùn)行 Ajax應(yīng)用程序的核心代碼，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信。

3、DHTML 或 Dynamic HTML，用于動(dòng)態(tài)更新表單。我們將使用div、span 和其他動(dòng)態(tài) HTML 元素來(lái)標(biāo)記 HTML。

4、文檔對(duì)象模型 DOM 用于（通過(guò) JavaScript 代碼）處理HTML 結(jié)構(gòu)和（某些情況下）服務(wù)器返回的 XML。

Ajax 的定義

Ajax= Asynchronous JavaScript and XML（以及 DHTML 等）Asynchronous異步JS和XML。

XMLHttpRequest這是一個(gè) JavaScript 對(duì)象; 是處理所有服務(wù)器通信的對(duì)象,創(chuàng)建該對(duì)象很簡(jiǎn)單，如清單 1 所示。

清單 1. 創(chuàng)建新的 XMLHttpRequest 對(duì)象

通過(guò) XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行對(duì)話的是 JavaScript 技術(shù)。這不是一般的應(yīng)用程序流，這恰恰是 Ajax的強(qiáng)大功能的來(lái)源。

Ajax 基本上就是把 JavaScript 技術(shù)和 XMLHttpRequest 對(duì)象放在 Web 表單和服務(wù)器之間。

得到 XMLHttpRequest 的句柄后，使用 JavaScript 代碼完成以下任務(wù)：

1、獲取表單數(shù)據(jù)：JavaScript 代碼很容易從 HTML 表單中抽取數(shù)據(jù)并發(fā)送到服務(wù)器。

2、修改表單上的數(shù)據(jù)：更新表單也很簡(jiǎn)單，從設(shè)置字段值到迅速替換圖像。

3、解析 HTML 和 XML：使用 JavaScript 代碼操縱 DOM（請(qǐng)參閱 下一節(jié)），處理 HTML 表單服務(wù)器返回的 XML數(shù)據(jù)的結(jié)構(gòu)

對(duì)于前兩點(diǎn)，需要非常熟悉 getElementById() 方法，如 清單 2 所示。

清單 2. 用 JavaScript 代碼捕獲和設(shè)置字段值

//捕獲字段值:
// 獲得字段"phone"的值并用其創(chuàng)建一個(gè)變量phone
var phone = document.getElementById("phone").value;
//設(shè)置字段值:
// 從response的數(shù)組中獲得值并將其寫(xiě)到標(biāo)簽中
document.getElementById("order").value = response[0];
document.getElementById("address").value = response[1];

DOM的功能

當(dāng)需要在 JavaScript 代碼和服務(wù)器之間傳遞 XML 和改變 HTML 表單的時(shí)候，我們?cè)偕钊胙芯?DOM。

獲取 Request 對(duì)象

XMLHttpRequest 是 Ajax 應(yīng)用程序的核心.

var xmlhttp;
if (window.XMLHttpRequest)
  {// 從 IE7+, Firefox, Chrome, Opera, Safari 中獲得XMLHttpRequest對(duì)象
  xmlhttp=new XMLHttpRequest();
  }
else
  {//從 IE6, IE5 中獲得XMLHttpRequest對(duì)象
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

清單 4. 以支持多種瀏覽器的方式創(chuàng)建 XMLHttpRequest 對(duì)象

/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

這段代碼的核心分為三步：

1、建立一個(gè)變量 xmlHttp 來(lái)引用即將創(chuàng)建的 XMLHttpRequest 對(duì)象。

2、嘗試在 Microsoft 瀏覽器中創(chuàng)建該對(duì)象：
1）嘗試使用 Msxml2.XMLHTTP 對(duì)象創(chuàng)建它。
如果失敗，再?lài)L試 Microsoft.XMLHTTP 對(duì)象。

3、如果仍然沒(méi)有建立 xmlHttp，則以非 Microsoft 的方式創(chuàng)建該對(duì)象。 最后，xmlHttp 應(yīng)該引用一個(gè)有效的XMLHttpRequest 對(duì)象，無(wú)論運(yùn)行什么樣的瀏覽器。

Ajax 的請(qǐng)求/響應(yīng)

與服務(wù)器上的 Web 應(yīng)用程序打交道的是 JavaScript 技術(shù)，而不是直接提交給那個(gè)應(yīng)用程序的 HTML 表單。
發(fā)出請(qǐng)求
如何使用XMLHttpRequest 對(duì)象?
首先–需要一個(gè)能夠調(diào)用JavaScript 方法 的Web 頁(yè)面 。
接下來(lái)就是在所有 Ajax 應(yīng)用程序中基本都雷同的流程：

1、從 Web 表單中獲取需要的數(shù)據(jù)。
2、建立要連接的 URL。
3、打開(kāi)到服務(wù)器的連接。
4、設(shè)置服務(wù)器在完成后要運(yùn)行的函數(shù)。
5、發(fā)送請(qǐng)求。

清單 5 中的示例 Ajax 方法就是按照這個(gè)順序組織的：

清單 5. 發(fā)出 Ajax 請(qǐng)求

function callServer() {
  // 獲得city和state的值
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // 當(dāng)它們的值任一個(gè)不存在的時(shí)候結(jié)束JS
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // 創(chuàng)建連接的URL對(duì)象
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // 打開(kāi)一個(gè)連接服務(wù)器的連接
  xmlHttp.open("GET", url, true);

  // 設(shè)置一個(gè)方法,當(dāng)請(qǐng)求返回的時(shí)候調(diào)用這個(gè)方法
  xmlHttp.onreadystatechange = updatePage;
  //xmlhttp.onreadystatechange=function()
  //{
  //    if (xmlhttp.readyState==4 && xmlhttp.status==200)
  //    {
  //   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  //    }
  //}

  // 發(fā)生鏈接
  xmlHttp.send(null);
}

開(kāi)始的代碼使用基本 JavaScript 代碼獲取幾個(gè)表單字段的值。 然后設(shè)置一個(gè) PHP 腳本作為鏈接的目標(biāo)。 要注意腳本 URL 的指定方式，city 和 state（來(lái)自表單）使用簡(jiǎn)單的 GET 參數(shù)附加在 URL 之后。 最后一個(gè)參數(shù)如果設(shè)為 true，那么將請(qǐng)求一個(gè)異步連接（這就是 Ajax 的由來(lái)）。 如果使用 false，那么代碼發(fā)出請(qǐng)求后將等待服務(wù)器返回的響應(yīng)。 如果設(shè)為 true，當(dāng)服務(wù)器在后臺(tái)處理請(qǐng)求的時(shí)候用戶(hù)仍然可以使用表單（甚至調(diào)用其他 JavaScript 方法）。
onreadystatechange屬性可以告訴服務(wù)器在運(yùn)行完成后做什么。因?yàn)榇a沒(méi)有等待服務(wù)器，必須讓服務(wù)器知道怎么做以便您能作出響應(yīng)。
在這個(gè)示例中，如果服務(wù)器處理完了請(qǐng)求，一個(gè)特殊的名為 updatePage() 的方法將被觸發(fā)。
最后，使用值 null 調(diào)用send()。因?yàn)橐呀?jīng)在請(qǐng)求 URL 中添加了要發(fā)送給服務(wù)器的數(shù)據(jù)（city 和state），所以請(qǐng)求中不需要發(fā)送任何數(shù)據(jù)。這樣就發(fā)出了請(qǐng)求，服務(wù)器按照您的要求工作。

處理響應(yīng)

1.什么也不要做，直到 xmlHttp.readyState 屬性的值等于 4。

2.服務(wù)器將把響應(yīng)填充到 xmlHttp.responseText 屬性中。

其中的第一點(diǎn)，即就緒狀態(tài);
第二點(diǎn)，使用 xmlHttp.responseText 屬性獲得服務(wù)器的響應(yīng),清單 6中的示例方法可供服務(wù)器根據(jù) 清單 5 中發(fā)送的數(shù)據(jù)調(diào)用。

清單 6. 處理服務(wù)器響應(yīng)

function updatePage() {
  if (xmlHttp.readyState == 4) {    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value = response;
  }
}

它等待服務(wù)器調(diào)用，如果是就緒狀態(tài)，則使用服務(wù)器返回的值（這里是用戶(hù)輸入的城市和州的 ZIP 編碼）設(shè)置另一個(gè)表單字段的值。
一旦服務(wù)器返回 ZIP 編碼，updatePage() 方法就用城市/州的 ZIP 編碼設(shè)置那個(gè)字段的值，用戶(hù)就可以改寫(xiě)該值。這樣做有兩個(gè)原因：

保持例子簡(jiǎn)單，說(shuō)明有時(shí)候可能希望用戶(hù)能夠修改服務(wù)器返回的數(shù)據(jù)。

要記住這兩點(diǎn)，它們對(duì)于好的用戶(hù)界面設(shè)計(jì)來(lái)說(shuō)很重要。

連接 Web 表單

一個(gè) JavaScript 方法捕捉用戶(hù)輸入表單的信息并將其發(fā)送到服務(wù)器，另一個(gè) JavaScript 方法監(jiān)聽(tīng)和處理響應(yīng)，并在響應(yīng)返回時(shí)設(shè)置字段的值。所有這些實(shí)際上都依賴(lài)于調(diào)用 第一個(gè) JavaScript 方法，它啟動(dòng)了整個(gè)過(guò)程。
利用 JavaScript 技術(shù)更新表單。

清單 7. 啟動(dòng)一個(gè) Ajax 過(guò)程

    
City: 
    
State: 
    
Zip Code: 

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)Ajax應(yīng)用程序所用到的基本技術(shù)有哪些大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。