您好,登錄后才能下訂單哦!
這篇“AJAX的基本使用方法是什么”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來(lái)看看這篇“AJAX的基本使用方法是什么”文章吧。
ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下,能夠更新部分網(wǎng)頁(yè)的技術(shù)。
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
傳統(tǒng)的網(wǎng)頁(yè)(不使用 AJAX)如果需要更新內(nèi)容,必需重載整個(gè)網(wǎng)頁(yè)面。ajax 通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下,對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
function loadData() {
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
xhr.open("GET","http://127.0.0.1:3001/users",true);
xhr.send();
}
所有現(xiàn)代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內(nèi)建 XMLHttpRequest 對(duì)象。創(chuàng)建 XMLHttpRequest 對(duì)象的語(yǔ)法:let xhr = new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 對(duì)象:let xhr = new ActiveXObject("Microsoft.XMLHTTP");
所以為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器,包括 IE5 和 IE6,應(yīng)該檢查瀏覽器是否支持 XMLHttpRequest 對(duì)象。如果支持,則創(chuàng)建 XMLHttpRequest 對(duì)象。如果不支持,則創(chuàng)建 ActiveXObject :
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","http://127.0.0.1:3001/users",true);
xhr.send();
(1)open(method,url,async) 方法規(guī)定請(qǐng)求的類(lèi)型、URL 以及是否異步處理請(qǐng)求。
method:請(qǐng)求的類(lèi)型;GET 或 POST
url:要訪問(wèn)的服務(wù)器上的位置
async:true(異步)或 false(同步)
(2)send(string) 將請(qǐng)求發(fā)送到服務(wù)器
參數(shù)string:僅用于 POST 請(qǐng)求
如需獲得來(lái)自服務(wù)器的響應(yīng),請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。
responseText:獲得字符串形式的響應(yīng)數(shù)據(jù)
responseXML:獲得 XML 形式的響應(yīng)數(shù)據(jù)
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí),我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當(dāng) readyState 改變時(shí),就會(huì)觸發(fā) onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。
(1)onreadystatechange:每當(dāng) readyState 屬性改變時(shí),就會(huì)調(diào)用該函數(shù)。
(2)readyState:存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成,且響應(yīng)已就緒
(3)status
200: “OK”
404: 未找到頁(yè)面
(4)在 onreadystatechange 事件中,我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。當(dāng) readyState 等于 4 且狀態(tài)為 200 時(shí),表示響應(yīng)已就緒。
注意: onreadystatechange 事件被觸發(fā) 4 次(0 - 4), 分別是: 0-1、1-2、2-3、3-4,對(duì)應(yīng)著 readyState 的每個(gè)變化。
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
//第一個(gè)參數(shù)是請(qǐng)求路徑,第二個(gè)參數(shù)是一個(gè)函數(shù),當(dāng)拿到數(shù)據(jù)后調(diào)用該函數(shù)
function get(url,callback) {
let xhr = new XMLHttpRequest();
//當(dāng)請(qǐng)求加載成功之后要調(diào)用該函數(shù)
xhr.onload = function() {
callback(xhr.responseText);
}
xhr.open('get',url)
xhr.send();
}
get('http://localhost:3001/users',function (data) {
console.log(data);
});
我們可以把上邊那段代碼改寫(xiě)成支持Promise的形式,這樣就可以進(jìn)行鏈?zhǔn)秸{(diào)用
function get(url) {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
//使用JSON.parse()將拿到的數(shù)據(jù)轉(zhuǎn)成JS對(duì)象
resolve(JSON.parse(xhr.responseText));
}
xhr.open('get', url)
xhr.send();
})
}
鏈?zhǔn)秸{(diào)用:
let data = {};
get('http://localhost:3001/users')
.then(function (userData) {
data.user = userData;
return get('http://localhost:3001/jobs')
})
.then(function (jobsData) {
data.jobs = jobsData;
console.log(data);
})
以上就是關(guān)于“AJAX的基本使用方法是什么”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。