深入學習ajax系列之二 請求方式

2021-07-29 20:19:33 字數 3530 閱讀 9401

最常見的請求莫過於get和post了,今天詳細的學習一下兩種方式的內容,

get

get是常見的請求方式,常用於向伺服器查詢某些資訊,它適用於url完全指定資源,當請求對伺服器沒有任何***以及伺服器的響應式可快取的。

資料傳送

使用get的方式傳送請求時,資料被追加到open()方法中url的末尾

資料以問號開始,名和值之間用等號鏈結起來,名值對之間用&分割,使用get方式傳送的資料常常被稱之為查詢字串。

xhr.open("get","example.php?name1=value1&name2=value2",true)
【編碼】

由於url無法識別特殊字元,如果資料中包含特殊字元,則要使用encodeurlcomponent()進行編碼

var url = 'test.php' +'?name='  + encodeuricomponent("小夢夢");

xhr.open('get',url,true);

上面的url將會被編碼為:

test.php?name=%e5

%b0%8f

%e6%a2

%a6%e6

%a2%a6

【函式編碼】

下面這個函式可以向現有的url的末尾新增查詢字串的引數

function

newparm

(url,name,value)

這個addurlparam()函式接受三個引數:要新增引數的url、引數的名稱和引數的值。這個函式首先檢查url是否包含問號(以確定是否已經有引數存在)。如果沒有,就新增乙個問號;否則,就新增乙個和號。然後,將引數名稱和值進行編碼,再新增到url的末尾。最後返回新增引數之後的url.

var url = 'test.php';

url = addurlparam(url,'name','aaa');

url = addurlparam(url,'data','bbb');

xhr.open('get',url,true);

快取

在get請求中,為了避免快取的影響,可以向url新增乙個隨機數或時間戳。

xhr.open('get',url + '&' + number(new

date()),true);

xhr.open('get',url + '&' + math.random(),true);

這裡寫**片
下面把使用get方式傳送ajax請求的操作封裝為get()函式.

function

get(url,data,callback)else

//非同步接受響應

xhr.onreadystatechange = function

() }

}for(var key in data)

//增加隨機數,防止快取

xhr.open('get',url+'&'+number(new

date()),true);

//傳送請求

xhr.send();

}

//前端

get('form.php',,function

(data))

//後端

<?php

foreach($_get

as$key => $value)

}?>

post

通常用於伺服器傳送應該被儲存的資料,『post』常用與html表單,它在請求主題中包含額外資料且這些資料常儲存在伺服器上資料庫中。相同的url的重複post請求從伺服器上得到的響應可能不同,同時不應該快取使用這個方法的請求。

post請求應該把資料作為乙個請求的主體提交,而get上不是這樣的,post可以請求的主體可能包含非常多的資料。而且格式不限。在open()方法第乙個引數的位置傳入」post」,就可以初始化乙個post請求。

xhr.open("post","example.php",true);
【設定請求頭】

傳送post請求的第二部就是向send()中傳入某些資料,由於xhr的最初設計是主要為了處理xml,因此可以在次傳入xml文件,傳入的文件進過序列化之後將作為請求的主體提交到伺服器,也可以在此傳入任何想傳送到伺服器的字串。

如果不設定content-type,傳送給伺服器的資料就不會出現在po

sr超級

全域性變數

中。這時

要訪問同

樣的資料

,須借助

如果對相同的頭呼叫多次setrequestheader(),新值不會取代之前指定的值。相反,http請求將包含這個頭的多個副本或這個頭將指定多個值.

傳送主體

接下來要以適當的格式建立乙個字串,並使用send()方法傳送

post資料的格式與查詢字串格式相同,名和值之間用等號鏈結,名值對之間用和號(&)分隔,如下所示

【編碼和快取】

由於使用post方式傳遞資料時,需要設定請求頭」content-type」,這一步驟已經能夠自動對特殊字元(如中文)進行編碼,所以就不再需要使用encodeuricomponent()方法了

post請求主要用於資料提交,相同url的重複post請求從伺服器得到的響應可能不同,所以不應該快取使用post方法的請求.

【效能】

get對所傳送資訊的數量有限制,一般在2000個字元。與get請求相比,post請求消耗的資源會更多一些。從效能角度來看,以傳送相同的資料計,get請求的速度最多可post請求的兩倍.

【封裝函式】

function

post

(url,data,callback)else

//非同步接受響應

xhr.onreadystatechange = function

() }

}var strdata = '';

for(var key in data)

strdata = strdata.substring(1);

xhr.open('post',url,true);

//設定請求頭

//傳送請求

xhr.send(strdata);

}

//前端

post('form.php',,function

(data))

script>

//後端

<?php

foreach($_post

as$key => $value)

}?>

深入學習Ajax

ajax的工作原理相當於在使用者和伺服器之間加了乙個中間層 ajax引擎 使使用者操作與伺服器響應非同步化。並不是所有的使用者請求都提交給伺服器,像 些資料驗證 比如判斷使用者是否輸入了資料 和資料處理 比如判斷使用者輸入資料是否是數字 等都交給ajax引擎自己來做,只有確定需要從伺服器讀取新資料時...

深入學習併發之二 volatile關鍵字詳解

若閱讀過程中出現疑問,可先閱讀併發學習總覽 volatile滿足了併發中的原子性 可見性和區域性有序性,但是其中的原子性是存在侷限性的。volatile原子性的侷限 volatile變數的寫和volatile的讀都是有原子性的,但是由於其實現方式並不是使用的同步的思想,所以並不能獨佔時間片。這也導致...

Python深入學習筆記(二)

計數器counter counter類是自python2.7起增加的,屬於字典類的子類,是乙個容器物件,主要用來統計雜湊物件,支援集合操作 其中後兩項分別返回兩個counter物件各元素的最小值和最大值。from collections import counter c counter succes...