柚子快報(bào)激活碼778899分享：前端 Ajax 筆記 01

http://yzkb.51969.com/

01 ajax的基本使用

? ? ? ? ajax五步驟:

? ? ? ? ? ? ? ? 1.構(gòu)建異步請(qǐng)求對(duì)象

? ? ? ? ? ? ? ? 2.調(diào)用open方法 傳入請(qǐng)求方式 服務(wù)器地址等參數(shù)

? ? ? ? ? ? ? ? 3.調(diào)用send方法 發(fā)起網(wǎng)絡(luò)請(qǐng)求

? ? ? ? ? ? ? ? 4.注冊(cè)請(qǐng)求對(duì)象的狀態(tài)改變事件

? ? ? ? ? ? ? ? 5.在狀態(tài)改變事件里面 判斷當(dāng)前狀態(tài) 并取得返回值

02 get方式向服務(wù)器發(fā)送數(shù)據(jù)

? ? ? ? ajax的get方式向服務(wù)器提交數(shù)據(jù):

? ? ? ? ? ? ? ? ajax.open('請(qǐng)求方式','服務(wù)器地址?鍵1=值1&鍵2=值2.....')

03 ajax的post方式向服務(wù)器發(fā)送數(shù)據(jù)

????????ajax的post方式向服務(wù)器發(fā)送數(shù)據(jù)：

? ? ? ? ? ? ? ? ajax對(duì)象.send('鍵1=值1&鍵2=值2.....')

? ? ? ? ????????前提是ajax必須設(shè)置一個(gè)請(qǐng)求頭 才能使得post數(shù)據(jù)提交成功

? ? ? ? 設(shè)置請(qǐng)求頭：

????????????????ajax對(duì)象.setRequestHeader("鍵","值");

????????????????ajax對(duì)象.setRequestHeader("Content-type","application/x-www-form-urlencoded")

????????????????ajax對(duì)象.setRequestHeader("Content-type","multipart/form-data")

????????????????ajax對(duì)象.setRequestHeader("Content-type","application/json")

? ? ? ? 響應(yīng)：

? ? ? ? ? ? ? ? 響應(yīng)碼：

? ? ? ? ? ? ? ? ? ? ? ? 200? 'ok'

? ? ? ? ? ? ? ? ? ? ? ? 404? 'not? found'?

? ? ? ? ? ? ? ? ? ? ? ? 304? ?'從緩存中讀取'

? ? ? ? ? ? ? ? ? ? ? ? 302? ?轉(zhuǎn)發(fā)

? ? ? ? ? ? ? ? ? ? ? ? 500? ?'internal? error'? 服務(wù)器內(nèi)部錯(cuò)誤

? ? ? ? 請(qǐng)求頭:

? ? ? ? ? ? ? ? 包含本次請(qǐng)求的一些相關(guān)信息

? ? ? ? ? ? ? ? 比如 請(qǐng)求的地址

? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)前網(wǎng)頁(yè)的數(shù)據(jù)的地址

? ? ? ? ? ? ? ? ? ? ? ? 提交數(shù)據(jù)內(nèi)容的類(lèi)型

? ? ? ? ? ? ? ? ? ? ? ? 提交的數(shù)據(jù)的長(zhǎng)度

? ? ? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)的格式

? ? ? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)的編碼格式

? ? ? ? 響應(yīng)頭:

? ? ? ? ? ? ? ? 服務(wù)器版本?

? ? ? ? ? ? ? ? 服務(wù)器語(yǔ)言類(lèi)型

? ? ? ? ? ? ? ? 服務(wù)器返回的數(shù)據(jù)類(lèi)型

? ? ? ? ? ? ? ? 數(shù)據(jù)長(zhǎng)度

? ? ? ? GET與POST的區(qū)別:

? ? ? ? ? ? ? ? GET:

? ? ? ? ? ? ? ? ? ? ? ? 提交的參數(shù)在請(qǐng)求地址的后面拼接

? ? ? ? ? ? ? ? ? ? ? ? 參數(shù)大小限制3~4k

? ? ? ? ? ? ? ? ? ? ? ? get偏向于數(shù)據(jù)獲取

? ? ? ? ? ? ? ? ? ? ? ? get相對(duì)速度快

? ? ? ? ? ? ? ? ? ? ? ? get相對(duì)不安全

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? get請(qǐng)求可以被加入收藏夾 有歷史記錄 會(huì)被加入書(shū)簽

? ? ? ? ? ? ? ? POST:

? ? ? ? ? ? ? ? ? ? ? ? 提交的數(shù)據(jù)在send里面(隱式傳遞)

? ? ? ? ? ? ? ? ? ? ? ? 參數(shù)的大小沒(méi)有限制

????????????????????????(體積大的數(shù)據(jù)可以使用mulltipart/form-data格式進(jìn)行二進(jìn)制流? ?分段進(jìn)行傳遞)

? ? ? ? ? ? ? ? ? ? ? ? post偏向于提交數(shù)據(jù)

? ? ? ? ? ? ? ? ? ? ? ? post相對(duì)速度慢

? ? ? ? ? ? ? ? ? ? ? ? post相對(duì)安全

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? post請(qǐng)求不可以被加入收藏夾? 沒(méi)有歷史記錄

04 JQ中ajax的使用

? ? ? ? jq的ajax方法 可以進(jìn)行全配置 的訪問(wèn)服務(wù)器

? ? ? ? $.ajax(option對(duì)象)

? ? ? ? option對(duì)象的常用屬性:

? ? ? ? ? ? ? ? url? ?服務(wù)器地址

? ? ? ? ? ? ? ? type? ?請(qǐng)求方式(get/post)

? ? ? ? ? ? ? ? data:{ }? 提交的參數(shù)

? ? ? ? ? ? ? ? success : function(){?}? 成功的回調(diào)

? ? ? ? ? ? ? ? error : function(){?}? 失敗的回調(diào)

? ? ? ? ? ? ? ? timeout:3000???請(qǐng)求的超時(shí)時(shí)間

? ? ? ? ? ? ? ? headers : { } 設(shè)置自定義請(qǐng)求頭

????????????????dataType?: " "? 返回?cái)?shù)據(jù)類(lèi)型的預(yù)處理

? ? ? ? 不常用屬性:

? ? ? ? ? ? ? ??beforeSend:function(xhr){ } 網(wǎng)絡(luò)請(qǐng)求發(fā)起之前

? ? ? ? 跨域?qū)傩?

? ? ? ? ? ? ? ? jsonp

? ? ? ? ? ? ? ? jsonpCallback

柚子快報(bào)激活碼778899分享：前端 Ajax 筆記 01

http://yzkb.51969.com/

推薦鏈接