?? 個人主頁 極客小俊
??? 作者簡介：程序猿、設(shè)計師、技術(shù)分享
?? 希望大家多多支持, 我們一起學習和進步！
?? 歡迎評論 ??點贊??評論 ??收藏 ??加關(guān)注

什么是AJAX

AJAX 其實就是 異步 JavaScript 及 XML（Asynchronous JavaScript and XML）

AJAX 不是一種新的編程語言，而是一種用于創(chuàng)建更好更快以及交互性更強的 Web 應用程序的技術(shù)。

通過 AJAX，我們的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與服務器進行通信。

通過這個對象，您的 JavaScript 可在不重新加載頁面的情況與 Web 服務器交換數(shù)據(jù)。

AJAX 在瀏覽器與 Web 服務器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁從服務器請求少量的信息，而不是整個頁面。

Ajax的優(yōu)點

AJAX 可使因特網(wǎng)應用程序更小、更快，更友好。
AJAX 是一種獨立于 Web 服務器軟件的瀏覽器技術(shù)。
通過 AJAX，你可以創(chuàng)建更好、更快以及更友好的 WEB 應用程序。
AJAX 基于 JavaScript 和 HTTP 請求（HTTP requests）

AJAX是基于Web標準的

AJAX 是基于下列 Web 標準

1. JavaScript
2. XML
3. HTML
4. CSS

在 AJAX 中使用的 Web 標準已被良好定義，并被所有的主流瀏覽器支持。
AJAX 應用程序獨立于瀏覽器和平臺。

所以簡單點說，如果你要使用AJAX 那么你要對HTML/CSS/JS都要熟悉!

AJAX 是一種在 2005 年由 Google 推廣開來的編程模式。

注意: AJAX 不是一種新的編程語言，而是一種使用現(xiàn)有標準的新方法。

AJAX的應用場景

1、表單驅(qū)動的交互
傳統(tǒng)的表單提交，在文本框輸入內(nèi)容后，點擊按鈕，后臺處理完畢后，頁面刷新，再回頭檢查是否刷新結(jié)果正確。使用Ajax，在點擊sunmit按鈕后，立刻進行異步處理，并在頁面上快速顯示了更新后的結(jié)果，這里沒有整個頁面刷新的問題。

2、深層次的樹的導航

深層次的級聯(lián)菜單（樹）的遍歷是一項非常復雜的任務，使用JavaScript來控制顯示邏輯，使用Ajax延遲加載更深層次的數(shù)據(jù)可以有效的減輕服務器的負擔。

處理思路

為了避免每次對菜單的操作引起的重載頁面，不采用每次調(diào)用后臺的方式，而是一次性將級聯(lián)菜單的所有數(shù)據(jù)全部讀取出來并寫入數(shù)組，然后根據(jù)用戶的操作用 JavaScript來控制它的子集項目的呈現(xiàn)，這樣雖然解決了操作響應速度、不重載頁面以及避免向服務器頻繁發(fā)送請求的問題，但是如果用戶不對菜單進行 操作或只對菜單中的一部分進行操作的話，那讀取的數(shù)據(jù)中的一部分就會成為冗余數(shù)據(jù)而浪費用戶的資源，特別是在菜單結(jié)構(gòu)復雜、數(shù)據(jù)量大的情況下!

舉個栗子

比如菜單有 很多級、每一級菜又有上百個項目，這種弊端就更為突出。

那么如果我們使用了Ajax后，結(jié)果就會有所改觀：

思路如下

在初始化頁面時我們只讀出它的第一級的所有數(shù)據(jù)并顯示，在用戶操作一級菜單其中一項時，會通過Ajax向后臺請求當前一級項目所屬的二級子菜單的所有數(shù)據(jù)

如果再繼續(xù)請求已經(jīng)呈現(xiàn)的二級菜單中的一項時，再向后面請求所操作二級菜單項對應的所有三級菜單的所有數(shù)據(jù)，以此類推……這樣，用什么就取什么、用多少就取 多少，就不會有數(shù)據(jù)的冗余和浪費，減少了數(shù)據(jù)下載總量，而且更新頁面時不用重載全部內(nèi)容，只更新需要更新的那部分即可，相對于后臺處理并重載的方式縮短了 用戶等待時間，也把對資源的浪費降到最低。

