這篇文章將為大家詳細(xì)講解有關(guān)ajax請(qǐng)求過(guò)程以及請(qǐng)求方法的案例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)成立十多年來(lái)，這條路我們正越走越好，積累了技術(shù)與客戶資源，形成了良好的口碑。為客戶提供做網(wǎng)站、成都做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、域名申請(qǐng)、網(wǎng)絡(luò)營(yíng)銷(xiāo)、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。網(wǎng)站是否美觀、功能強(qiáng)大、用戶體驗(yàn)好、性價(jià)比高、打開(kāi)快等等，這些對(duì)于網(wǎng)站建設(shè)都非常重要，成都創(chuàng)新互聯(lián)通過(guò)對(duì)建站技術(shù)性的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

ajax 的全稱是Asynchronous JavaScript and XML，其中，Asynchronous 是異步的意思，它有別于傳統(tǒng)web開(kāi)發(fā)中采用的同步的方式。據(jù)小編翻墻了解到，ajax很早就有了，只不過(guò)那時(shí)候都不用它，后來(lái)谷歌把它用在谷歌地圖上，人們感覺(jué)使用起來(lái)很方便，而且頁(yè)面不用刷新，用戶體驗(yàn)非常好(那時(shí)候的網(wǎng)站也沒(méi)有什么用戶體驗(yàn)^_^)

ajax 原理

XMLHttpRequest是ajax的核心機(jī)制，它是在IE5中首先引入的，是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說(shuō)，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)，而不阻塞用戶，達(dá)到頁(yè)面無(wú)刷新的效果

var xhr = new XMLHttpRequest()
//IE瀏覽器使用var xhr = new ActiveXObject
xhr.open('get', url, true)
xhr.send(null)
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            success(xhr.responseText)
        } else {
            fail && fail(xhr.status)
        }
    }
}

xhr.open()

第三個(gè)參數(shù)：true/fasle 默認(rèn)值為true
false就是等待有返回?cái)?shù)據(jù)的時(shí)候再繼續(xù)往下走，還沒(méi)有得到數(shù)據(jù)的時(shí)候就會(huì)卡在那里，直到獲取數(shù)據(jù)為止。
true就是不等待,直接返回，這就是所謂的異步獲取數(shù)據(jù)！

xhr.send

需要傳送的數(shù)據(jù)，接受一個(gè)字符串類(lèi)型

xhr.onreadystatechange

每次狀態(tài)改變所都會(huì)觸發(fā)的事件處理程序

xhr.readyState有以下幾種狀態(tài)

0 請(qǐng)求未初始化，open方法尚未調(diào)用

1 服務(wù)器連接已建立，open方法已經(jīng)調(diào)用，尚未調(diào)用send方法

2 請(qǐng)求已接收，也就是接收到頭信息了

3 請(qǐng)求處理中，也就是接收到響應(yīng)主體了，這時(shí)因?yàn)轫憫?yīng)及http頭不全，這時(shí)通過(guò)responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤

4 請(qǐng)求已完成，數(shù)據(jù)接收完畢,此時(shí)可以通過(guò)通過(guò)responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)

xhr.status常見(jiàn)HTTP狀態(tài)

0**：未被始化

1**：請(qǐng)求收到，繼續(xù)處理

2**：操作成功收到，分析、接受

3**：完成此請(qǐng)求必須進(jìn)一步處理

4**：請(qǐng)求包含一個(gè)錯(cuò)誤語(yǔ)法或不能完成

5**：服務(wù)器執(zhí)行一個(gè)完全有效請(qǐng)求失敗

jQuery.ajax

$.ajax({
    url: '',
    Type: '',
    data: '',
    async:true,
    dataType: '',
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Access-Toke");
    },
    success: function (data) {
        fn1()
    },
    error: function (err) {
       error && error(err) 
    }
})
fn2()

success-函數(shù)

$.ajax中的success方法是否獲取成功的回調(diào)，jQuery判斷了以下幾種狀態(tài)，在源碼中有以下代碼(大概位置8193行)

isSuccess = status >= 200 && status < 300 || status === 304

304---通常的說(shuō)法就是瀏覽器還有緩存，服務(wù)器告訴客戶，原來(lái)緩存的文檔還可以繼續(xù)使用

async-布爾值

async默認(rèn)的設(shè)置值為true，這種情況為異步方式，就是說(shuō)當(dāng)ajax發(fā)送請(qǐng)求后，在等待server端返回的這個(gè)過(guò)程中，前臺(tái)會(huì)繼續(xù) 執(zhí)行ajax塊后面的腳本，直到server端返回正確的結(jié)果才會(huì)去執(zhí)行success，也就是說(shuō)這時(shí)候執(zhí)行的是兩個(gè)線程，ajax塊發(fā)出請(qǐng)求后一個(gè)線程 和ajax塊后面的腳本（另一個(gè)線程）

asyn設(shè)為false時(shí)，這時(shí)ajax的請(qǐng)求時(shí)同步的，也就是說(shuō)，這個(gè)時(shí)候ajax塊發(fā)出請(qǐng)求后，他會(huì)等待在fn1（）這個(gè)地方，不會(huì)去執(zhí)行fn2()，知道fn1()部分執(zhí)行完畢。

dataType--字符串

dataType可以指定以下值

xml：返回XML文檔，可用JQuery處理

html：返回純文本HTML信息；包含的script標(biāo)簽會(huì)在插入DOM時(shí)執(zhí)行

script：返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請(qǐng)求時(shí)（不在同一個(gè)域下），所有post請(qǐng)求都將轉(zhuǎn)為get請(qǐng)求

json：返回JSON數(shù)據(jù)

jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時(shí)，例如myurl?callback=?，JQuery將自動(dòng)替換后一個(gè)“?”為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)

text：返回純文本字符串

beforeSend--函數(shù)

送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請(qǐng)求。XMLHttpRequest對(duì)象是惟一的參數(shù)

ajax優(yōu)缺點(diǎn)

優(yōu)點(diǎn) : 通過(guò)異步，提升用戶的體驗(yàn)，減少不必要的數(shù)據(jù)往返，實(shí)現(xiàn)局部刷新

缺點(diǎn) : 對(duì)搜索引擎支持比較弱

關(guān)于ajax請(qǐng)求過(guò)程以及請(qǐng)求方法的案例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：ajax請(qǐng)求過(guò)程以及請(qǐng)求方法的案例分析-創(chuàng)新互聯(lián)
文章鏈接：http://jinyejixie.com/article46/dpdheg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、App設(shè)計(jì)、ChatGPT、定制開(kāi)發(fā)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)