AJAX
今天佟剛老師帶我們學(xué)習(xí)了AJAX，AJAX是現(xiàn)在開(kāi)發(fā)的廣泛使用的技術(shù)，幾乎所有的web應(yīng)用都涉及了該技術(shù)，例如，用戶名校驗(yàn)，級(jí)聯(lián)下拉列表，下拉樹(shù)狀菜單，在網(wǎng)頁(yè)無(wú)刷新提交等方面有廣泛的應(yīng)用。有前兩天的js基礎(chǔ)，今天的學(xué)習(xí)還行 
1.什么是Ajax
Ajax被認(rèn)為是(Asynchronous JavaScript and XML的縮寫）。現(xiàn)在，允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax.
Ajax這項(xiàng)技術(shù)，是Google在Google Labs發(fā)布Google Maps和Google Suggest后真正為人所認(rèn)識(shí)。
Ajax應(yīng)用實(shí)例 - Google Suggest

Ajax應(yīng)用實(shí)例 - Google Maps
框架：如果使用一組框架構(gòu)造了一個(gè)網(wǎng)頁(yè)，可以只更新其中一個(gè)框架，而不必驚動(dòng)整個(gè)頁(yè)面

隱藏的iframe
XMLHttpRequest：該對(duì)象是對(duì) JavaScript 的一個(gè)擴(kuò)展，可使網(wǎng)頁(yè)與服務(wù)器進(jìn)行通信。是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實(shí)際上通常把 Ajax 當(dāng)成 XMLHttpRequest 對(duì)象的代名詞
Ajax的工作原理圖
Ajax工具包
Ajax并不是一項(xiàng)新技術(shù)，它實(shí)際上是幾種技術(shù)，每種技術(shù)各盡其職，以一種全新的方式聚合在一起

XMLHttpRequest最早是在IE5中以ActiveX組件的形式實(shí)現(xiàn)的。非W3C標(biāo)準(zhǔn).
  創(chuàng)建XMLHttpRequest對(duì)象（由于非標(biāo)準(zhǔn)所以實(shí)現(xiàn)方法不統(tǒng)一）
Internet Explorer把XMLHttpRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象
其他瀏覽器（Firefox、Safari、Opera…）把它實(shí)現(xiàn)為一個(gè)本地的JavaScript對(duì)象。

具體實(shí)現(xiàn)流程：先創(chuàng)建XMLHttpRequest對(duì)象
//1. 獲取 XMLHttpRequest 對(duì)象xhr
//2. 發(fā)送 Ajax 請(qǐng)求
//2.1 準(zhǔn)備請(qǐng)求: 參數(shù)1 -- 請(qǐng)求方式, 參數(shù)2 -- 請(qǐng)求路徑
xhr.open("GET", url);
//2.2 發(fā)送請(qǐng)求, 因?yàn)槭?GET 請(qǐng)求, 所以不需要發(fā)送數(shù)據(jù)
xhr.send(null);
//3當(dāng) XMLHttpRequest 對(duì)象的 readyState 屬性被服務(wù)器改變的時(shí)候, 觸發(fā) onreadystatechange 事件
//3.1當(dāng) XMLHttpRequest 對(duì)象的 readyState 屬性被服務(wù)器改變?yōu)?4 的時(shí)候表示相應(yīng)已經(jīng)完成,
if(xhr.readyState == 4){
//相應(yīng)完成, 可以獲取相應(yīng)信息: 在 XMLHttpRequest 對(duì)象的responseText 屬性中包含了相應(yīng)信息
//可以進(jìn)一步的控制打印時(shí)機(jī): 當(dāng)相應(yīng)正確返回時(shí), 即返回的信息碼為 200 時(shí)
if(xhr.status == 200){
alert(xhr.responseText);
}else{
alert("請(qǐng)求異常...");
}

}

常用狀態(tài)碼及其含義：
• 404 沒(méi)找到頁(yè)面(not found)
• 403 禁止訪問(wèn)(forbidden)
• 500 內(nèi)部服務(wù)器出錯(cuò)(internal service error)
• 200 一切正常(ok)
• 304 沒(méi)有被修改(not modified)
接收相應(yīng)
responseText
• XMLHttpRequest 的 responseText 屬性包含了從服務(wù)器發(fā)送的數(shù)據(jù)。它是一個(gè)HTML,XML或普通文本，這取決于服務(wù)器發(fā)送的內(nèi)容。
• 當(dāng) readyState 屬性值變成 4 時(shí), responseText 屬性才可用，表明 Ajax 請(qǐng)求已經(jīng)結(jié)束。
接收相應(yīng)
  responseXML
• 如果服務(wù)器返回的是 XML， 那么數(shù)據(jù)將儲(chǔ)存在 responseXML 屬性中。
• 只用服務(wù)器發(fā)送了帶有正確首部信息的數(shù)據(jù)時(shí)， responseXML 屬性才是可用的。 MIME 類型必須為 text/xml

匯總
數(shù)據(jù)格式提要
  在服務(wù)器端 AJAX 是一門與語(yǔ)言無(wú)關(guān)的技術(shù)。在業(yè)務(wù)邏輯層使用何種服務(wù)器端語(yǔ)言都可以。
  從服務(wù)器端接收數(shù)據(jù)的時(shí)候，那些數(shù)據(jù)必須以瀏覽器能夠理解的格式來(lái)發(fā)送。服務(wù)器端的編程語(yǔ)言只能以如下 3 種格式返回?cái)?shù)據(jù)：
• XML
• JSON
• HTML

對(duì)比小結(jié)

  若應(yīng)用程序不需要與其他應(yīng)用程序共享數(shù)據(jù)的時(shí)候, 使用 HTML 片段來(lái)返回?cái)?shù)據(jù)時(shí)最簡(jiǎn)單的
  如果數(shù)據(jù)需要重用, JSON 文件是個(gè)不錯(cuò)的選擇, 其在性能和文件大小方面有優(yōu)勢(shì)
  當(dāng)遠(yuǎn)程應(yīng)用程序未知時(shí), XML 文檔是首選, 因?yàn)?XML 是 web 服務(wù)領(lǐng)域的 “世界語(yǔ)”
  jQuery 對(duì) Ajax 操作進(jìn)行了封裝, 在 jQuery 中最底層的方法時(shí) $.ajax(), 第二層是 load(), $.get() 和 $.post(), 第三層是 $.getScript() 和 $.getJSON()
load() 方法

 load() 方法是 jQuery 中最為簡(jiǎn)單和常用的 Ajax 方法, 能載入遠(yuǎn)程的 HTML 代碼并插入到 DOM 中. 它的結(jié)構(gòu)是: load(url[, data][,callback])。

  明天繼續(xù)！