3、快速的用戶與用戶間的交流響應

在眾多人參與的交流討論的場景下，最不爽的事情就是讓用戶一遍又一遍刷新頁面以便知道是否有新的討論出現(xiàn)。新的回復應該以最快的速度顯示出來，而把用戶從分神的刷新中解脫出來，Ajax是最好的選擇。

4、類似投票、yes/no等無關(guān)痛癢的場景

對于類似這樣的場景中，如果提交過程需要達到40秒，很多的用戶就會直接忽略過去而不會參與，但是Ajax可以把時間控制在1秒之內(nèi)，從而更多的用戶會加入進來。

5、對數(shù)據(jù)進行過濾和操縱相關(guān)數(shù)據(jù)的場景

對數(shù)據(jù)使用過濾器，按照時間排序，或者按照時間和名稱排序，開關(guān)過濾器等等。任何要求具備很高交互性數(shù)據(jù)操縱的場合都應該用JavaScript，而不是用一系列的服務器請求來完成。在每次數(shù)據(jù)更新后，再對其進行查找和處理需要耗費較多的時間，而Ajax可以加速這個過程。

6、普通的文本輸入提示和自動完成的場景

在文本框等輸入表單中給予輸入提示，或者自動完成，可以有效的改善用戶體驗，尤其是那些自動完成的數(shù)據(jù)可能來自于服務器端的場合，Ajax是很好的選擇。

AJAX不適合場景

1、部分簡單的表單

雖然表單提交可以從Ajax獲取最大的益處，但一個簡單的評論表單極少能從Ajax得到什么明顯的改善。
而一些較少用到的表單提交，Ajax則幫不上什么忙。

2、搜索

有些使用了Ajax的搜索引擎如Start.com和Live.com不允許使用瀏覽器的后退按鈕來查看前一次搜索的結(jié)果，這對已經(jīng)養(yǎng)成搜索習慣的用戶來說是不可原諒的,現(xiàn)在Dojo通過iframe來解決這個問題。

3、基本的導航

使用Ajax來做站點內(nèi)的導航是一個壞主意，為什么不把時間放在讓系統(tǒng)程序作的更好上呢？

4、替換大量的文本

使用Ajax可以實現(xiàn)頁面的局部刷新，但是如果頁面的每個部分都改變了，為什么不重新做一次服務器請求呢？

5、對呈現(xiàn)的操縱

Ajax看起來像是一個純粹的UI技術(shù)，但事實上它不是。
它實際上是一個數(shù)據(jù)同步、操縱和傳輸?shù)募夹g(shù)。
對于可維護的干凈的web應用，不使用Ajax來控制頁面呈現(xiàn)是一個不錯的主意。
JavaScript可以很簡單的處理XHMTL/HTML/DOM，使用CSS規(guī)則就可以很好的表達數(shù)據(jù)顯示。

注意

Ajax的無刷新重載，由于頁面的變化沒有刷新重載那么明顯，所以容易給用戶帶來困擾，用戶不太清楚現(xiàn)在的數(shù)據(jù)是新的還是已經(jīng)更新過的；現(xiàn)有的解決有：在相關(guān)位置提示、數(shù)據(jù)更新的區(qū)域設(shè)計得比較明顯、數(shù)據(jù)更新后給用戶提示等!

Ajax(Asynchronous JavaScript and XML)說到底就是一種瀏覽器異步讀取服務器上XML內(nèi)容的技術(shù)。

現(xiàn)在的技術(shù)凡是跟XML扯上關(guān)系，再加上個概念做幌子，就像金裝了一樣，拽得不行, 門外 的人看得很是熱鬧，門里的人搖搖頭不外如是。XML呢，跨平臺的新潮語言？其實XML＝TXT。XML只是符合很多規(guī)范的文本。它本身什么都不是，只是保 存字符的文件, 而瀏覽器異步讀取的只是服務器上的文本內(nèi)容

