ajax請求過程以及請求方法的講解（程式碼範例）

這篇文章帶給大家的內容是關於ajax請求過程以及請求方法的講解（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

ajax 的全名是Asynchronous JavaScript and XML，其中，Asynchronous 是異步的意思，它有別於傳統web開發中採用的同步的方式。據小編翻牆了解到，ajax很早就有了，只不過那時候都不用它，後來谷歌把它用在谷歌地圖上，人們感覺使用起來很方便，而且頁面不用刷新，用戶體驗非常好(那時候的網站也沒有什麼使用者體驗^_^)

ajax 原理

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理回應，而不阻塞用戶，達到頁面無刷新的效果

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()

第三個參數：true/fasle 預設值為true
false就是等待有回傳資料的時候再繼續往下走，還沒得到資料的時候就會卡在那裡，直到取得資料為止。
true就是不等待,直接返回，這就是所謂的非同步獲取資料！

xhr.send

需要傳送的數據，接受一個字串類型

xhr.onreadystatechange

每次狀態改變所都會觸發的事件處理程序

xhr.readyState有以下幾種狀態

0 請求未初始化，open方法尚未呼叫

1 伺服器連線已建立，open方法已經調用，尚未調用send方法

2 請求已接收，也就是接收到頭資訊了

3 請求處理中，也就是接收到回應主體了，這時因為回應及http頭不全，這時透過responseBody和responseText取得部分資料會出現錯誤

4 請求已完成，資料接收完畢,此時可以透過responseXml和responseText取得完整的回應資料

xhr.status常見HTTP狀態

0**：未始化

##1**：請求收到，繼續處理

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

3**：完成此請求必須進一步處理

4**：請求包含一個錯誤語法或不能完成

5**：伺服器執行一個完全有效請求失敗

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-函數

$.ajax中的success方法是否取得成功的回調，jQuery判斷了以下幾種狀態，在原始碼中有以下程式碼(大概位置8193行)

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

304- --通常的說法就是瀏覽器還有緩存，伺服器告訴客戶，原來快取的文件還可以繼續使用

async-布林值##async預設的設置值為true，這種情況為非同步方式，就是說當ajax發送請求後，在等待server端回傳的這個過程中，前台會繼續執行ajax區塊後面的腳本，直到server端回傳正確的結果才會去執行success，也就是說這時候執行的是兩個線程，ajax塊發出請求後一個線程和ajax塊後面的腳本（另一個線程）

asyn設為false時，這時ajax的請求時同步的，也就是說，這個時候ajax區塊發出請求後，他會等待在fn1（）這個地方，不會去執行fn2()，知道fn1()部分執行完畢。

dataType--字串

dataType可以指定以下值

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

html ：傳回純文字HTML資訊；包含的script標籤會在插入DOM時執行

script：傳回純文字JavaScript程式碼。不會自動快取結果。除非設定了cache參數。注意在遠端請求時（不在同一個網域下），所有post請求都會轉為get請求

json：傳回JSON資料

jsonp：JSONP格式。使用SONP形式呼叫函數時，例如myurl?callback=?，JQuery將自動替換後一個“?”為正確的函數名，以執行回調函數

text：傳回純文字字串

#beforeSend--函數

送請求前可以修改XMLHttpRequest物件的函數，例如新增自訂HTTP頭。在beforeSend中如果回傳false可以取消本次ajax請求。 XMLHttpRequest物件是惟一的參數

ajax優缺點

優點: 透過非同步，提升使用者的體驗，減少不必要的資料往返，實現局部刷新

缺點: 對搜尋引擎支援比較弱

#

以上是ajax請求過程以及請求方法的講解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！