Ajax技術---原理與知識點

Ajax（Asynchronous JavaScript + XML 的簡寫）能夠向伺服器請求額外的資料而無須解除安裝頁面，可以帶來更好的使用者體驗。 Ajax技術的核心是XMLHttpRequest對象（簡稱XHR），XHR能夠以異步方式從伺服器取得更多資訊，意味着使用者單擊後，可以不必重新整理頁面也能取得新資料。也就是說，可以使用XHR對象取得新資料，然後再通過DOM将新資料插入到頁面中。   使用Ajax的方法與步驟 ①我們要用XHR對象向伺服器請求資料， 首先，我們得建立一個XHR對象，如下： var xhr = new XMLHttpRequest();    //  标準浏覽器 建立方式 var xhr = new ActiveXObject('Microsoft.XMLHTTP');    //  IE6 建立方式   ② 建立了XHR對象之後，要調用的第一個方法就是open()， ex： xhr.open('get', 'async.php', true); open()方法的3個參數： 第1個參數：要發送的請求的類型（ “get”，“post”） 第2個參數：請求的URL 第3個參數：表示是否異步發送請求的布爾值，true表示異步，false表示同步 open()方法會啟動一個針對第二個參數（URL）的（get 或者 post） 請求，但并不會真正發送請求，而隻是啟動一個請求以備發送。注意：URL和執行代碼的目前頁面（當然也可以是絕對路徑）必須在同一個域中，并且使用相同端口和協定，否則會引發安全錯誤。   請求類型（第1個參數）詳解： get請求 ： 1：可傳送簡單資料，需要将參數字元串追加到URL的末尾，以便将資訊發送給伺服器。 2：它會被用戶端的浏覽器緩存起來，那麼，别人就可以從浏覽器的曆史記錄中，讀取到此客戶的資料，比如帳号和密碼等。是以，在某些情況下，get方法會帶來嚴重的安全性問題。 3：另外get傳送的資料量較小，不能大于2KB，但處理效率高，通常是post方式的2倍 。 4：使用get請求經常會發生一個錯誤，就是參數字元串的格式有問題。字元串中每個參數的名稱和值都必須使用encodeURIComponent()進行編碼，然後再能放到URL的末尾(URL的末尾還要用？連接配接參數字元串)，并且所有鍵-值對兒都必須由”&“分隔，ex：example.php?name1=value1&name2=value2   post請求 ： 1：當使用POST方式時，浏覽器把各表單字段元素及其資料作為HTTP消息的實體内容發送給Web伺服器，而不是作為URL位址的參數進行傳遞，是以相對get請求方式是安全的。 2：使用POST方式傳遞的資料量要比使用GET方式傳送的資料量大的多，可以達到2M 。 3：使用post請求，需要在send()方法之前，設定Context-Type的頭資訊，如下： xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); 4：參數字元串格式也是名/值一一對應的鍵值對,每對值用&号隔開.如 "name=abc&sex=man&age=18" 5：參數在Send(參數)方法中發送,例：  xml.send("name=abc&sex=man&age=18");    get與post的差别小結： 1.Post傳輸資料時，不需要在URL中顯示出來，而Get方法要在URL中顯示。  2.Post傳輸的資料量大，可以達到2M，而Get方法由于受到URL長度的限制,隻能傳遞大約1024位元組.  3.Post顧名思義,就是為了将資料傳送到伺服器段,Get就是為了從伺服器段取得資料.而Get之是以也能傳送資料,隻是用來設計告訴伺服器,你到底需要什麼樣的資料.Post的資訊作為http請求的内容，而Get是在Http頭部傳輸的。 4.get 方法用Request.QueryString["strName"]接收，post 方法用Request.Form["strName"] 接收 5.一般來說，盡量避免使用Get方式送出表單，因為有可能會導緻安全問題   ③ 要發送上面的請求，必須調用send()方法, ex： xhr.send(null); send()方法接收一個參數，即要作為請求主體發送的資料。如果不需要通過請求主體發送資料（比如get方式），則必須傳入null，因為這個參數對有些浏覽器來說是必需的。調用send()方法之後，請求就會被分派到伺服器。 伺服器背景頁面接收到請求後，會處理發送過去資料，然後再把處理結果發送回用戶端。伺服器端的過程不用XHR對象（或說Ajax技術）考慮，隻是為了完善資料來回的過程，是以才在這裡提到。   ④ 判斷readyState屬性值與status屬性值 、處理響應結果。 處理響應結果之前，我們先了解一下XHR對象的readyState屬性，如下： readyState屬性：表示請求/響應過程的目前活動階段。 0：未初始化。尚未調用open()方法。 1：啟動。已經調用open()方法，但尚未調用send()方法。 2：發送。已經調用send()方法，但尚未接收到響應。 3：接收。已經接收到部分響應資料。 4：完成 。已經接收到全部響應資料，而且已經可以在用戶端使用了。我們隻關注這個階段就夠了。 隻要readyState屬性的值由一個值變成另一個值，就會觸發一次readystatechange事件，可以利用這個事件來檢測每次狀态變化後readyState的值。通常，我們隻對readtState的值為4的階段感興趣。需要注意的是，我們必須在調用open()方法之前制定onreadystatechange事件處理程式才能確定跨浏覽器相容性。   在收到響應後，響應的資料會自動儲存在XHR對象的屬性中。相關屬性如下： responseText：響應主體，被傳回的文本。 responseXML：如果響應的内容類型是"text/xml"或"application/xml"，這個屬性中将儲存包含着響應資料的XML DOM文檔。 status：響應的HTTP狀态。 statusText：HTTP狀态說明。   思路：資料已經從接收到了 伺服器發回的全部資料，并且接收到正常狀态的資料的時候，我們處理伺服器傳回的資料，這個思路的代碼如下： xhr.onreadystatechange = function () {             if(xhr.readyState == 4){     //  接收到伺服器發回的全部資料                 if(xhr.status == 200 || xhr.status == 304){   //  傳回資料正确 200代表成功，304代表頁面沒有改變，從緩存中讀取資料，都表示資料正确                     //  處理 xhr.responseText，在這裡寫代碼就行了                 }         }   }   常用status(響應的HTTP狀态)------說明： 1字頭---資訊報告碼：伺服器收到請求，需要請求者繼續執行操作 2字頭---成功：操作被成功接收并處理 200  OK    請求已成功，請求所希望的響應頭或資料體将随此響應傳回。 3字頭---重定向：需要進一步的操作以完成請求 301  Moved Choices   永久移動。請求的資源已被永久的移動到新URI，傳回資訊會包括新的URI，浏覽器會自動定向到新URI。今後任何新的請求都應使用新的URI代替 304   Not Modified   未修改。所請求的資源未修改，伺服器傳回此狀态碼時，不會傳回任何資源。用戶端通常會緩存通路過的資源，通過提供一個頭資訊指出用戶端希望隻傳回在指定日期之後修改的資源 4字頭---請求錯誤：請求包含文法錯誤或無法完成請求 400 Bad Request    用戶端請求的文法錯誤，伺服器無法了解。 403 Forbidden    資源不可用。伺服器了解客戶的請求，但拒絕處理它。通常由于伺服器上檔案或目錄的權限設定導緻。 404  Not Found    無法找到指定位置的資源。這也是一個常用的應答。 5字頭---伺服器錯誤：伺服器在處理請求的過程中發生了錯誤 500   Internal Server Error   伺服器内部錯誤，無法完成請求。 502  Bad Gateway     充當網關或代理的伺服器，從遠端伺服器接收到了一個無效的請求 503 Service Unavailable   由于超載或系統維護，伺服器暫時的無法處理用戶端的請求。延時的長度可包含在伺服器的Retry-After頭資訊中