上節課說到了一個簡單的例子，並且簡單的分析了一下 如何建立一個XMLHttpRequest對象。
這節課，我們在詳細的說明一下XMLHttpRequest對象
大家首先看一下上節課遇到的 xmlHttp.send(); 方法。 這個 send(string) 是可以帶一個參數的 ，但是 ，必須 “POST”的模式下。我上面的中，應該寫成 xmlHttp.send(null);
大家可以試一下，結果正確嗎？
那麼大家可能有一個問題？POST和GET都在什麼情況下使用呢？
首先，我們知道 提交Form表單 有這兩種方式，呵呵，那麼我們就可以用提交表單的方式去理解 這兩種方式啊。
GET:毫無疑問速度比POST快。並且可用的範圍廣。
POST:
以下的情況下，建議用POST
1》向伺服器發送大量資料。
2》發送密碼什麼的。 為什嗎？安全性高。
繼續咱們昨天的例子：我們昨天細心的園友可能發現一個問題，就是我們“單擊顯示時間” 假如瀏覽器沒有關閉，重新開啟，那麼我們的到得時間總是一個時間，這是為什麼呢？
因為 您可能得到的是緩衝的結果。 解決這個現象也很簡單，呵呵，我想玩過ASP.NET的程式員，應該有個習慣解決這個問題。
好了，不賣關子了，大家可以在上面例子中的URL上面添加一個 參數
function getAjax() { xmlHttp.open("GET", "Ajax.ashx?i="+Math.random(),true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } } xmlHttp.send(); }
再試一下 有木有效果呢？結果還是相同的嗎？
哦了，下面給大家寫一個例子，這個例子，有興趣的童鞋可以自己寫個登陸出來，還有我因為是基於ASP.NET的原生態AJAX所以大家可能，所以我例子中的有些代碼是基於ASP.NET的。
所以大家可能需要注意一下。
首先先修改一下，Ajax.ashx【這個一般處理常式的代碼】
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; string name = context.Request["name"].ToString(); string sex = context.Request["sex"].ToString(); context.Response.Write(string.Format("大家好我是{0},我是{1}",name,sex)); }
好了，修改好了，下面是Ajax1.htm的頁面代碼
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"> var xmlHttp = false; //這個聲明成什麼都無所謂啦 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest();
} function getAjax() { xmlHttp.open("GET", "Ajax.ashx?name=KinDZ&sex=Man",true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById('getText').innerHTML = xmlHttp.responseText; } } xmlHttp.send(); } </script></head><body> <input type="button" value="單擊我就顯示我是誰？" onclick="getAjax();" /> <div id="getText"></div></body></html>
好了，該做的準備我們已經做好了 ，這回大家可以看到了吧
xmlHttp.open("GET", "Ajax.ashx?name=KinDZ&sex=Man",true); 這句明白了嗎？呵呵，GET方法是可以帶參數的。
下面給大家一個 上面例子的POST版本
function getAjax() { xmlHttp.open("POST", "Ajax.ashx", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById('getText').innerHTML = xmlHttp.responseText; } } xmlHttp.send("name=KingDZ&sex=Man"); }
記住上面的
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 這個是必須要設定的， setRequestHeader() 來添加 HTTP 頭。
下面就是設定----以後我們慢慢講解。
setRequestHeader(頭名稱,值);
好了，這節課的最後我們再來說明一下 xmlHttp.open("POST", "Ajax.ashx", true); 這裡面的這個 “true”;
XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設定為 true：
註：async：true（非同步）或 false（同步）
當使用 async=true 時，我們就可以使用 onreadystatechange 事件中的就緒狀態時來執行的函數
就是我們之前用到的例子。
當您使用 async=false 時，就不要使用 onreadystatechange 函數
把我們執行的代碼放到 send() 語句後面即可
呵呵，大家可以 具體在找一下這個資料。不過，對於新手來說，記住設定成 true 使用AJAX即可。
function getAjax() { xmlHttp.open("POST", "Ajax.ashx", false); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("name=KingDZ&sex=Man"); document.getElementById('getText').innerHTML = xmlHttp.responseText; }
好了，我們下面說一下 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
常用：
responseText：
獲得字串形式的響應資料。
responseXML：
獲得 XML 形式的響應資料。
不常用：【就不細講了】
responseBody :
獲得 unsigned byte數組形式的響應資料
responseStream
獲得IStream 形式的響應資料。
我們上面一直使用的是 responseText 。
下面我們稍微說一下 responseXML ，以後用到在慢慢細講。
首先我們需要準備一個XML檔案 Ajax1.xml
<?xml version="1.0" encoding="utf-8" ?><Ajaxstudent> <student name="KindDZ"> <sex>21</sex> <chinesename>哈哈</chinesename> </student> <student name="WDZ"> <sex>22</sex> <chinesename>呵呵</chinesename> </student> <student name="ADZ"> <sex>22</sex> <chinesename>嘻嘻</chinesename> </student></Ajaxstudent>
好了，下面修改一下
function getAjax() { xmlHttp.open("GET", "Ajax1.xml", true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { xmlDoc = xmlHttp.responseXML; //讀取 Ajax1.xml檔案 getxml = ""; chinesename = xmlDoc.getElementsByTagName("chinesename"); //這個是我們XML檔案中的某個節點。 for (i = 0; i < chinesename.length; i++) { getxml = getxml + chinesename[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("getXml").innerHTML = getxml; } } xmlHttp.send(); }
好了，修改完了，修改一下 HTML代碼
<body> <input type="button" value="單擊我就顯示XML檔案中的chinesename？" onclick="getAjax();" /> <div id="getXml"> </div></body>
OK結束了
到這裡，AJAX基礎的知識我們已經瞭解的差不多了。謝謝大家支援哦！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
