AJAX(二）詳解GET/POST請求
上次是最簡單的原生JS實現AJAX效果。不過，那簡單的步驟不能適應各種不同的瀏覽器，尤其是萬惡的IE，尤其是低版本的IE瀏覽器。本期就來搞定各個瀏覽器，以及其他各項參數的設置。
一、服務端代碼
服務端代碼仍然使用.NET一般處理程序，這次的邏輯略有改動，通過QueryString獲取一個key為type的參數，旨在接下來演示AJAX通過GET方式傳參。此type屬性預設值為“DATE“/”TIME“，如果是”DATE”，服務端就返回當前日期（年月日），否則返回當前時間（時分秒）。
public class TimeHandler : IHttpHandler { publicvoid ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string type = context.Request.QueryString["type"].ToUpper(); if(type == "DATE") { context.Response.Write(DateTime.Now.ToLongDateString()); } else { context.Response.Write(DateTime.Now.ToLongTimeString()); } }public bool IsReusable { get { return false; } } }
二、客戶端JS代碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> window.onload = function () { var btn = document.getElementById("btnTime"); btn.onclick = function () { ////1.聲明異步對象 var xhr = false; //2.根據瀏覽器類型，創建異步對象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //3.從下拉選項框中獲取用戶選中的選項 var type = document.getElementById("dType").value; //4.拼寫url，把get請求傳遞的參數拼接到url後邊 var url = "timehandler.ashx" + "?type=" + type; //5.打開異步對象，並設置參數 xhr.open("get", url, true); //6.設置setRequestHeader，不使用緩存數據 xhr.setRequestHeader("If-Modified-Since", "0"); //7.設置回調函數 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var h2 = document.getElementById("time"); h2.innerHTML = xhr.responseText; } } //4.發送異步請求 xhr.send(null); } } </script> </head> <body> <select id="dType"> <option value="DATE">年月日</option> <option value="TIME">時分秒</option> </select> <h2 id="time"></h2> <button id="btnTime">點擊</button> </body> </html>
在客戶端，用戶通過選擇select下拉框中的選項，然後點擊btnTime按鈕，獲取服務器日期或時間。
與最簡化的版本相比，變化點有以下幾個
1.異步對象的創建。
不同的瀏覽器對於XMLHttpRequest對象的支持不同，這裏主要指的是IE，尤其是老版本的IE，它們不支持該對象。IE老版本的瀏覽器支持的是MS自家的對象ActiveXObject，所以在創建的時候要先做下判斷，以兼容老版本IE瀏覽器。
其中new ActiveXObject（"Microsoft.XMLHTTP"）時，傳遞的參數表示微軟的xml語言解析器，用來解釋xml語言的。就好像html文本下載到本地，瀏覽器會檢查html的語法，解釋html文本然後顯示出來一樣，不過不僅僅微軟有。該也是有變化的，原因是微軟在不同版本的瀏覽器中，對於該參數的解析也不同，所以也有人這麽來創建異步對象
var xhr = false; var msXmlVers = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"]; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { for (var i = 0; i < msXmlVers.length; i++) { xhr = new ActiveXObject(msXmlVers[i]); if (xhr) { break; } } }
其中msXmlVers是個數組，該數組的各個項是不同的msxml解析版本。不過這麽寫的人貌似不多。
話又說回來了，現在誰還寫原生的Javascript代碼來做AJAX？所以這裏我們了解就OK了，不求甚解了。
2.GET請求傳參
AJAX對於Get請求和Post請求的傳參方式是不同的。
Get請求仍然通過url傳參，參數仍然以鍵值對的形式傳遞。語法：url？key1=val1&key2=val2&key3=val3..... ，與普通的get請求傳出別無二致。
3.禁用客戶端緩存
setRequestHeader是異步對象提供的一個重要的API，它是用來設置請求報文頭的。
這裏：xhr.setRequestHeader("If-Modified-Since", "0");是通過設置請求報文頭的"If-Modified-Since"，來達到禁用客戶端緩存數據的目的。
至於為什麽要禁用客戶端緩存數據？
在http中Last-Modified 與If-Modified-Since 都是用於記錄頁面最後修改時間的 HTTP 頭信息，註意,在這 Last-Modified 是由服務器往客戶端發送的 HTTP 頭，另一個 If-Modified-Since是由客戶端往服務器發送的頭，可以看到，再次請求本地存在的 cache 頁面時，客戶端會通過 If-Modified-Since 頭將先前服務器端發過來的 Last-Modified 最後修改時間戳發送回去，這是為了讓服務器端進行驗證，通過這個時間戳判斷客戶端的頁面是否是最新的，如果不是最新的，則返回新的內容，如果是最新的，則 返回 304 告訴客戶端其本地 cache 的頁面是最新的，於是客戶端就可以直接從本地加載頁面了，這樣在網絡上傳輸的數據就會大大減少，同時也減輕了服務器的負擔。而且在一些ajax應用中，要求獲取的數據永遠是最新的，而不是讀取位於緩存中的數據，做這樣的設置是非常有必要的。
那麽除了這種方法禁用緩存數據以外，還有一個種方法，就是在請求的url上做手腳。比如：var url = "timehandler.ashx" + "?timestamp=" + new Date().getTime();
AJAX(二）詳解GET/POST請求