所以在Ajax開發(fā)時完全不必拘泥于XML, 例如JSON也是可以的

什么是JSON

XML 的作用是格式化數(shù)據(jù)內(nèi)容。如果我們不用XML還有什么更好的方法嗎？
這個答案是JSON。

介紹JSON之前我先介紹一下JavaScript這門腳本語 言。腳本語言自身有動態(tài)執(zhí)行的天賦。即我們可以把想要執(zhí)行的語句放在字符串里，通過eval()這個動態(tài)執(zhí)行函數(shù)來執(zhí)行。字符串里的內(nèi)容會像我們寫的腳本 一樣被執(zhí)行。

例如

var str = "alert('hello')";
eval(str);

當然我們可以在字符串中放任何腳本語句，包括聲明語句

例如

var define = "{name:'張三',email:'zhangsan@gmail.com'}";
eval("data = "+define);
alert("name:"+data.name);
alert("email:"+data.email);

了解JSON

JSON：全稱: JavaScript Object Notation 我更愿意把它翻譯為JavaScript對象聲明。

比如: 我們可能要從后臺載入一些通訊錄的信息，如果寫成XML, 但是我們可能也會把這個XML轉(zhuǎn)換成JSON

如圖

JSON的大致概念這里我大致做了一個小的總結(jié),如下:

JSON：JavaScript 對象表示法（JavaScript Object Notation）。
JSON 是存儲和交換文本信息的語法。類似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是輕量級的文本數(shù)據(jù)交換格式
JSON 獨立于語言
JSON 具有自我描述性，更易理解

注意： JSON 使用 JavaScript 語法來描述數(shù)據(jù)對象，但是 JSON 仍然獨立于語言和平臺。
JSON 解析器和 JSON 庫支持許多不同的編程語言。

JSON與XML的比較

JSON類似 XML

JSON 是純文本
JSON 具有“自我描述性”（人類可讀）
JSON 具有層級結(jié)構(gòu)（值中存在值）
JSON 可通過 JavaScript 進行解析
JSON 數(shù)據(jù)可使用 AJAX 進行傳輸

JSON相比 XML 的不同之處

1. 沒有結(jié)束標簽
2. 書寫格式更短
3. 讀寫的速度更快
4. 能夠使用內(nèi)建的 JavaScript eval() 方法進行解析
5. 使用數(shù)組/對象
6. 不使用保留字
7. 對于 AJAX 應用程序來說，JSON 比 XML 更快更易使用：

簡單的不只是表達上，最重要的是可以丟棄讓人暈頭轉(zhuǎn)向的DOM解析了。
因為只要符合JavaScript的聲明規(guī)范，JavaScrip會自動幫你解析好的。

Ajax中使用JSON的基本方法是前臺載入后臺聲明JavaScript對象的字符串，用eval方法來將它轉(zhuǎn)為實際的對象，最后通過 DHTML更新頁面信息。

JSON 和XML的更多對比性

可讀性:JSON和XML的可讀性可謂不相上下，一邊是建議的語法，一邊是規(guī)范的標簽形式，很難分出勝負。

可擴展性: XML天生有很好的擴展性，JSON當然也有，沒有什么是XML能擴展，JSON不能的。

編碼難度: XML有豐富的編碼工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的編碼明顯比XML容易許多，即使不借助工具也能寫出JSON的代碼，可是要寫好XML就不太容易了。

解碼難度: XML的解析得考慮子節(jié)點父節(jié)點，讓人頭昏眼花，而JSON的解析難度幾乎為0。這一點XML輸?shù)恼媸菦]話說。

流行度: XML已經(jīng)被業(yè)界廣泛的使用, 但是在Ajax這個特定的領(lǐng)域，所以目前的發(fā)展一定是XML讓位于JSON

JSON語法規(guī)則

說了這么多，現(xiàn)在我們具體來看看JSON的語法定義格式是怎么樣的!

JSON 語法規(guī)則

JSON 語法是 JavaScript 對象表示法語法的子集。
數(shù)據(jù)在名稱/值對中
數(shù)據(jù)由逗號分隔
花括號保存對象
方括號保存數(shù)組
JSON 名稱/值對
JSON 數(shù)據(jù)的書寫格式是：名稱/值對

