原生ajax請求封裝 node後台版

2021-08-25 22:26:01 字數 1890 閱讀 4681

ajax get方式請求,前台的關鍵**就下面4步:

1. var xhr = new xmlhttprequest(); //new乙個』小黃人『物件,用於與後台互動資料。

2. xhr.open(『get』,』方法建立乙個http請求(第乙個引數:指定請求方式;第二個引數:指定請求的url;第三個引數:是否非同步請求。)

3. xhr.send();//傳送請求。(get請求方式,引數null;post請求,向後台傳送的引數放在這兒)

4. xhr.onreadystatechange=function();

//onreadystatechange方法用於監聽xmlhttprequest 的狀態。看例項**你就明白了。

//其中xmlhttprequest的狀態如下:

0: 請求未初始化

1: 伺服器連線已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成,且響應已就緒

html前台** 如下:

使用者:'name' type="text" >

密碼:'age' type="text" >

"sub()" type="button" value="提交">

node 後台** 如下:

注意:

1. response.setheader(『access-control-allow-origin』,』*』);設定容許跨域訪問

}).listen(8888);html前台** 如下:

使用者:'name' type="text" >

密碼:'age' type="text" >

"sub()" type="button" value="提交">

node 後台** 如下:

注意:

1. response.setheader(『access-control-allow-origin』,』*』);設定容許跨域訪問

2. var str = 」;

request.on(『data』,function(data));

3. request.on(『end』,function())//該方法監聽資料接收完成時執行。

});}).listen(7777);html前台** 如下:

使用者:'name' type="text" >

密碼:'age' type="text" >

"sub('get')" type="button" value="get提交">    

"sub('post')" type="button" value="post提交">

原生ajax封裝請求

封裝ajax function ajax obj else 2.開啟請求 第乙個引數表示請求方式,值為get post,是字串 第二個引數表示請求的位址 第三個引數是布林值,預設是true表示非同步,false表示同步 xhr.open obj.type,obj.url,obj.async 3.判斷...

理解ajax技術,封裝原生 ajax請求

優點 缺點 核心 工作原理 對比 1.xmlhtttprequest物件 是ajax技術 的核心 2.xhr物件 的屬性 readystate 返回 請求的狀態 數字格式 狀態 名稱描述 0uninitialized 初始化狀態 xmlhttprequest 物件已建立 或 已被 abort 方法重...

封裝原生ajax

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