快捷導(dǎo)航

Ajax和$.ajax使用實例詳解(推薦)

更新時間：2017年02月05日 11:33:02 作者：my98800

本文通過三個實例給大家講解了Ajax和$.ajax使用實例詳解，非常不錯，具有參考借鑒價值，需要的朋友參考下

實例一（Ajax請求基本創(chuàng)建格式）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Ajax練習（GET，不考慮瀏覽器兼容性）</title>
 <script type="text/JavaScript">
  function doRequest() {
   //不考慮瀏覽器兼容性問題
   var xmlHttp = new XMLHttpRequest();
   //打開一個與Http服務(wù)器的連接
   xmlHttp.open("GET", "Default.aspx", true);
   //與服務(wù)器端交互
   xmlHttp.send(null);
   //監(jiān)聽服務(wù)器端響應(yīng)狀態(tài)的改變事件
   xmlHttp.onreadystatechange = function () {
    //客戶端與服務(wù)器端交互完成
    if (xmlHttp.readyState == 4) {
     //服務(wù)器端返回Http狀態(tài)碼：200表示請求成功,404未找到,403錯誤
     if (xmlHttp.status == 200) {
      //獲得服務(wù)器端資源
      var result = xmlHttp.responseText;
      alert(result);
     }
    }
   }
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
  <input type="button" id="btn" value="異步請求" onclick="doRequest()" />
 </div>
 </form>
</body>
</html>

<head runat="server">
 <title>AjaxDemo實例</title>
 <script src="JS/jQuery-1.4.1-vsdoc.js" type="text/javascript"></script>
 <script type="text/javascript">
  //使用Ajax讀取瀏覽器的工作內(nèi)容 
  function readRequest() {
   //不考慮瀏覽器的兼容性問題
   var xmlhttp = new XMLHttpRequest();
   //打開一個與服務(wù)器相關(guān)的鏈接
   //發(fā)送請求
   //請求的方式（獲取/發(fā)送），請求頁面，是否異步
   xmlhttp.open("GET", "AjaxDemo.aspx", true);
   //發(fā)送數(shù)據(jù)
   xmlhttp.send(null);
   //接受服務(wù)器返回結(jié)果
   xmlhttp.onreadystatechange = function() {
    //請求完成
    if (xmlhttp.readyState == 4) {
     //鏈接成功
     if (xmlhttp.status == 200) {
      //輸出瀏覽器的內(nèi)容
      var result = xmlhttp.responseText;
      alert(result);
      window.alert("讀取瀏覽器的內(nèi)容成功！");
     }
    }
   };
  };
  function btn_Click() {
   var http = new ActiveXObject("Microsoft.XMLHTTP");
   //或者使用這一句創(chuàng)建 var xmlhttp = new XMLHttpRequest();
   if (!http) {
    alert("創(chuàng)建xmlhttp對象異常！");
    return false;
   }
   http.open("POST", "AjaxDemo.ashx", false);
   http.onreadystatechange = function() {
    if (http.readyState == 4) {
     //鏈接成功
     if (http.status == 200) {
      alert(http.responseText);
      document.getElementById("Text1").value = http.responseText;
     } else {
      window.alert("Ajax服務(wù)器返回錯誤！");
     }
    }
   };
   http.send();
  };
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <input id="Button1" type="button" value="使用Ajax讀取瀏覽器的內(nèi)容" onclick="readRequest()" />
 <br/>
  <input id="Text1" type="text" />&nbsp;&nbsp;
  <input id="Button2" type="button" value="獲取當前時間" onclick="btn_Click()"/>
 </div>
 </form>
</body>

實例二（見附件）

考慮瀏覽器兼容性Ajax請求處理，獲取后臺xml文件內(nèi)容。

實例三（見附件）

使用$.Ajax獲取后臺讀取xml文件內(nèi)容信息。

function readXML1() {
   //創(chuàng)建XML對象
   var xmldom = new ActiveXObject("Microsoft.XMLDOM");
   //設(shè)置為異步
   xmldom.async = "false";
   //加載需要讀取的XML文檔
   xmldom.load("XML1.xml");
   info = "";
   //需要讀取的根節(jié)點
   var node = xmldom.selectNodes("student");
   //依次讀取其中的內(nèi)容
   info = node[0].childNodes[0].nodeTypedValue + " <br/>" + node[0].childNodes[1].nodeTypedValue+ "<br/>" + node[0].childNodes[2].nodeTypedValue;
   document.getElementById("xmlmsg").innerHTML = info;
  };

 function readXML2() {
   //實例化xml對象
   var xml = new ActiveXObject("Microsoft.XMLDOM");
   //異步設(shè)置
   xml.async = "false";
   //加載需要讀取的XML文檔
   xml.load("XML2.xml");
   info = "";
   //選擇需要讀取的對象名稱
   var fnode = xml.documentElement.selectNodes("people");
   //循環(huán)輸出文檔的內(nèi)容
   for (var i = 0; i < fnode.length; i++) {
    for (var j = 0; j < fnode[i].childNodes.length; j++) {
     info += fnode[i].childNodes[j].text + "<br/>";
    }
   }
   document.getElementById("xmlmsg").innerHTML = info;
  };

好了，以上所述是小編給大家介紹的Ajax和$.ajax使用實例詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: