您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)有哪些原生js實(shí)現(xiàn)Ajax方法,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
一般來(lái)說(shuō),大家可能都會(huì)習(xí)慣用JQuery提供的Ajax方法,但是用原生的js怎么去實(shí)現(xiàn)Ajax方法呢?
JQuery提供的Ajax方法:
$.ajax({ url: , type: '', dataType: '', data: { }, success: function(){ }, error: function(){ } })
var Ajax={ get: function(url, fn) { // XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù) var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { // readyState == 4說(shuō)明請(qǐng)求已完成 if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // 從服務(wù)器獲得數(shù)據(jù) fn.call(this, xhr.responseText); } }; xhr.send(); }, // datat應(yīng)為'a=a1&b=b1'這種字符串格式,在jq里如果data為對(duì)象會(huì)自動(dòng)將對(duì)象轉(zhuǎn)成這種字符串格式 post: function (url, data, fn) { var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); // 添加http頭,發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類(lèi)型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call(this, xhr.responseText); } }; xhr.send(data); } }
1. open(method, url, async) 方法需要三個(gè)參數(shù):
method:發(fā)送請(qǐng)求所使用的方法(GET或POST);與POST相比,GET更簡(jiǎn)單也更快,并且在大部分情況下都能用;然而,在以下情況中,請(qǐng)使用POST請(qǐng)求:
無(wú)法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫(kù))
向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒(méi)有數(shù)據(jù)量限制)
發(fā)送包含未知字符的用戶輸入時(shí),POST 比 GET 更穩(wěn)定也更可靠
url:規(guī)定服務(wù)器端腳本的 URL(該文件可以是任何類(lèi)型的文件,比如 .txt 和 .xml,或者服務(wù)器腳本文件,比如 .asp 和 .php (在傳回響應(yīng)之前,能夠在服務(wù)器上執(zhí)行任務(wù)));
async:規(guī)定應(yīng)當(dāng)對(duì)請(qǐng)求進(jìn)行異步(true)或同步(false)處理;true是在等待服務(wù)器響應(yīng)時(shí)執(zhí)行其他腳本,當(dāng)響應(yīng)就緒后對(duì)響應(yīng)進(jìn)行處理;false是等待服務(wù)器響應(yīng)再執(zhí)行。
2. send() 方法可將請(qǐng)求送往服務(wù)器。
3. onreadystatechange:存有處理服務(wù)器響應(yīng)的函數(shù),每當(dāng) readyState 改變時(shí),onreadystatechange 函數(shù)就會(huì)被執(zhí)行。
4. readyState:存有服務(wù)器響應(yīng)的狀態(tài)信息。
0: 請(qǐng)求未初始化(代理被創(chuàng)建,但尚未調(diào)用 open() 方法)
1: 服務(wù)器連接已建立(open
方法已經(jīng)被調(diào)用)
2: 請(qǐng)求已接收(send
方法已經(jīng)被調(diào)用,并且頭部和狀態(tài)已經(jīng)可獲得)
3: 請(qǐng)求處理中(下載中,responseText
屬性已經(jīng)包含部分?jǐn)?shù)據(jù))
4: 請(qǐng)求已完成,且響應(yīng)已就緒(下載操作已完成)
5. responseText:獲得字符串形式的響應(yīng)數(shù)據(jù)。
6. setRequestHeader():POST傳數(shù)據(jù)時(shí),用來(lái)添加 HTTP 頭,然后send(data),注意data格式;GET發(fā)送信息時(shí)直接加參數(shù)到url上就可以,比如url?a=a1&b=b1。
PS:Fetch polyfill 的基本原理是探測(cè)是否存在window.fetch方法,如果沒(méi)有則用 XHR 實(shí)現(xiàn)
看完上述內(nèi)容,你們對(duì)有哪些原生js實(shí)現(xiàn)Ajax方法有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(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)容。