這篇文章帶給大家的內容是關於ajax請求過程以及請求方法的講解(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
ajax 的全名是Asynchronous JavaScript and XML,其中,Asynchronous 是異步的意思,它有別於傳統web開發中採用的同步的方式。據小編翻牆了解到,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**:伺服器執行一個完全有效請求失敗$.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
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中文網其他相關文章!