Ajax學習筆記(一)

最後更新：2014-07-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：des style http java 使用 os

XMLHttpRequest對象詳解
1、Ajax應用中我們使用XMLHttpRequest對象非同步發送請求，這種請求既可以是GET，也可以是POST，都可以帶請求參數。
請求發送出去之後，伺服器響應會在合適的時候返回，但是用戶端不會自動載入這種非同步響應，程式必須先調用XMLHttpRequest對象的responseText或responseXML來擷取伺服器響應，再通過DOM操作將伺服器響應動態載入到當前頁面中。
XMLHttpRequest的用處是：提供與伺服器非同步通訊的能力
2、XMLHttpRequest對象的基本方法：
abort() ：停止發送當前請求
getAllResponseHeaders()：擷取伺服器返回的全部回應標頭
getResponseHeaders("headerLabel")：根據回應標頭的名稱，擷取對應的回應標頭
request.open(method, url, async, username, password)建立與伺服器的URL連結
send(content):發送請求，Content是請求的參數
setRequestHeader("label","value")在發送請求前佈建要求頭
3、XMLHttpRequest的基本屬性：
onreadystatechange：指定XMLHttpRequest對象狀態改變時的事件處理函數
readyState:XMLHttpRequest對象的處理狀態
responseText:擷取伺服器的響應文本
responseXML:擷取伺服器響應的XML文檔對象
status:伺服器返回的狀態代碼，只有伺服器的響應已經完成才會有該狀態代碼
statusText:伺服器返回狀態的文本資訊
常式：

