剛開始結束Ajax請求的時候，那真的是迷迷糊糊，昏天暗地，通過學習的深入和翻閱各種資料、求助度娘，總結一下Ajax請求，與大家分享一下，希望能給學習Ajax的同學一些幫助，廢話不多手，直接開始~~~

一、Ajax請求的原理

1.原理:在Ajax請求中，html頁面的中操作將通過Ajax引擎與服務器端進行通訊，然後將返回的結果提交到客戶端頁面的Ajax引擎，再由Ajax引擎來決定將服務器端返回數據插入到頁面的指定位置。從而實現無需刷新頁面的http請求。 看圖：

2.Ajax請求的優點

 a.當然最大的優點就是，無需刷新就可更新頁面
 b.可以把原先服務器端負擔的工作的轉移客戶端，利用客戶端的閑置資源進行處理，減輕服務器和帶寬的負擔，節約空間和成本
 c.Ajax沒有平臺限制。Ajax把服務器由原先的傳送內容轉變為傳輸數據，而數據格式可以為純文本和XML格式，這兩種格式沒有平臺限制。
 d.可以調用Xml等外部數據，進一步促進頁面的顯示和數據的分離
 

3.Ajax使用的技術

 a.XMLHttpRequest對象
 b.XML
 c.JavaScript
 d.Css
 e.DOM

4.Ajax請求時性能的優化

 a.盡量使用局部變量，不要使用全局變量
 b.優化for循環
 c.盡量少使用eval，每次使用eval都會浪費大量時間
 d.將DOM節點附加到文檔上
 e.盡量減少使用點“.”號操作符的使用

二、不同方式的Ajax請求

1.原生js的ajax請求

　　a.初始化XMLHttpRequest對象

　　 /* IE6以上的瀏覽器*/

　　　　var http_request = new ActiveXObject("Msxml2.XMLHTTP") 或者： var http_request = new ActiveXObject("Microsoft.XMLHTTP")

    /* 非IE瀏覽器（firefox，Opera，Mozilla，Safari）*/
    var http_request = new XMLHttpRequest()

    考慮到瀏覽器的兼容性，需要創建一個跨瀏覽器的XMLHttpRequest對象，如下：

        var http_request;
        if (window.XMLHttpRequest) { //兼容非IE瀏覽器
            http_request = new XMLHttpRequest()
        } else if (window.ActiveXObject) { //兼容IE6以上的瀏覽器
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP")
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP")
                } catch (e) {}
            }
        }
 

  b.XMLHttpRequest對象的常用方法

     ----創建新請求的方法
        open()方法用於設置進行異步請求目標的URL，請求方法以及其他參數信息
        open("methods","URL","asyncFlag")
            methods:用於請求的指定類型，一般為POST或者GET
            URL：用於指定的請求地址，可以用絕對地址和相對地址，並且可以傳遞查詢字符串
            asyncFlag:可選參數，用於指定請求方式，異步請求為true，同步請求為false，默認為true

     ----向服務器發送請求的方法
        send()方法用於向服務器發送請求。如果請求聲明為異步，該方法立即返回，否則將會等到接收到響應為止 
        send(content)
            content:用於指定發送的數據，可以是DOM對象的實例，字符串等，如果沒用參數，需要傳遞設置為null
            舉個例子：
                需要向服務器發送一個沒有參數的請求，如下：
                http_request.send(null)

     ----設置請求的HTTP頭的方法
        setRequestHeader("header","value")
            header:用於指定的HTTP頭
            value：用於指定的HTTP頭的設置值
            註意：setRequestHeader()方法調用需要在open()方法之後
            例如：
                http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

     ----停止、放棄當前異步請求的方法
        abort()
        例子：停止當前的異步請求http_request.abort()

    c.XMLHttpRequest對象的常用屬性

         1.onreadystatechange:用於指定狀態改變時所觸發的事件處理器屬性，在Ajax中，每個狀態改變時都會觸發
            這個事件處理器，通常會調用一個Javascript函數
            http_request.onreadystatechange = function(){}

         2.readystate:請求狀態的屬性
            readystate屬性的屬性值的意義：
                0：未初始化      1：正在加載    2：已加載     3：交互中     4：完成
                在實際應用中，該屬性的經常用於判斷請求狀態，當請求狀態為4時，在判斷請求是否成功，如果成功，就開始處理返回結果
         
         3.responseText:獲取服務器的字符串響應的屬性
            接收響應：var text = http_request.responseText

         4.responseXML：獲取服務器的XML響應的屬性
            接收響應：var xmldoc = http_request.responseXML

         5.status：返回服務器的HTTP狀態碼的屬性
            格式：http_request.status
            狀態碼：
                100：繼續發送請求       200：請求成功
                202：請求被接受，但尚未成功    400：錯誤的請求
                404：文件未找到         408：請求超時
                500：內部服務器錯誤      501：服務器不支持當前請求所需要的某個功能  

            註意：status屬性只能在send()方法返回成功時，才能調用  
                當請求完成之後：

                    if (http_request.readystate === 4) {
                        if (http_request.status === 200) {
                            alert("請求成功")
                        } else {
                            alert("請求失敗")
                        }
                    }

Ajax請求匯總（一）