名稱/值對包括字段名稱（在雙引號中），后面寫一個冒號，然后是值

例如:

"firstName" : "John" 這很容易理解，等價于這條 JavaScript 語句：firstName = "John“

JSON 值的數(shù)據(jù)類型

JSON 值可以是以下數(shù)據(jù)類型:

1. 數(shù)字（整數(shù)或浮點數(shù)）
2. 字符串（在雙引號中）
3. 邏輯值（true 或 false）
4. 數(shù)組（在方括號中）
5. 對象（在花括號中）
6. null

JSON 對象

JSON 對象在花括號中書寫, 對象可以包含多個名稱/值對

例如:

{ "firstName":"John" , "lastName":"Doe" }

這一點也容易理解, 與這條 JavaScript 語句等價：

firstName = “John” ，lastName = "Doe

JSON 數(shù)組

JSON 數(shù)組在方括號中書寫：數(shù)組可包含多個對象：

例如:

{ 
"employees": [ 
	{ "firstName":"John" , "lastName":"Doe" }, 
	{ "firstName":"Anna" , "lastName":"Smith" }, 
	{ "firstName":"Peter" , "lastName":"Jones" } 
	] 
} 

在上面的例子中，對象 employees是包含三個對象的數(shù)組。每個對象代表一條關(guān)于某人（有姓和名）的記錄

JSON的寫法

JSON的基本格式如下：

對象是屬性、值對的集合。一個對象的開始于{，結(jié)束于}。每一個屬性名和值間用:提示，屬性間用,分隔

如圖

數(shù)組是有順序的值的集合。一個數(shù)組開始于[，結(jié)束于]，值之間用,分隔。

如圖

值可以是引號里的字符串、數(shù)字、true、false、null，也可以是對象或數(shù)組。這些結(jié)構(gòu)都能嵌套!

如圖

值是字符串的定義和C或Java基本一致:

如圖

值是數(shù)字的定義也和C或Java基本一致

如圖

JSON使用

JSON 是使用 JavaScript 語法, 因為 JSON 使用 JavaScript 語法，所以無需額外的軟件就能處理 JavaScript 中的 JSON。通過 JavaScript，您可以創(chuàng)建一個對象數(shù)組，并像這樣進行賦值：

例如

var employees = [ 
{ "firstName":"Bill" , "lastName":"Gates" },
 { "firstName":"George" , "lastName":"Bush" }, 
 { "firstName":"Thomas" , "lastName": "Carter" }
  ];

可以像這樣訪問 對象數(shù)組中的第一項：JavaScript employees[0].lastName; 返回的內(nèi)容是：Gates
可以像這樣修改數(shù)據(jù)：employees[0].lastName = “Jobs”;

JSON 文件

JSON 文件的文件類型是 .json
JSON 文本的 MIME 類型是application/json

JSON解析器

使用 JSON 解析器將 JSON 轉(zhuǎn)換為 JavaScript 對象是更安全的做法。
JSON 解析器只能識別 JSON 文本，而不會編譯腳本。
在瀏覽器中，這提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持

注意:：eval()函數(shù)可編譯并執(zhí)行任何 JavaScript 代碼, 這隱藏了一個潛在的安全問題

IE8 支持JSON問題

IE8支持原生的JSON對象，而且IE8瀏覽器自帶了JSON.parse與JSON.stringify兩個方法。
不過有時候我們在代碼JSON測試的時候，頁面卻報告說JSON未定義。
既然微軟官網(wǎng)上有提到過IE8已經(jīng)支持了JSON對象，那怎么還不能使用呢？

由于JSON對象是在JScript. 5.8及其以后的版本引入的，所以，默認情況下，IE8使用的是JScript. 5.7版本

所以原生JSON對象是無法使用的。那么如何使用IE8的原生對象呢？

IE8為了最大限度地保證瀏覽器的向后兼容性，使原先創(chuàng)建的網(wǎng)頁能夠正常顯示，默認采用的是IE7的渲染引擎，同時，IE8支持多種文檔兼容性模式。

