0818 幾種AJAX請求實現

2021-10-23 11:58:10 字數 2225 閱讀 9473

//get請求

;//響應資料型別

xhr.responsetype =

"json"

;// 初始化

xhr.

open

("get"

,"");

// 傳送

xhr.

send()

;// 事件繫結 處理返回結果

xhr.

onreadystatechange

=function()

}}//post請求

// 設定請求頭

xhr.

setrequestheader

("content-type",)

xhr.

send

("a=100&b=200");

xhr.

onreadystatechange=(

)=>

}}

##使用fetch

//get請求

fetch

("",,

}).then

(value =>).

then

(value =>);

//post請求

fetch

("",,

body:

"username=admin&password=111111"})

.then

(value =>).

then

(value =>

);

//get請求

axios.defaults.baseurl =

"";axios.

get(

"/axios-server",,

// headers:})

.then

(value =>).

catch

(error =>);

//post請求

axios.

post

("/axios-server"

,// 請求體,,

headers:})

.then

(value =>

, reason =>);

//通用

axios(,

headers:

, data:})

;

##使用jquery

// 基本用法無引數get請求

$.ajax(}

// 需指定方法則增加method欄位

$.ajax(}

// 有引數,則增加data欄位,有請求頭則增加headers欄位,有錯誤處理增加error欄位

$.ajax(,

success:

function

(result)

, error:

function

(xhr,status,error)})

;// data在post下是表單格式,在get下是querystring格式

$.ajax(,

method:

"post"

, data:

json

.stringify()

, success:

function

(result)})

;

server端借助的是express框架,**如下:

const express =

require

("express");

const

=require

("express");

// 建立應用物件

express()

;all

("/axios-server"

,(request, response)

=>

response.

send

(json

.stringify

(data));

});

ajax跨域請求例項

客戶端js 服務端 1 string callbackfunname context.request callbackparam 2 context.response.write callbackfunname ps 客戶端的jsonp引數是用來通過url傳參,傳遞jsonpcallback引數的引...

使用jQuery和Ajax請求實現分頁效果

在要求分頁的程式中,我們一般會知道如下幾個資料的引數 總記錄數count 每一頁要顯示的記錄數 size 當前頁 num 總頁數我們可以通過count和size得到,在js中可以使用math.ceil 編寫我們的js分頁指令碼page.js 定義乙個page函式,接收兩個引數,總記錄數和引數列表va...

模擬Ajax請求實現動態資料爬取

以菜鳥教程的 為例 綜上,ajax資料爬取的關鍵是js分析,只要找到js的請求引數,我們就能模擬ajax請求,從而得到響應資料在開發者工具的 網路 network 模組下檢視所有請求和響應,其中,type為xhr的就是ajax請求。隨著我們與網頁的不斷互動,這些請求會不斷增加。在請求的具體內容中,我...