平常會使用ajax來請求數據，加載一個庫(框架)，或許僅僅maybe就使用了它的ajax部分。

　　寫個ajax，一來可以經歷一下處理問題的過程，提升技術能力，二來工作中有時真的用不著這么大的一個庫(框架)，用自己寫的，何樂不為呢。

　　先來看看流行的jQuery是怎樣調用ajax的

　　這樣的調用是不是很舒適、方便，如果感覺舒適那自己動手寫也參照這種設計方式，不用太復雜，滿足所需就好。

　　先了解ajax的基礎知識

　　XMLHttpRequest 對象

　　XMLHttpRequest對象是ajax的核心，通過XMLHttpRequest對象來向服務器發異步請求，從服務器獲得數據，所有現代瀏覽器（IE7+、Firefox、Chrome、Safari、Opera）均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。　　

　　創建一個兼容的XMLHttpRequest對象

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

　　向服務器發送請求

xhr.open(method,url,async);
//method：請求的類型；GET 或 POST
//url：請求的URL
//async：true（異步）或 false（同步）
xhr.send(string);
//將請求發送到服務器
//string：僅用于 POST 請求
//GET 比 POST 請求方式更簡單也更快，并且在大部分情況下都能用
//在以下情況中，請使用 POST 請求：
//無法使用緩存文件（更新服務器上的文件或數據庫）
//向服務器發送大量數據（POST 沒有數據量限制）
//發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

　　服務器響應

　　使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性獲得來自服務器的響應。

　　　　如果來自服務器的響應是 XML，而且需要作為 XML 對象進行解析，請使用 responseXML 屬性。

　　　　如果來自服務器的響應并非 XML，請使用 responseText 屬性，responseText 屬性返回字符串形式的響應。

　　onreadystatechange 事件

　　當請求被發送到服務器時，我們需要執行一些基于響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。

　　 XMLHttpRequest 對象的三個重要的屬性：

　　　　onreadystatechange　　//存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數

　　　　readyState　　//存有 XMLHttpRequest 的狀態, 從 0 到 4 發生變化　　　　　

0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

　　　　status　　//200: "OK", 404: 未找到頁面

　　在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務, 當 readyState等于4 且 status為200 時，表示響應已就緒。

　　一個簡單的ajax請求如下：

　　補充：1. 發送GET請求時可能得到的是緩存的結果，為了避免這種情況，可以向URL 添加一個唯一的 ID，時間戳。2. 如果需要像HTML表單那樣 POST 數據，使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中發送數據。

　　開始寫自己的ajax

　　先寫一個基本的，定義好各種參數選項，供參考

　　定義好了參數選項，來分析一下。其中 dataType 是整個ajax的重點，代碼的簡單或者復雜都在它了。

　　在這里dataType為預期服務器返回的數據類型：xml, html, text, json, jsonp, script

　　1. 為xml時，來自服務器的響應是XML，使用 responseXML 屬性獲取返回的數據

　　2. 為html、text、json時，使用 responseText 屬性獲取返回的數據

　　　　　　a. 為html時，返回純文本HTML信息，其中包含的script標簽是否要在插入dom時執行 ( 代碼復雜度+3 )

　　　　　　b. 為json時, 返回JSON數據，要安全、要便捷、要兼容 ( 代碼復雜度+2 )

　　3. 為jsonp時，一般跨域才用它，不用原來的ajax請求了，用創建script法( 代碼復雜度+2 )

　　4. 為script時： 要跨域時，不用原來的ajax請求了，用創建script法( 代碼復雜度+1 )； 不跨域，返回純文本JavaScript代碼， 使用 responseText 屬性獲取返回的數據 ( 代碼復雜度+1 )

　　其中，在html片段中的script標簽、jsonp、script，都要用到創建script標簽的方式。

　　處理dataType為json

xhrdata = window.JSON && window.JSON.parse ? JSON.parse(xhr.responseText) : eval('(' + xhr.responseText + ')');

　　這是最簡單的處理方式了，要JSON兼容，可以用json2.js。

　　處理dataType為jsonp

　　jsonp是要通過script標簽來請求跨域的，先了解下流程：

　　這上圖中 a.html中請求了 http://www.b.com/b.php?callback=add （在ajax程序中請求url就是這個鏈接），在b.php中讀取了傳過來的參數 callback=add 根據獲取到的參數值(值為add)，以JS語法生成了函數名，并把json數據作為參數傳入了這個函數，返回以JS語法生成的文檔給a.html，a.html解析并執行返回的JS文檔，調用了定義好的add函數。

　　在程序中一般采用更通用的方式去調用，比如下面這個廣泛使用的loadJS函數：

　　這樣把請求的url，傳入loadJS函數，得到一樣的結果。

loadJS('http://www.b.com/b.php?callback=add');

　　因為是動態創建script，請求成功返回，JS代碼就立即執行，如果請求失敗是沒有任何提示的。因此自定義的參數選項： _opts.success 能調用，_opts.error不能調用。

　　ajax處理jsonp也有兩種情況：

　　1. 設置了請求URL后的參數 callback=add 特別是定義了函數名add，請求成功返回，JS代碼就立即執行(這里就是調用 add({"a":8,"b":2}) )

　　2. 在_opts.success中處理JSON數據，就是請求成功返回，JS代碼不執行，并把函數中的參數挪出來，作為_opts.success的參數返回( 這里相當于處理字符串 'add({"a":8,"b":2})' ，去掉 'add(' 和 ‘)'，得到 {"a":8,"b":2} )

　　處理dataType為html

　 如果不處理HTML片段中script標簽，直接把responseText返回值插入DOM樹就可以了。如果要處理script，就要把HTML片段中的script標簽找出來，對買個script單獨處理，并注意是script標簽中包含的JS代碼還是通過src請求的。

　　處理dataType為script

　　如果要跨域時，用創建script的方式，和處理jsonp類似； 不跨域，使用 responseText 屬性獲取返回的數據，可以用 eval 來讓代碼執行，也可以創建script來執行。

　　到此ajax差不多分析完了，根據實際需要，添加各種功能，去思考每種功能是怎樣實現的，并能找到解決方法。

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

MVC中基于Ajax和HTML5實現文件上傳功能

jquery與php結合實現AJAX長輪詢

初步了解JavaScript，Ajax，jQuery，并比較三者關系

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com