原生ajax和jQuery中的ajax使用

2021-08-28 04:48:15 字數 2499 閱讀 6089

ajax是一種能夠向伺服器請求額外的資料而不需重新整理頁面,會帶來更好的使用者體驗。

ajax技術的核心是xmlhttprequest物件。ie7及現在瀏覽器中,使用原生xhr建立:

ajax請求有兩種,同步請求和非同步請求,在open()中第三個引數設定是否非同步(true代表該次請求非同步,false代表同步)同步請求時,**必須等待請求響應返回才能繼續執行下面的**

if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)else實際我們常用的是非同步請求,這時我們通過檢查xhr物件的readystate屬性,該屬性表示請求/響應過程的當前活動階段

0: 還沒有呼叫open()方法

1:呼叫open()方法,但沒有呼叫send()

2:呼叫send()方法,沒有收到響應

3:已經收到部分響應

4:收到全部響應資料,可以在瀏覽器端使用

通過onreadystatechange事件來監聽變化,我們主要監聽變化到4這個階段

xhr.send(null);注意,監聽事件要寫在open()之前

ajax請求有兩種,get和post

get請求屬於查詢請求,格式是在url末尾新增名=值&名=值,且名稱和值都必須經過encodeuricomponent()編碼

xhr.send(null);使用get方式發給example.php乙個請求,帶上了name = tom。由於一般伺服器會對url的長度做限制,減少處理url的壓力,所以對get請求傳送的資料會有大小限制

post請求屬於傳送請求,請求的主體是資料,所以可以傳送很多資料,且格式不限。

post請求最初是為了處理xml dom文件,也可以傳送字串

貼乙個post請求模擬web表單提交

}jquery中ajax

jquery中對ajax操作進行了封裝,$.ajax()方法屬於最底層的方法,接收乙個物件引數  $.ajax()

$.ajax(

// 返回失敗時呼叫,引數xhr是xmlhttprequest物件 textstatus描述狀態的字串

error: function(xhr,textstatus)

})

另外,jquery提供了表單序列化的介面:serialize(),表單物件呼叫該介面會返回一串字串,也就是封裝了上面原生js寫的serialize()方法。

原生Ajax與jQuery中的ajax操作

一.基本實現 1.建立xmlhttprequest物件 現代瀏覽器基本都內建了xmlhttprequest物件,若要相容低版本瀏覽器 ie5,ie6等 則需要對其做相容處理 2.建立狀態監聽處理function readystatechangehandle ajax響應狀態碼 具體參考ajax請求時...

原生Ajax與jQuery的Ajax和偽Ajax

用原生的ajax傳送請求var xhr new xmlhttprequest xhr.open 請求方式 post get 請求url true xhr.onreadystatechange function xhr.send 傳送的資料 用jquery的ajax傳送請求 ajax 用偽ajax如果...

原生JS和JQuery的ajax請求

一 原生js 1 get方法 得到xmlhttprequest 開啟與伺服器的連線 var url xhr.open get url,ture 同步為false,非同步為true 傳送請求,get 請求傳送為空 xhr.send null 接收伺服器的響應 xhr.onreadystatechang...