建站
咨詢
售后
建站咨詢
新聞中心
ajax即異步JavaScript和XML，它是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。作用是通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的通城網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
通過本篇文章，你將學(xué)會：
1. 構(gòu)造 xhr 對象
首先，我們需要構(gòu)造一個 xhr 對象。具體方法就是通過 new 來實(shí)例化一個 XMLHttpRequest 實(shí)例。
const xhr = new XMLHttpRequest();
問題來了，我們知道早期瀏覽器如 IE5、IE6 并沒有直接支持 XMLHttpRequest，如果我們直接使用 XMLHttpRequest 構(gòu)造函數(shù)，很大可能在早期瀏覽器我們會得到一個未定義的報(bào)錯。因此，我們需要通過一定兼容性的寫法來解決這個問題。
var xhr;
if (window.XMLHttpRequest) {
// 如果存在 XMLHttpRequest，就直接使用 XMLHttpRequest
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
// 如果不存在 XMLHttpRequest，但存在 ActiveXObject，則考慮 ActiveXObject 的情況
// XMLHttp 版本
var versions = [
"Msxml2.XMLHttp.5.0",
"Msxml2.XMLHttp.4.0",
"Msxml2.XMLHttp.3.0",
"Msxml2.XMLHttp",
"Microsoft.XMLHttp"
];
// 通過 for 循環(huán)嘗試生成某個 XMLHttp 版本的 ActiveXObject 實(shí)例
// try...catch.. 捕獲并消化掉 ActiveXObject 實(shí)例化失敗的錯誤
try {
for (var i = 0; i break;
}
} catch (error) {}
}
if (!xhr) {
alert("當(dāng)前環(huán)境不支持初始化Ajax對象");
}
ActiveXObject 屬于微軟的私有拓展對象，只有在 IE 上才會有支持。該對象只能用于實(shí)例化自動化對象。 在我們上面的代碼實(shí)現(xiàn)中，實(shí)例化一個 ActiveXObject 我們會傳入?yún)?shù) Msxml2.XMLHTTP 或者 Microsoft.XMLHTTP 等，該參數(shù)代表著提供對象的應(yīng)用程序的名稱。
其中，Msxml2.XMLHttp.5.0、Msxml2.XMLHttp.4.0、Msxml2.XMLHttp.3.0、Msxml2.XMLHttp 和 Microsoft.XMLHttp分別代表著 XMLHttp 的高低版本。我們通過 for 循環(huán)，在采用正常有效版本的時候跳出循環(huán)。同時，使用 try…catch… 來捕獲消化不支持情況下的報(bào)錯。
當(dāng)然，我們也可以包裝我們的 xhr 對象，比如，我們可以通過執(zhí)行匿名函數(shù)：
var xhr = (function() {
var hr; // 定義一個局部 xhr 對象， 這里命名 hr
if (window.XMLHttpRequest) {
hr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
var versions = [
"Msxml2.XMLHttp.5.0",
"Msxml2.XMLHttp.4.0",
"Msxml2.XMLHttp.3.0",
"Msxml2.XMLHttp",
"Microsoft.XMLHttp"
];
try {
for (var i = 0; i break;
}
} catch (error) {}
}
return hr; // 返回我們最后的 xhr 對象，如果宿主環(huán)境不提供 XMLHttpRequest 及 ActiveXObject， 返回 undefined
})();
2. 發(fā)送一個請求
構(gòu)建了 xhr 對象之后，我們可以通過方法的調(diào)用來進(jìn)行請求的發(fā)送。
xhr.open('GET', 'http://www.example.com');
xhr.send();
這是最簡單最典型的發(fā)送請求的做法。只需要短短 2 行代碼，我們就可以執(zhí)行一個請求發(fā)送動作。
實(shí)際上 XMLHttpRequest.open 這個方法的參數(shù)不止兩個這么少，一共有 5 個參數(shù)：
xhrReq.open(method, url, async, user, password);
這些參數(shù)分別代表著：
method: 代表HTTP請求的方法名，比如 GET、POST、 PUT 和 DELETE。
url: 一個DomString，代表著要想向其發(fā)送請求的 url。
async: 表示是否異步。
user：用戶名，用于認(rèn)證用途。
password：密碼，用于認(rèn)證用途。
其中，user 和 password 都是用于認(rèn)證用途。而前 3 個參數(shù)是我們經(jīng)常都會使用到的。這里著重說的是參數(shù) async。默認(rèn)情況下，async 為 true，代表著請求將是異步的。當(dāng)然我們也可以設(shè)置為 false，這樣我們就可以同步請求了。然而，事實(shí)上我們應(yīng)該盡量不這么做，因?yàn)橥降恼埱髸枞覀兊腢I和一切用戶活動，造成的體驗(yàn)非常不好。
到目前為止，如果你也跟著做的話應(yīng)該能看到已經(jīng)可以發(fā)送一個 Ajax 請求了，雖然它是失敗的，因?yàn)槟悴]有正確的服務(wù)能夠處理這個請求。如果你在瀏覽器上運(yùn)行，打開控制臺，你應(yīng)該會得到這樣的一個效果：
3. GET 請求
在數(shù)據(jù)交互中，我們經(jīng)常會使用 GET 請求來查詢數(shù)據(jù)，現(xiàn)在假設(shè)我們有一個簡單的GET請求，查詢接口 http://localhost:8080/simple/get，附帶 query參數(shù) 為 mk=慕課網(wǎng)，那么我們可以構(gòu)建代碼塊：
xhr.open("GET", "http://localhost:8080/simple/get?mk=慕課網(wǎng)");
xhr.send();
查看效果圖：
從上圖可以看到，瀏覽器控制臺面板上顯示，我們進(jìn)行 GET 發(fā)送請求的過程中，在 Headers 上，可以看到 Query String Parameters 附帶的信息完全正確，我們的 GET 請求構(gòu)造成功。
4. POST 請求
事實(shí)上我們除了要查詢數(shù)據(jù)，提交數(shù)據(jù)也是非常重要。在 Ajax 中，我們通常使用 POST 方法來進(jìn)行數(shù)據(jù)創(chuàng)建工作。
4.1 POST 發(fā)送請求
話不多說，上代碼：
xhr.open("POST", "http://localhost:8080/simple/post");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("mk=慕課網(wǎng)&class=ajax");
查看效果圖： 基本和上面 GET 請求類似，這里我們構(gòu)造了一個 POST 請求，請求的 url 為 http://localhost:8080/simple/post，發(fā)送請求的參數(shù)有兩個，分別為 mk=慕課網(wǎng) 和。從瀏覽器的控制臺面板上可以看到，在 Headers 上，F(xiàn)orm Data 部分正是我們要發(fā)送的數(shù)據(jù)，數(shù)據(jù)發(fā)送正常。這里兩個地方需要注意：
send 方法接受可選參數(shù)作為請求主體，即發(fā)送到服務(wù)器的內(nèi)容。 Content-type 需要設(shè)置為請求主體類型， 這是因?yàn)槿绻辉O(shè)置的話會采取默認(rèn)值，在很多時候服務(wù)端可能無法解析參數(shù)。
XMLHttpRequest.setRequestHeader() 是請求HTTP 請求頭部的方法，因此設(shè)置 Content-type 自然也是通過調(diào)用這個方法來實(shí)現(xiàn)。該方法需要在 open() 和 send() 之間使用。
5. 小結(jié)
Ajax 主要通過 XMLHttpRequest 來發(fā)送請求，必要的時候?yàn)榱思嫒莸桶姹?IE 瀏覽器， 我們可以啟用 ActiveXObject。
XMLHttpRequest 提供 open 方法，我們可以借助它來實(shí)現(xiàn) GET、POST、PUT、DELETE 等請求。 Ajax 在向服務(wù)端發(fā)送數(shù)據(jù)時，比如 POST 、PUT ， 需要通過 XMLHttpRequest.setRequestHeader() 設(shè)置 Content-type 的類型，服務(wù)端根據(jù)指定 Content-type進(jìn)行請求主體的解析。
分享名稱：通過Ajax發(fā)送請求
網(wǎng)頁鏈接：http://fisionsoft.com.cn/article/djgcjed.html
