快捷導(dǎo)航

非常簡(jiǎn)單的Ajax請(qǐng)求實(shí)例附源碼

更新時(shí)間：2015年11月03日 14:17:40 投稿：lijiao

這篇文章為大家推薦了一個(gè)非常簡(jiǎn)單的Ajax請(qǐng)求實(shí)例，可以在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)，感興趣的小伙伴們可以參考一下

Ajax不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。通過(guò)Ajax，您可以使用 JavaScript的XMLHttpRequest對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。您可以在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)。在本文的例子中，我們將演示當(dāng)用戶向一個(gè)標(biāo)準(zhǔn)的HTML表單中輸入數(shù)據(jù)時(shí)網(wǎng)頁(yè)如何與web服務(wù)器進(jìn)行通信。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>簡(jiǎn)單的Ajax請(qǐng)求</title>
 <script type="text/javascript">
  var xmlHttp;
  // 創(chuàng)建XMLHttpRequest對(duì)象
  function createXMLHttpRequest() {
   if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
   }
  }
  // 整合url參數(shù)
  function createQueryString() {
   var name = document.getElementById("txtName").value;
   var sex = document.getElementById("txtSex").value;
   var birthday = document.getElementById("txtBirthday").value;
   var queryString = "Name=" + encodeURIComponent(name) + "&Sex=" + encodeURIComponent(sex) + "&Birthday=" + encodeURIComponent(birthday);
   return queryString;
  }
  // 按照Get方式傳遞參數(shù)
  function doRequestUsingGET() {
   createXMLHttpRequest();
   var queryString = "AjaxServer.ashx?";
   queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.open("GET", queryString, true);
   xmlHttp.send(null);
  }
  // 按POST方式傳遞參數(shù)
  function doRequestUsingPOST() {
   createXMLHttpRequest();
   var url = "AjaxServer.ashx?timeStamp=" + new Date().getTime();
   var queryString = createQueryString();
   xmlHttp.open("POST", url, true);
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
   xmlHttp.send(queryString);
  }
  // 回調(diào)函數(shù)
  function handleStateChange() {
   if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
     parseResults();
    }
   }
  }
  // 處理服務(wù)器響應(yīng)內(nèi)容
  function parseResults() {
   var responseDiv = document.getElementById("serverResponse");
   if (responseDiv.hasChildNodes()) {
    responseDiv.removeChild(responseDiv.childNodes[0]);
   }
   var responseText = document.createTextNode(xmlHttp.responseText);
   responseDiv.appendChild(responseText);
  }
 </script>
</head>
<body>
 <form action="#">
 <h2>輸入你的名字,性別,生日：</h2>
 <table>
  <tr><td>名字：</td><td><input type="text" id="txtName" /></td></tr>
  <tr><td>性別：</td><td><input type="text" id="txtSex" /></td></tr>
  <tr><td>生日：</td><td><input type="text" id="txtBirthday" /></td>
  </tr>
 </table>
 <input type="button" value="用Get方式傳參數(shù)" onclick="doRequestUsingGET();"/>
 <br /><br />
 <input type="button" value="用POST方式傳參數(shù)" onclick="doRequestUsingPOST();"/>
 </form>
 <br />
 <h3>服務(wù)器響應(yīng)內(nèi)容：</h3>
 <div id="serverResponse"></div>
</body>
</html>

下面來(lái)詳細(xì)說(shuō)明每個(gè)JS函數(shù)的功能。
createXMLHttpRequest() 用來(lái)創(chuàng)建XMLHttpRequest對(duì)象。
因?yàn)镮E把XMLHttpRequest實(shí)現(xiàn)為一個(gè)ActiveX對(duì)象，其他瀏覽器(FF/Safari/Opera)把它實(shí)現(xiàn)為一個(gè)本地JavaScript對(duì)象。由于存在這些差別，JavaScript代碼中必須包含有關(guān)的邏輯。
createQueryString() 用來(lái)整理參數(shù)，將Ajax請(qǐng)求要傳遞的參數(shù)整理成一定的格式。
如果傳遞中文或非ASCII字符必須進(jìn)行URL編碼，本例使用JS的encodeURIComponent()函數(shù)進(jìn)行參數(shù)URL編碼。
doRequestUsingGET() 以HTTP GET方式向服務(wù)器發(fā)送請(qǐng)求，并且傳遞參數(shù)。
XMLHttpRequest對(duì)象的open()方法會(huì)指定將發(fā)出的請(qǐng)求。open()方法取3個(gè)參數(shù)：一個(gè)是指示所使用的方法(通常是GET或POST)的串；一個(gè)是表示目標(biāo)資源URL的串；一個(gè)是Boolean值，只是請(qǐng)求是否是異步的。
GET請(qǐng)求時(shí)，將傳遞的參數(shù)寫(xiě)到open方法的url參數(shù)中，此時(shí)send方法的參數(shù)為null。
在某些情況下，有些瀏覽器會(huì)把多個(gè)XMLHttpRequest請(qǐng)求的結(jié)果緩存在同一個(gè)URL。如果對(duì)每個(gè)請(qǐng)求的響應(yīng)不同，這就會(huì)帶來(lái)不好的結(jié)果，把當(dāng)前時(shí)間戳追加到URL的最后，就能確保URL的惟一性，從而避免瀏覽器緩存結(jié)果。
本例服務(wù)器端代碼使用的是asp.net(c#)。
doRequestUsingPOST() 以HTTP POST方式向服務(wù)器發(fā)送請(qǐng)求，并且傳遞參數(shù)。
確保open()中指定的方法是POST，需要設(shè)定Content-Type頭信息，模擬HTTP POST方法發(fā)送一個(gè)表單，這樣服務(wù)器才會(huì)知道如何處理上傳的內(nèi)容。設(shè)置頭信息前必須先調(diào)用open方法。
必須使用send方法傳遞參數(shù)。參數(shù)的提交格式和GET方法中url的寫(xiě)法一樣。
handleStateChange() Ajax回調(diào)函數(shù)。
對(duì)于XMLHttpRequest對(duì)象，onreadystatechange屬性存儲(chǔ)了回調(diào)函數(shù)的指針。當(dāng)XMLHttpRequest對(duì)象內(nèi)部狀態(tài)發(fā)生變化時(shí)，就會(huì)調(diào)用這個(gè)回調(diào)函數(shù)。
parseResults() 處理響應(yīng)結(jié)果。