解決辦法：

<!DOCTYPE>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=8">

讓不支持JSON的瀏覽器支持JSON

這個問題很簡單，只需要在你的頁面引入JSON.JS庫就可以

地址: https://github.com/douglascrockford/JSON-js

如圖

初識XMLHttpRequest

XMLHttpRequest對象是當今所有AJAX和Web 2.0應用程序的技術(shù)基礎(chǔ)。
盡管軟件經(jīng)銷商和開源社團現(xiàn)在都在提供各種AJAX框架以進一步簡化XMLHttpRequest對象的使用, 但是我們?nèi)匀缓苡斜匾斫膺@個對象的詳細工作機制。

異步JavaScript與XML(AJAX)是一個專用術(shù)語，用于實現(xiàn)在客戶端腳本與服務器之間的數(shù)據(jù)交互過程。

這一技術(shù)的優(yōu)點在于，它向開發(fā)者提供了一種從Web服務器檢索數(shù)據(jù)而不必把用戶當前正在觀察的頁面回饋給服務器。

與現(xiàn)代瀏覽器的通過存取瀏覽器DOM結(jié)構(gòu)的編程代碼(JavaScript)動態(tài)地改變被顯示內(nèi)容的支持相配合，AJAX讓開發(fā)者在瀏覽器端更新被顯示的HTML內(nèi)容而不必刷新頁面。

換句話說，AJAX可以使基于瀏覽器的應用程序更具交互性而且更類似傳統(tǒng)型桌面應用程序。

Google的Gmail和Outlook Express就是兩個使用AJAX技術(shù)的我們所熟悉的例子。

而且，AJAX可以用于任何客戶端腳本語言中，這包括JavaScript，Jscript和VBScript。

AJAX利用一個構(gòu)建到所有現(xiàn)代瀏覽器內(nèi)部的對象-XMLHttpRequest-來實現(xiàn)發(fā)送和接收HTTP請求與響應信息。
一個經(jīng)由XMLHttpRequest對象發(fā)送的HTTP請求并不要求頁面中擁有或回寄一個＜form＞元素。

AJAX中的"A"代表了"異步"，這意味著XMLHttpRequest對象的send()方法可以立即返回，從而讓Web頁面上的其它HTML/JavaScript繼續(xù)其瀏覽器端處理而由服務器處理HTTP請求并發(fā)送響應。

盡管缺省情況下請求是異步進行的，但是，你可以選擇發(fā)送同步請求，這將會暫停其它Web頁面的處理，直到該頁面接收到服務器的響應為止。

微軟在其Internet Explorer(IE) 5中作為一個ActiveX對象形式引入了XMLHttpRequest對象。
其他的認識到這一對象重要性的瀏覽器制造商也都紛紛在他們的瀏覽器內(nèi)實現(xiàn)了XMLHttpRequest對象，但是作為一個本地JavaScript對象而不是作為一個ActiveX對象實現(xiàn)。

而如今，在認識到實現(xiàn)這一類型的價值及安全性特征之后，微軟已經(jīng)在其IE 7中把XMLHttpRequest實現(xiàn)為一個窗口對象屬性。幸運的是，盡管其實現(xiàn)(因而也影響到調(diào)用方式)細節(jié)不同，但是所有的瀏覽器實現(xiàn)都具有類似的功能，并且實質(zhì)上是相同方法。

目前，W3C組織正在努力進行XMLHttpRequest對象的標準化，并且已經(jīng)發(fā)行了有關(guān)該W3C規(guī)范的一個草案

XMLHttpRequest對象的屬性和事件

XMLHttpRequest對象暴露各種屬性、方法和事件以便于腳本處理和控制HTTP請求與響應。

下面，我們將對此展開詳細的討論。

readyState屬性

當XMLHttpRequest對象把一個HTTP請求發(fā)送到服務器時將經(jīng)歷若干種狀態(tài)：一直等待直到請求被處理；然后，它才接收一個響應。這樣以來，腳本才正確響應各種狀態(tài)-XMLHttpRequest對象暴露一個描述對象的當前狀態(tài)的readyState屬性，