<body><select name="first" id="first" size="3" onchange="change(this.value);"><option value="1" selected="selected">中國</option><option value="2">美國</option><option value="3">小日本</option></select><select id="second" size="3"></select><hr/><div id="output1"></div><div id="output2"></div><script type="text/javascript">function change(id) {var request = new XMLHttpRequest();var url = "/Ajax/second.jsp?id=" + id;request.open("POST", url, true);//佈建要求頭request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設定處理響應的回呼函數request.onreadystatechange = function processResponse() {//測試XMLHttpRequest對象的處理狀態readyState屬性//alert(request.readyState);if (request.readyState == 4) {if (request.status == 200 || request.status == 304) {var headers = request.getAllResponseHeaders();//alert("要求標頭的類型：" + typeof headers + "\n" + headers);//在頁面中輸出所有要求標頭document.getElementById("output1").innerHTML = headers;document.getElementById("output2").innerHTML = request.responseText;var cityList=request.responseText.split("$");var displaySelect=document.getElementById("second");displaySelect.innerHTML=null;for(var i=0;i<cityList.length;i++){var option=document.createElement("option");option.innerHTML=cityList[i];displaySelect.appendChild(option);}} else {window.alert("你所請求的頁面異常！");}}}request.send(null);}</script></body>JSP頁面嵌入的代碼：    <%  int id=Integer.parseInt(request.getParameter("id"));  System.out.println(id);  switch(id){  case 1:  %>  上海$廣州$北京  <%  break;  case 2:  %>  華盛頓$紐約$加州  <%  break;  case 3:  %>  東京$大阪$名古屋  <%  break;  }      %>

4、XMLHttpRequest遵循的步驟：
1.初始化XMLHttpRequest對象
2.開啟與伺服器的串連
3.設定監聽XMLHttpRequest狀態改變的事件函數
4.發送請求
5、通常而言，GET請求用於從伺服器上擷取資料，POST請求用於向伺服器發送資料
GET請求將所有的請求參數轉換成一個查詢字串，並將該字串添加到請求的URL之後
如果某個表單的action屬性設為GET，則請求會將表單中各欄位的值轉換成字串，並附加到URL之後
POST請求則通過HTTP POST機制，將請求的參數以及對應的值放在HTML Header中傳輸，使用者看不到明碼的請求參數值
GET請求傳輸的資料量較小，一般不能大於2KB，POST請求參數的大小不受限制，但往往取決於伺服器的限制
當使用Ajax發送非同步請求時，建議使用POST請求。
6、中文亂碼問題
正常使用POST提交(POST請求預設使用UTF-8字元集來編碼請求參數)並且在jsp頁面添加(有時也可以不加，因為有的伺服器頁面預設編碼即為UTF-8)setCharacterEncoding
("UTF-8");應該沒有亂碼。
如果使用GET提交，GET請求將請求參數和對應的值附加在請求的URL之後，對於中文的請求參數值將不再以中文方式傳遞，而是轉碼成URL的格式，因此必須在伺服器端這樣處理：假設伺服器端獲得的參數是target,先擷取value請求參數，再按ISO-8859-1字元集編碼成位元組數組，然後按UTF-8字元集將該位元組數組解碼成字串。
String target=request.getParameter("value");
String a=new String(target.getBytes("ISO-8859-1"),"UTF-8");

//上面的對GET方式的處理並不能保證高枕無憂，因為不同的瀏覽器可能採用不同的字元集編碼GET請求參數，所以盡量用POST提交

7、發送XML請求

html代碼：<body>    <select name="first" id="first" style="width: 80px;" size="3" multiple="multiple">    <option value="1" >中國</option>    <option value="2">美國</option>    <option value="3" >日本</option>    </select>    <input type="button" value="發送請求" onclick="send();">     <select name="second" id="second" style="width: 100px;" size="6"></select>     <script type="text/javascript">     //定義建立XML文檔的函數     function createXML(){     var xml="<countrys>";     var options=document.getElementById("first").childNodes;     var option=null;     for(var i=0;i<options.length;i++){     option=options[i];     if(option.selected){     xml+="<country>"+option.value+"<\/country>";     }     }     //結束xml文檔的根節點     xml+="<\/countrys>";     return xml;     }          function send(){     var request=new XMLHttpRequest();     var url="/Ajax/xml.jsp";     request.open("POST",url,true);     request.onreadystatechange=function(){     //測試XMLHttpRequest對象的處理狀態readyState屬性//alert(request.readyState);if (request.readyState == 4) {if (request.status == 200 || request.status == 304) {var headers = request.getAllResponseHeaders();//alert("要求標頭的類型：" + typeof headers + "\n" + headers);//在頁面中輸出所有要求標頭var cityList=request.responseText.split("$");var displaySelect=document.getElementById("second");displaySelect.innerHTML=null;for(var i=0;i<cityList.length;i++){var option=document.createElement("option");option.innerHTML=cityList[i];displaySelect.appendChild(option);}} else {window.alert("你所請求的頁面異常！");}}       }     request.send(createXML());     }     </script>  </body>JSP嵌入的代碼：<%//定義一個StringBuffer對象，用於請求參數StringBuffer xmlBuffer = new StringBuffer();String line = null;//通過request對象擷取輸入資料流BufferedReader reader = request.getReader();while ((line = reader.readLine()) != null) {xmlBuffer.append(line);}String xml = xmlBuffer.toString();//dom4j解析xml字串Document xmlDoc = new XPPReader().read(new ByteArrayInputStream(xml.getBytes()));//獲得countrys結點的所有子節點List countryList = xmlDoc.getRootElement().elements();//定義伺服器響應結果String result = "";//遍曆所有結點for (Iterator it = countryList.iterator(); it.hasNext();) {Element country = (Element) it.next();if (country.getText().equals("1")) {result += "$上海$廣州$北京";} else if (country.getText().equals("2")) {result += "$華盛頓$紐約$矽谷";} else if (country.getText().equals("3")) {result += "$東京$大阪$名古屋";}}//向用戶端發送響應out.println(result);%>

從上面的代碼可以看出，發送的XML請求依然是POST請求，只是請求參數不再以param=value的形式發送，而是直接採用XML字串作為參數。
這意味著伺服器端不能直接擷取請求參數，而是必須以流的形式擷取請求參數。
8、使用XML響應用戶端請求要注意不同瀏覽器之間的差異，雖然各個瀏覽器都實現了DOM規範，但它們在細節上依然存在一些差異。返回的XML文檔對象需要瀏覽器的XML解析器的支援。
9、XMLHttpRequest對象的運行周期
(1)Ajax應用總是從建立XMLHttpRequest對象開始，XMLHttpRequest的作用正如它的名字所暗示的，允許通過用戶端指令碼來發送Http請求，Ajax應用的第一步總是建立一個XMLHttpRequest執行個體，然後用它來發送請求，GET/POST。
(2)XMLHttpRequest發送完之後，伺服器的響應何時到達？應該何時處理伺服器的響應呢？這需要藉助js的事件機制。XMLHttpRequest也是一個普通的js對象，就如一個普通的按鈕或文字框一樣，可以觸發事件：XMLHttpRequest觸發的事件就是onreadystatechange.XMLHttpRequest對象的狀態改變時，將觸發onreadystatechange事件。為XMLHttpRequest對象的onreadystatechange屬性指定事件處理函數，該事件處理函數可以在XMLHttpRequest狀態改變時被觸發，這個事件處理函數也稱回呼函數。
(3)XMLHttpRequest狀態改變，且readyState為4時，即表明伺服器的響應已經完成，此時可以處理伺服器響應。
(4)通過js的事件機制，使用事件處理函數監聽XMLHttpRequest狀態的改變，當XMLHttpRequest的readyState為4，且status為200時，事件處理函數處理伺服器響應。
(5)進入事件處理函數後，XMLHttpRequest對象任然不可或缺，事件處理函數需要藉助XMLHttpRequest對象來擷取伺服器的響應，調用responseText方法或者responseXML方法擷取伺服器的響應。至此，XMLHttpRequest對象的運行周期結束。
(6)JavaScript通過DOM操作將伺服器響應動態載入到HTML頁面中。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More