7.Ajax和Http狀態字 · COLIN前端開發筆記

[toc] ##Ajax及其工作原理 AJAX 是一種與服務器交換數據無需刷新網頁的技術，最早由Google公司在谷歌地圖里使用，并迅速風靡。 AJAX是不能跨域的，如需跨域，可以使用`document.domain='a.com'；`或者使用服務器代理，代理XMLHttpRequest文件 AJAX是基于現有的Internet標準，并且聯合使用它們： ``` XMLHttpRequest 對象 (異步的與服務器交換數據) JavaScript/DOM (信息顯示/交互) CSS (給數據定義樣式) XML (作為轉換數據的格式) ``` ![](https://box.kancloud.cn/2016-05-20_573ed07b6c215.jpg) ##創建 XMLHttpRequest 對象所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 `XMLHttpRequest` 對象。創建Ajax對象： ``` //IE6以上 var oAjax = new XMLHttpRequest(); //IE6 var oAjax =new ActiveXObject("Microsoft.XMLHTTP") ``` ##連接服務器 ``` oAjax.open(方法,url,是否異步) ``` 我們都知道，Ajax即“`Asynchronous Javascript And XML`”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。所以，Ajax天生就是工作在異步模式的（異步為true，同步false） ### 同步和異步同步是指：發送方發出數據后，等接收方發回響應以后才發下一個數據包的通訊方式。異步是指：發送方發出數據后，不等接收方發回響應，接著發送下個數據包的通訊方式。（簡單點說：同步就是只能一件一件事的來做，而異步就是可以多件事同時進行） ##發送請求send() ``` <script type="text/javascript"> function getDoc(){ var xmlhttp; if(window.xmlhttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6 } xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("?myId").innerHTML=xmlhttp.responseText; } } xmlhttp.open("?GET", index.php,true); xmlhttp.send(); } </script> </head> <body> <button type="button" onclick="getDoc()">請求數據</button> </body> ``` GET 還是 POST？與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求： ``` 無法使用緩存文件（更新服務器上的文件或數據庫）向服務器發送大量數據（POST 沒有數據量限制）發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠 ``` ##接收返回信息 ``` oAjax.onreadystatechange = function(){ //當請求狀態改變時要調用的事件處理器 alert(oAjax.readystate); } ``` 只要`readyState`屬性的值發生變化時，便會觸發一次`readyStatechange`事件。可以利用這個事件來檢測每次狀態變化后readyState的值。通常，我們只對readyState值為4的階段感興趣，因為這時所有數據都已經就緒，不過，必須在調用`open()`之前指定`onreadystatechange`事件處理程序才能確保跨瀏覽器兼容性。下面來看一個例子： ``` var xhr = createXHR(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { alert(xhr.statusText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "example.txt", true); xhr.send(null); ``` ### XHR對象 `XMLHttpRequest`這個對象的屬性：它的屬性有： ``` onreadystatechange 每次狀態改變所觸發事件的事件處理程序。 responseText 從服務器進程返回數據的字符串形式。 responseXML 從服務器進程返回的DOM兼容的文檔數據對象。 status 從服務器返回的數字代碼，比如常見的404（未找到）和200（已就緒） status Text 伴隨狀態碼的字符串信息 ``` 當XHR對象把一個HTTP請求發送到服務器的過程中會經歷幾個狀態，直到請求被處理，然后才接收一個回應。`readyState`就是XHR請求的狀態屬性，它本身有5個屬性值： ``` 0（未初始化）還沒有調用open()方法 1（載入）已調用send()方法，正在發送請求 2(載入完成)send()方法完成，已收到全部響應內容 3(解析)正在解析響應內容 4（完成）響應內容解析完成，可以再客戶端使用了 ``` ##http狀態碼 1字頭：消息。這一類型的狀態碼，代表請求已被接受，需要繼續處理。 2字頭：成功。這一類型的狀態碼，代表請求已成功被服務器接收、理解、并接受。 3字頭：重定向。這類狀態碼代表需要客戶端采取進一步的操作才能完成請求。 4字頭：客戶端錯誤。這類狀態碼代表了客戶端看起來可能發生錯誤，妨礙了服務器的處理。 5字頭：服務器錯誤。這類狀態碼代表了服務器在處理請求的過程中有錯誤或者異常狀態發生另附：[http狀態碼詳解](http://tool.oschina.net/commons?type=5) w3cschool HTTP狀態消息：[http://www.w3school.com.cn/tags/html\_ref\_httpmessages.asp](http://www.w3school.com.cn/tags/html_ref_httpmessages.asp) ![](https://box.kancloud.cn/2016-05-20_573ed07b8a11d.png) ##status和statusText `statusText`是響應返回的文本信息，僅當`readyState`值為3或4的時候才能使用。當`readyState`為其它值時視圖存取`statusText`屬性將引發異常。 ##XHR的方法 | 方法 | 描述 | | -- | -- | | abort() | 導致當前正在執行的請求被取消 | | getAllResponseHeaders() | 返回包含所有響應頭的名稱和值的單個字符 | | getResponseHeader(name) | 返回響應頭中指定的名稱和值 | | open(method,url,async,username,pwd) | 設置HTTP方法（get或post）等 | | send(content) | 發出帶有指定主體內容的請求 | | setRequestHeader(name,value) | 使用指定的名稱和值設置請求頭 | ``` <script type="text/javascript"> var oAjax =oAjax(); alert(oAjax.readyState);//彈出"0" oAjax.open("get","index.html",true); alert(oAjax.readyState);//彈出"1" oAjax.send(null); alert(oAjax.readyState);//IE下彈出4,而firefox是2 //可以通過readystatechange事件監聽 oAjax = XHR(); oAjax.onreadystatechange = function () { alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最后還會再來個1 //IE下則是1,1,3,4 }; oAjax.open("get","index.txt",true); oAjax.send(null); </script> ``` ##jQuery中的Ajax `.load()`方法是局部方法，因為他需要一個包含元素的`jQuery`對象作為前綴，而`$.get()`和`$.post()`是全局方法，無需指定某個元素，對于用途而言，`.load()`適合做靜態文件的異步獲取，而對于需要傳遞參數到服務器頁面的，`$.get()`和`$.post()`更加合適。 GET和POST傳入的data是一個鍵值對對象，不同的是GET傳入的data是通過地址欄傳輸的，而POST是通過表單提交的， ``` $(function () { $("input").click(function () { $.get('test.php?url=baidu.com', function (response,status,xhr) { $('\#box').html(response); }) }) }); ``` `POST`提交不能使用`url`傳參。`post`提交可以使用字符串形式的鍵值對形式傳參，自動轉換為http消息實體傳參 ``` $(function () { $("input").click(function () { $.post('test.php','url=baidu.com', function (response,status,xhr) { $('\#box').html(response); }) }) }); ``` ``` //post提交可以使用對象鍵值對 $(function () { $("input").click(function () { $.post('test.php',{ url:'baidu.com'//post提交可以使用對象鍵值對 }, function (response,status,xhr) { $('#box').html(response); }) }) }); ``` `$.get()`方法有四個參數，前面三個參數和`.load()`一樣，多了一個第四參數`type`，即服務器返回的內容格式，包括`xml,json,script,html,text`等，第一個參數為必選參數，后面三個為可選參數 `$.ajax()`是所有Ajax方法中最底層的方法，所有其他方法都是基于`$.ajax()`方法的封裝，這個方法只有一個參數，傳遞一個各個功能鍵值對的對象。 ### $.ajax()方法對象參數列表 | 參數 | 類型 |說明| | -- | -- |-- | |url|string|發送請求的地址| |type|string|請求方法，默認GET| |timeout|Number|設置請求超時的時間| |data|Object或String|發送到服務器的對象，鍵值對字符串或對象| |datatype|String|返回的數據類型，比如html，XML，json等| |success|Function|請求成功后調用的回調函數| |complete|Function|請求完成后調用的回調函數| |error|Function|請求失敗后調用的回調函數| ``` $(function () { $("input").click(function () { $.ajax({ type : "POST", url: 'test.php', data:{ url: 'baidu.com' }, success : function(response,status,xhr){ $('#box').html(response); } }) }) }); ``` ### 表單序列化 `Ajax`用的最多的地方莫過于表單操作，而傳統的表單操作是通過`submit`提交將數據傳輸到服務器，如果使用`Ajax`異步處理的話，我們需要將每個表單元素獲取才能提交，這樣工作效率就大大降低 ``` <body> <form action=""> 用戶名: <input type="text" name="user" /> 郵件: <input type="text" name="email" /> <input type="button" value="提交"/> </form> <div id="box"></div> <script type="text/javascript"> $(function () { $("form input[type=button]").click(function () { $.ajax({ type: 'POST', url: 'test.php', data: { user: $('form input[name=user]').val(), email: $("form input[name=email]").val(), }, success: function(response){ $("#box").html(response); } }) }) }); </script> </body> ``` 表單元素特別多的情況下應采用表單序列化，即`data:$(“form”).serialize();`//得到的是字符串鍵值對，并且對`url`進行編碼 `serialize()`方法不但可以序列化表單內的元素，還可以直接獲取單選框，復選框和下拉列表框等內容 ``` <body> <form action=""> 用戶名: <input type="text" name="user" /> 郵件: <input type="text" name="email" /> <input type="button" value="提交"/> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 <input type="button" value="submit"/> </form> <div id="box"></div> <script> $(function () { $("form input[name=sex]").click(function () { $('#box').html(decodeURIComponent($(this).serialize())); }) }) </script> </body> ``` ##傳統Ajax問題傳統的`ajax`有如下的問題： 1. 可以無刷新改變頁面內容，但無法改變頁面URL 2. 為了更好的可訪問性，內容發生改變后，通常改變URL的hash 3. hash的方式不能很好的處理瀏覽器的前進、后退等問題 4. 進而瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時去判斷hash是否改變 5. 但這種方式對搜索引擎很不友好 6. twitter和google約定了使用\#!xxx（即hash第一個字符為!），搜索引擎進行支持。