XMLHttpRequest對象的ReadyState屬性值列表如下:

onreadystatechange事件
無論readyState值何時發(fā)生改變，XMLHttpRequest對象都會激發(fā)一個readystatechange事件。其中，onreadystatechange屬性接收一個EventListener值-向該方法指示無論readyState值何時發(fā)生改變，該對象都將激活。

responseText屬性

這個responseText屬性包含客戶端接收到的HTTP響應的文本內(nèi)容。當readyState值為0、1或2時，responseText包含一個空字符串。當readyState值為3(正在接收)時，響應中包含客戶端還未完成的響應信息。當readyState為4(已加載)時，該responseText包含完整的響應信息。

status屬性

這個status屬性描述了HTTP狀態(tài)代碼，而且其類型為short。而且，僅當readyState值為3(正在接收中)或4(已加載)時，這個status屬性才可用。當readyState的值小于3時試圖存取status的值將引發(fā)一個異常。

responseXML屬性

此responseXML屬性用于當接收到完整的HTTP響應時(readyState為4)描述XML響應 此時，Content-Type頭部指定MIME(媒體)類型為text/xml，application/xml或以+xml結(jié)尾。

如果Content-Type頭部并不包含這些媒體類型之一，那么responseXML的值為null。
無論何時，只要readyState值不為4，那么該responseXML的值也為null。

其實這個responseXML屬性值是一個文檔接口類型的對象，用來描述被分析的文檔。
如果文檔不能被分析(例如，如果文檔不是良構(gòu)的或不支持文檔相應的字符編碼)，那么responseXML的值將為null。

statusText屬性

這個statusText屬性描述了HTTP狀態(tài)代碼文本；并且僅當readyState值為3或4才可用。當readyState為其它值時試圖存取statusText屬性將引發(fā)一個異常。

abort()方法

你可以使用這個abort()方法來暫停與一個XMLHttpRequest對象相聯(lián)系的HTTP請求，從而把該對象復位到未初始化狀態(tài)。

open()方法　　

你需要調(diào)用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一個XMLHttpRequest對象。

其中，method參數(shù)是必須提供的-用于指定你想用來發(fā)送請求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。為了把數(shù)據(jù)發(fā)送到服務器，應該使用POST方法；為了從服務器端檢索數(shù)據(jù)，應該使用GET方法。

另外，uri參數(shù)用于指定XMLHttpRequest對象把請求發(fā)送到的服務器相應的URI。
借助于window.document.baseURI屬性，該uri被解析為一個絕對的URI-換句話說，你可以使用相對的URI-它將使用與瀏覽器解析相對的URI一樣的方式被解析。async參數(shù)指定是否請求是異步的-缺省值為true。

為了發(fā)送一個同步請求，需要把這個參數(shù)設(shè)置為false。對于要求認證的服務器，你可以提供可選的用戶名和口令參數(shù)。在調(diào)用open()方法后，XMLHttpRequest對象把它的readyState屬性設(shè)置為1(打開)并且把responseText、responseXML、status和statusText屬性復位到它們的初始值。另外，它還復位請求頭部。注意，如果你調(diào)用open()方法并且此時readyState為4，則XMLHttpRequest對象將復位這些值。

send()方法

在通過調(diào)用open()方法準備好一個請求之后，你需要把該請求發(fā)送到服務器。

僅當readyState值為1時，你才可以調(diào)用send()方法；否則的話，XMLHttpRequest對象將引發(fā)一個異常。

該請求被使用提供給open()方法的參數(shù)發(fā)送到服務器。當async參數(shù)為true時，send()方法立即返回，從而允許其它客戶端腳本處理繼續(xù)。在調(diào)用send()方法后，XMLHttpRequest對象把readyState的值設(shè)置為2(發(fā)送)。

當服務器響應時，在接收消息體之前，如果存在任何消息體的話，XMLHttpRequest對象將把readyState設(shè)置為3(正在接收中)。當請求完成加載時，它把readyState設(shè)置為4(已加載)。對于一個HEAD類型的請求，它將在把readyState值設(shè)置為3后再立即把它設(shè)置為4。

