Ajax與$.ajax的使用方法
這次帶給大家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">
<p>
<input type="button" id="btn" value="异步请求" onclick="doRequest()" />
</p>
</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">
<p>
<input id="Button1" type="button" value="使用Ajax读取浏览器的内容" onclick="readRequest()" />
<br/>
<input id="Text1" type="text" />
<input id="Button2" type="button" value="获取当前时间" onclick="btn_Click()"/>
</p>
</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;
};相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Ajax與$.ajax的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
DirectX修復工具怎麼用？ DirectX修復工具詳細使用方法
Mar 15, 2024 am 08:31 AM
DirectX修復工具是專業的系統工具，主要功能是偵測目前系統的DirectX狀態，如果發現異常就可以直接修復。可能還有很多用戶不清楚DirectX修復工具怎麼用吧，以下就來看看詳細教學。 1、使用修復工具軟體進行修復檢測。 2、如果修復完成後提示C++元件有異常的問題，請點選取消按鈕，然後點選工具選單列。 3、點選選項按鈕，選擇擴展，點選開始擴展按鈕。 4、擴展完成後再重新進行檢測修復即可。 5、如果修復工具操作完成後仍未解決問題，可以嘗試卸載重新安裝報錯的程序。
HTTP 525狀態碼介紹：探究其定義與應用
Feb 18, 2024 pm 10:12 PM
HTTP525狀態碼簡介：了解其定義與使用方法HTTP（HypertextTransferProtocol）525狀態碼是指伺服器在SSL握手過程中發生錯誤，導致無法建立安全連線。在傳輸層安全性（TLS）握手期間發生錯誤時，伺服器將傳回此狀態碼。此狀態碼屬於伺服器錯誤類別，通常表示伺服器配置或設定問題。當客戶端嘗試透過HTTPS連接到伺服器時，伺服器無
解決jQuery AJAX請求遇到403錯誤的方法
Feb 20, 2024 am 10:07 AM
標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資
百度網盤怎麼用-百度網盤的使用方法
Mar 04, 2024 pm 09:28 PM
有很多朋友還不知道百度網盤怎麼用，所以下面小編就講解了百度網盤的使用方法，有需要的小伙伴趕緊來看一下吧，相信對大家一定會有所幫助哦。第一步：安裝好百度網盤後直接登入(如圖);第二步：接著可依頁面提示選擇「我的分享」與「傳輸清單」(如圖);第三步：在「好友分享」裡可以把圖片和檔案直接分享給好友(如圖所示);第四步：接著選擇「分享」後可勾選電腦檔案或是網盤檔案(如圖所示);第五步：然後就可以尋找好友(如圖所示);第六步：還可以在「功能寶箱」中尋找自己需要的功能(如圖所示)。上面就是小編為大
PHP 與 Ajax：建立一個自動完成建議引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。
快速學會複製和貼上操作
Feb 18, 2024 pm 03:25 PM
複製貼上快捷鍵使用方法複製貼上是我們在日常使用電腦時經常會遇到的操作。為了提高工作效率，熟練複製貼上快捷鍵是非常重要的。本文將介紹一些常用的複製貼上快捷鍵使用方法，幫助讀者更方便地進行複製貼上操作。複製快速鍵：Ctrl+CCtrl+C是複製的快速鍵，按住Ctrl鍵然後再按C鍵，即可將選取的文字、檔案、圖片等內容複製到剪貼簿。要使用該快捷鍵，
KMS啟動工具是什麼？ KMS啟動工具怎麼用？ KMS啟動工具使用方法？
Mar 18, 2024 am 11:07 AM
KMS啟動工具是一種用來啟動微軟Windows和Office產品的軟體工具。 KMS是KeyManagementService的縮寫，即金鑰管理服務。 KMS啟動工具透過模擬KMS伺服器的功能，使得電腦可以連接到這個虛擬的KMS伺服器，從而實現對Windows和Office產品的啟動。 KMS激活工具體積小巧，功能強大，可以一鍵永久激活，無需聯網狀態就可以激活任何版本的window系統和任何版本的Office軟體，是目前最成功的且經常更新的Windows激活工具，今天小編就跟大家介紹一下kms激活工
解決jQuery AJAX請求403錯誤的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤
