Ajax請求匯總（一）

標籤：內容   dom   ext   響應   app   顯示   迴圈   state   初始化   

 

剛開始結束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請求匯總（一）