send()方法使用一個可選的參數(shù)-該參數(shù)可以包含可變類型的數(shù)據(jù)。典型地，你使用它并通過POST方法把數(shù)據(jù)發(fā)送到服務器。另外，你可以顯式地使用null參數(shù)調(diào)用send()方法，這與不用參數(shù)調(diào)用它一樣。

對于大多數(shù)其它的數(shù)據(jù)類型，在調(diào)用send()方法之前，應該使用setRequestHeader()方法(見后面的解釋)先設(shè)置Content-Type頭部。如果在send(data)方法中的data參數(shù)的類型為DOMString，那么，數(shù)據(jù)將被編碼為UTF-8。

如果數(shù)據(jù)是Document類型，那么將使用由data.xmlEncoding指定的編碼串行化該數(shù)據(jù)。

setRequestHeader()方法

該setRequestHeader(DOMString header，DOMString value)方法用來設(shè)置請求的頭部信息。當readyState值為1時，你可以在調(diào)用open()方法后調(diào)用這個方法；否則，你將得到一個異常。

getResponseHeader()方法

getResponseHeader(DOMString header，value)方法用于檢索響應的頭部值。僅當readyState值是3或4(換句話說，在響應頭部可用以后)時，才可以調(diào)用這個方法；否則，該方法返回一個空字符串。

getAllResponseHeaders()方法

該getAllResponseHeaders()方法以一個字符串形式返回所有的響應頭部（每一個頭部占單獨的一行）。如果readyState的值不是3或4，則該方法返回null。

AJAX發(fā)送請求

通過前面的一些概念的了解之后，現(xiàn)在我們才可以來開始執(zhí)行一下ajax的請求過程到底是怎么樣的!

在AJAX中，許多使用XMLHttpRequest的請求都是從一個HTML事件

使用場景

一個調(diào)用JavaScript函數(shù)的按鈕點擊(onclick)或一個按鍵(onkeypress)）中被初始化的。

AJAX支持包括表單校驗在內(nèi)的各種應用程序。有時，在填充表單的其它內(nèi)容之前要求校驗一個唯一的表單域。

例如: 要求使用一個唯一的UserID來注冊表單, 如果不是使用AJAX技術(shù)來校驗這個UserID域，那么整個表單都必須被填充和提交。如果該UserID不是有效的，這個表單必須被重新提交。

舉個栗子

<form name="validationForm" action="validateForm" method="post">
<table>
  <tr>
      <td>編號</td>
      <td><input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" onkeyup="sendRequest()">
      </td>
      <td>
          <div id="validationMessage"></div>
      </td>
  </tr>
</table>
</form>

前面的HTML使用validationMessage div來顯示相應于這個輸入域Catalog Id的一個校驗消息。

onkeyup事件調(diào)用一個JavaScript sendRequest()函數(shù)。這個sendRequest()函數(shù)創(chuàng)建一個XMLHttpRequest對象。

創(chuàng)建一個XMLHttpRequest對象的過程因瀏覽器實現(xiàn)的不同而有所區(qū)別。

如果瀏覽器支持XMLHttpRequest對象作為一個窗口屬性(所有普通的瀏覽器都是這樣的，除了IE 5和IE 6之外)

那么，代碼可以調(diào)用XMLHttpRequest的構(gòu)造器。

如果瀏覽器把XMLHttpRequest對象實現(xiàn)為一個ActiveXObject對象(就象在IE 5和IE 6中一樣)，那么代碼可以使用ActiveXObject的構(gòu)造器。

下面的函數(shù)將調(diào)用一個init()函數(shù)，它負責檢查并決定要使用的適當?shù)膭?chuàng)建方法-在創(chuàng)建和返回對象之前。

代碼如下

function init() {
     if (window.XMLHttpRequest) {
         return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
         return new ActiveXObject("Microsoft.XMLHTTP");
     }
 }

 function sendRequest() {

     var xmlHttpRequest = init();
     console.log(xmlHttpRequest);

 }

接下來，你需要使用Open()方法初始化XMLHttpRequest對象-指定HTTP方法和要使用的服務器URL。

