原生ajax的封裝寫法以及總結

2021-10-05 03:51:33 字數 2418 閱讀 9813

1.原生 ajax  get  請求

2.原生 ajax post 請求

3.封裝 ajax 請求

步驟:

1、建立xhr

2、監聽xhr.onreadystatechange事件 ajax狀態發生變化的事件

3、判斷ajax請求的狀態

4、設定請求方式和url

5、傳送請求

//使用xhr物件傳送get方式請求

// 建立xhr

;// 監聽xhr.onreadystatechange事件 ajax狀態發生變化的事件

xhr.

onreadystatechange

=function()

}// 呼叫xhr.open()函式 設定請求方式和url

// 查詢字串的寫法 key=value&key=value.... 字串和介面之間用?隔開

xhr.

open

('get'

,'介面文件url位址'

)// 呼叫xhr.send()函式 傳送請求

xhr.

send()

<

/script>

步驟:

1、建立xhr

2、監聽xhr.onreadystatechange事件 ajax狀態發生變化的事件

3、判斷ajax請求的狀態

4、設定請求方式和url

5、告訴伺服器請求頭(前端提交的是什麼型別資料)

6、傳送請求

// 建立xhr物件

;// 註冊事件

xhr.

onreadystatechange

=function()

}// 呼叫open 設定請求方式和url

xhr.

open

('post'

,'介面文件url位址');

// 請求頭 必須寫在open和send之間

// 告訴伺服器 前端提交資料是什麼型別 表示查詢字串型別

xhr.

setrequestheader

('content-type',)

;// send裡面寫 查詢字串 格式:key=value&key=value....

xhr.

send

('查詢字串'

)<

/script>

步驟:

第一大步:

1、建立xhr

2、監聽xhr.onreadystatechange事件 ajax狀態發生變化的事件

3、判斷ajax請求的狀態

4、接受響應結果 並且轉為陣列物件形式

5、呼叫引數裡面的 success函式

第二大步:

1、處理引數中data資料 遍歷物件

2、將data資料轉為查詢字串

3、判斷請求方式時 get 還是 post 並 設定請求方式 傳送請求

第三大步:

呼叫封裝的函式 並且 傳參

// 封裝乙個函式

function

ajax

(option)};

// 處理data資料 將物件形式的 處理查詢字串形式的

// 因為下面open 或者 send只能加字串形式

let arr =

for(

let i in option.data)

//join() 把陣列轉化為字串,元素是通過指定的分隔符進行分隔的,如果沒有預設為逗號

let querystring = arr.

join

('&');

// bookname=aaa&author=bbb&publiser=ccc

// touppercase() 轉大寫

let method = option.type.

touppercase()

;// 把請求方式轉成大寫 識別 post / post

// 判斷請求

if(option.type ===

'get'

)else

if(option.type ===

'post')}

;//呼叫 傳參 數數就是資料

ajax(,

success:

function

(res)})

;<

/script>

封裝原生ajax

封裝原生ajax四個步驟 類似於手機打 建立xmlhttprequest物件 買手機 開啟與伺服器的連線 撥號 傳送到伺服器 按下撥號鍵 等待伺服器的響應 有可能關機,不在服務區,無人接聽,有人接聽 function ajax obj else data user xiaocuo age 23 if...

原生ajax步驟詳解以及簡單封裝

一原生ajax詳解 二簡單封裝ajax 最後把 封裝起來,封裝起來以後,要給這個函式加上乙個引數url.引數是為了替換要讀取的檔名 function ajax url,fnsucc else ajax.open get url,true 把要讀取的引數的傳過來。ajax.send ajax.onre...

原生Ajax寫法(GET)

ajax的get提交方式的原生 這個物件是針對老式ie瀏覽器的 onreadystatechange事件 當readystate的值發生改變時觸發此事件 open 這個方法有三個引數,open 提交方式 get post 資源的位址 非同步或者同步 true false readystate 準備狀...