備忘 原生js進行簡單的ajax手動封裝

2021-10-08 22:03:41 字數 1045 閱讀 8090

function

ajax

(payload)

* */

// 建立xhr物件

;// 通過open方法配置請求資訊,

// 第乙個引數是請求方式,第二個引數是請求的url,第三個引數是請求是否非同步(true非同步)

xhr.

open

(payload.url, payload.method,

true);

// 傳送請求

xhr.

send()

;/**

* 乙個最基本的 ajax 請求就是上面三步

但是光有上面的三個步驟,我們確實能把請求傳送的到服務端

如果服務端正常的話,響應也能回到客戶端

但是我們拿不到響應

如果想拿到響應,我們有兩個前提條件

本次 http 請求是成功的,也就是我們之前說的 http 狀態碼為 200 ~ 299

ajax 物件也有自己的狀態碼,用來表示本次 ajax 請求中各個階段

readystate === 0: 表示未初始化完成,也就是 open 方法還沒有執行

readystate === 1: 表示配置資訊已經完成,也就是執行完 open 之後

readystate === 2: 表示 send 方法已經執行完成

readystate === 3: 表示正在解析響應內容

readystate === 4: 表示響應內容已經解析完畢,可以在客戶端使用了

* */

// 如果是用 ajax 物件傳送 post 請求,必須要先設定一下請求頭中的 content-type

// 告訴一下服務端我給你的是乙個什麼樣子的資料格式

xhr.

setrequestheader

('content-type',)

xhr.

onreadystatechange

(function()

})}

原生js實現Ajax

一般來說,大家可能都會習慣用jquery提供的ajax方法,但是用原生的js怎麼去實現ajax方法呢?jquery提供的ajax方法 ajax success function error function 原生js實現ajax方法 var ajax obj.send post function u...

原生js實現Ajax

ajax success function error function 原生js實現ajax方法 var ajax xhr.send datat應為 a a1 b b1 這種字串格式,在jq裡如果data為物件會自動將物件轉成這種字串格式 post function url,data,fn xhr...

原生JS操作AJAX

1,get方式的ajax 1 function sendajaxreq 219 20 4,傳送請求,如果是在火狐下,使用get方式傳送ajax請求,send的時候括號寫上null 21 req.send null 22 2,post方式ajax 1 使用post傳參,需要攜帶乙個請求頭模擬表單提交 ...