實例一（Ajax請求基本創建格式）：
<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服務器的連接 xmlHttp.open("GET", "Default.aspx", true); //與服務器端交互 xmlHttp.send(null); //監聽服務器端響應狀態的改變事件 xmlHttp.onreadystatechange = function () { //客戶端與服務器端交互完成 if (xmlHttp.readyState == 4) { //服務器端返回Http狀態碼：200表示請求成功,404未找到,403錯誤 if (xmlHttp.status == 200) { //獲得服務器端資源 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讀取瀏覽器的工作內容 function readRequest() { //不考慮瀏覽器的兼容性問題 var xmlhttp = new XMLHttpRequest(); //打開一個與服務器相關的鏈接 //發送請求 //請求的方式（獲取/發送），請求頁面，是否異步 xmlhttp.open("GET", "AjaxDemo.aspx", true); //發送數據 xmlhttp.send(null); //接受服務器返回結果 xmlhttp.onreadystatechange = function() { //請求完成 if (xmlhttp.readyState == 4) { //鏈接成功 if (xmlhttp.status == 200) { //輸出瀏覽器的內容 var result = xmlhttp.responseText; alert(result); window.alert("讀取瀏覽器的內容成功！"); } } }; }; function btn_Click() { var http = new ActiveXObject("Microsoft.XMLHTTP"); //或者使用這一句創建 var xmlhttp = new XMLHttpRequest(); if (!http) { alert("創建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服務器返回錯誤！"); } } }; http.send(); }; </script></head><body> <form id="form1" runat="server"> <div> <input id="Button1" type="button" value="使用Ajax讀取瀏覽器的內容" onclick="readRequest()" /> <br/> <input id="Text1" type="text" /> <input id="Button2" type="button" value="獲取當前時間" onclick="btn_Click()"/> </div> </form></body>
實例二（見附件）
考慮瀏覽器兼容性Ajax請求處理，獲取后臺xml文件內容。
實例三（見附件）
使用$.Ajax獲取后臺讀取xml文件內容信息。
function readXML1() { //創建XML對象 var xmldom = new ActiveXObject("Microsoft.XMLDOM"); //設置為異步 xmldom.async = "false"; //加載需要讀取的XML文檔 xmldom.load("XML1.xml"); info = ""; //需要讀取的根節點 var node = xmldom.selectNodes("student"); //依次讀取其中的內容 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"); //異步設置 xml.async = "false"; //加載需要讀取的XML文檔 xml.load("XML2.xml"); info = ""; //選擇需要讀取的對象名稱 var fnode = xml.documentElement.selectNodes("people"); //循環輸出文檔的內容 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; };
新聞熱點
疑難解答