然后，我們需要使用send()方法發(fā)送該請求。因為這個請求使用的是HTTP GET方法，所以，你可以在不指定參數(shù)或使用null參數(shù)的情況下調(diào)用send()方法!

function sendRequest() {

 var xmlHttpRequest = init();
 var catalogId=encodeURIComponent(document.getElementById("catalogId").value);

 console.log(catalogId);
 xmlHttpRequest.open("GET","test.txt",true);
 xmlHttpRequest.send();
 }

默認情況下，使用XMLHttpRequest發(fā)送的HTTP請求是異步進行的，但是你可以顯式地把async參數(shù)設(shè)置為true，如上面所展示的。

在這種情況下，對URL validateForm的調(diào)用將激活服務器端的一個servlet，但是你應該能夠注意到服務器端技術(shù)不是根本性的

實際上，該URL可能是一個ASP，ASP.NET或PHP頁面或一個Web服務-這無關(guān)緊要，只要該頁面能夠返回一個響應-指示CatalogID值是否是有效的-即可。

因為你在作一個異步調(diào)用，所以你需要注冊一個XMLHttpRequest對象將調(diào)用的回調(diào)事件處理器-當它的readyState值改變時調(diào)用。

記住，readyState值的改變將會激發(fā)一個readystatechange事件。
你可以使用onreadystatechange屬性來注冊該回調(diào)事件處理器。

當請求狀態(tài)改變時，XMLHttpRequest對象調(diào)用使用onreadystatechange注冊的事件處理器。

因此，在處理該響應之前，你的事件處理器應該首先檢查readyState的值和HTTP狀態(tài)。當請求完成加載（readyState值為4）并且響應已經(jīng)完成（HTTP狀態(tài)為"OK"）時，你就可以調(diào)用一個JavaScript函數(shù)來處理該響應內(nèi)容。

腳本負責在響應完成時檢查相應的值并調(diào)用一個方法。

該方法使用XMLHttpRequest對象的responseXML和responseText屬性來檢索HTTP響應。

如上面所解釋的，僅當在響應的媒體類型是text/xml，application/xml或以+xml結(jié)尾時，這個responseXML才可用。

這個responseText屬性將以普通文本形式返回響應。
對于一個XML響應，你將按如下方式檢索內(nèi)容：

var msg=xmlHttpRequest.responseXML;

完整代碼

function init() {
     if (window.XMLHttpRequest) {
         return new XMLHttpRequest();
     } else if (window.ActiveXObject) {
         return new ActiveXObject("Microsoft.XMLHTTP");
     }
 }

 function sendRequest() {

     var xmlHttpRequest = init();
     var catalogId=encodeURIComponent(document.getElementById("catalogId").value);

     console.log(catalogId);
     xmlHttpRequest.open("GET","test.txt",true);
     xmlHttpRequest.send();


     xmlHttpRequest.onreadystatechange=function (){
         if(xmlHttpRequest.readyState==4){
             //alert(1);
             if(xmlHttpRequest.status==200){
                 //alert(xmlHttpRequest.responseText);
                 var validationMessage = document.getElementById("validationMessage");
                 validationMessage.innerHTML = xmlHttpRequest.responseText;
             }
         }
     }
 }

最后，通過更新Web頁面的validationMessage div中的HTML內(nèi)容并借助于innerHTML屬性，你可以測試該元素值以創(chuàng)建一個要顯示的消息：

小結(jié)

上面就是XMLHttpRequest對象使用的所有細節(jié)實現(xiàn)。
通過不必把Web頁面寄送到服務器而實現(xiàn)數(shù)據(jù)傳送，XMLHttpRequest對象為客戶端與服務器之間提供了一種動態(tài)的交互能力。

你可以使用JavaScript啟動一個請求并處理相應的返回值，然后使用瀏覽器的DOM方法更新頁面中的數(shù)據(jù)。

文章來源地址http://www.zghlxwxcb.cn/news/detail-851133.html

到了這里，關(guān)于【你也能從零基礎(chǔ)學會網(wǎng)站開發(fā)】Web建站之javascript入門篇 淺談JavaScript中的AJAX和XMLHttpRequest對象的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！