這篇文章主要為大家展示了“Ajax和$.ajax怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Ajax和$.ajax怎么用”這篇文章吧。
實例一（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;
};以上是“Ajax和$.ajax怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
