Ajax的使用以及跨域(上)

Ajax相信大家都聽說過,接下來這幾篇文章就來說說關于Ajax的一些知識,從而也順道引出來在實際工作過程中經常使用的一下技術:跨域。

首先我們先來看Ajax,Ajax簡單的來說,就是一個異步的javascript請求,用來獲取后臺服務端的數據,為什么要異步的呢?很簡單,因為獲取后臺網絡數據是需要時間的,如果同步的話,將會講當前界面卡住,造成非常不友好的用戶體驗。

在元素JS中來實現Ajax主要的類就是XMLHttpRequest,它的使用一般有四個步驟:

1、創(chuàng)建XMLHttpRequest對象

2、準備發(fā)送網絡請求

3、開始發(fā)送網絡請求

4、指定回調函數

沒錯,就是這么簡單的四個步驟,下面我們就通過代碼來將這四個步驟實現出來。

第一步,創(chuàng)建XMLHttpRequest對象

varxhr=newXMLHttpRequest();

第二步:準備發(fā)送網絡請求

xhr.open('get','./01check.php?username='+uname+'&password='+pw,true)

調用open方法,這里面有三個參數,第一個參數代表的這個Http請求是以get方式還是post方式,如果是get請求,則如果有參數的話,則需要將參數跟在url的后面,而如果是post請求,參數應該跟在請求體中。

第二個參數就是這個Http請求的url地址。這個url地址后面是否有?加參數,得取決于第一個參數是get還是post

第三個參數代表這個Http請求是同步的還是異步的。false代表同步,true代表異步。這個參數一般都是寫true,因為誰都不想在網絡請求的時候,將這個網頁卡住吧?不過對于學習來說的話,我們等等可以測試一下false的效果。

第三步:開始發(fā)送網絡請求

xhr.send(null);

調用send方法,傳遞一個null。需要注意的是,如果你在第二步的請求方式為get的話,那么這里傳null,如果在第二步的請求方式為post的話,這里就需要傳入你所需要傳遞給服務器的參數了。因為之前我們說過,post請求的參數并不是跟在url后面的,而是跟在請求體中,而send方法中的參數就是會被設置到請求體中。因此,對于post請求,需要在這里傳遞參數。如:

varparam='username='+uname+'&password='+pw;

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send(param);

需要注意的是,如果使用post請求,并且又有參數的話,那么對于xhr就必須設置請求頭信息,否則服務端接受不到參數。這個寫法都是固定的,如有需要直接復制即可,不需要背。

第四步,指定回調函數,xhr.send方法調用完之后,http請求就發(fā)送出去了。由于在第二步中,我們設置了請求為異步請求,異步請求不能直接獲得結果,只能通過監(jiān)聽回調的方式來得到響應數據。

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

if(xhr.status==200){

alert(xhr.responseText);

}

}

}

上訴代碼的4和200代表的正常得到數據,服務器響應正常,那么這時候我們就可以通過xhr.responseText來獲取到服務器給我們返回的數據了。

這里給出readyState和status的常用值代表含義的對應關系

好,通過上訴步驟,我們就能實現Ajax來完成異步請求了。完整的代碼如下:

get請求:

<scripttype="text/javascript">

window.onload=function(){

varbtn=document.getElementById('btn');

btn.onclick =function(){

varuname=document.getElementById('username').value;

varpw=document.getElementById('password').value;varxhr=newXMLHttpRequest();

xhr.open('get','./01check.php?username='+uname+'&password='+pw,true);xhr.send(null);xhr.onreadystatechange =function(){

if(xhr.readyState ==4){

if(xhr.status ==200){

vardata=xhr.responseText;

}

}

}

}

}

script>

post請求:

<scripttype="text/javascript">

window.onload=function(){

varbtn=document.getElementById('btn');

btn.onclick =function(){

varuname=document.getElementById('username').value;

varpw=document.getElementById('password').value;varxhr=newXMLHttpRequest();

xhr.open('post','./01check.php',true);

varparam='username='+uname+'&password='+pw;

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send(param)xhr.onreadystatechange =function(){

if(xhr.readyState ==4){

if(xhr.status ==200){

vardata=xhr.responseText;

}

}

}

}

}

script>

關于原生的Ajax請求,還有一點需要說明的就是在第二個步驟設置的同步還是異步的標識位。也就是xhr.open方法的最后一個參數,這個值一般都是true,但是總有人愛裝牛角尖,就會問如果是false會怎樣?

前面已經說過了,這個值true代表是異步請求服務器的數據,false代表同步請求服務器的數據。如果是同步請求,那么在xhr獲取到數據之前,整個瀏覽器都是卡在send方法等待數據返回,所以此時用戶操作界面是沒有任何效果的,按鈕點擊不了,頁面也滾動不了,體驗非常的差。這里需要說明的是,如果真有人把這個參數寫成false的話,那么在第四步中獲取數據的方式將會有所改變。如下:

<scripttype="text/javascript">

window.onload=function(){

varbtn=document.getElementById('btn');

btn.onclick =function(){

varuname=document.getElementById('username').value;

varpw=document.getElementById('password').value;varxhr=newXMLHttpRequest();

xhr.open('get','./01check.php?username='+uname+'&password='+pw,false);xhr.send(null);if(xhr.readyState ==4){

if(xhr.status ==200){

vardata=xhr.responseText;

}

}

}

}

script>

注意到沒有,如果是同步請求的話,那么我們就不需要監(jiān)聽onreadystatechange方法。因為xhr在send方法調用的時候,是一直卡在這個方法中的。一旦這個方法結束,那么xhr就已經成功的訪問到服務器的數據了,不需要做readystatechange的監(jiān)聽。換句話說,這時候readystatechange也監(jiān)聽不到了。因為xhr.onreadystatechange = function(){}這行代碼是在xhr.send之后調用的,對于同步方法來說,send方法中xhr.readystate已經發(fā)生了變化,最后變?yōu)?之后才跳出send方法繼續(xù)向下執(zhí)行。

最后,還需要講一個稍微不太重要的東西,就是XMLHttpRequest的創(chuàng)建對于低版本的IE需要做兼容。因為低版本的IE可能沒有XMLHttpRequest這個對象。做法如下:

varxhr=null;

if(window.XMLHttpRequest){//能力測試

xhr=newXMLHttpRequest();//標準}else{

xhr=newActiveXObject("Microsoft.XMLHTTP");

}

好,到目前為止呢,我們就講了關于Ajax在原生js下的使用方式和注意事項,總結來說有以下幾點:

1、XMLHttpRequest對象創(chuàng)建的兼容處理

2、get請求post請求在代碼上有什么差異

3、同步和異步的影響,以及同步和異步獲取數據的差異。

其實在實際開發(fā)中,我們比較少自己使用原生的js代碼來實現Ajax,而是使用第三方庫,比如jQuery,那么jQuery如何來使用Ajax,我們自己能不能封裝一個類似jQuery一樣的Ajax調用方式呢?我們下一篇文章再來說明一下。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容

  • Ajax相信大家都聽說過,接下來這幾篇文章就來說說關于Ajax的一些知識,從而也順道引出來在實際工作過程中經常使用...
    我只是一個小小的搬運工閱讀 296評論 0 2
  • 我們自己模仿著jQuery封裝Ajax請求。 原生的Ajax請求上篇文章已經都說清楚了,大家應該會感覺調用起來代碼...
    zhanghao121閱讀 247評論 0 0
  • 好,我們接著上篇的內容接續(xù)來講解Ajax相關的內容。今天要將的是我們自己模仿著jQuery封裝Ajax請求。 原生...
    Emotion_C閱讀 334評論 0 0
  • ajax作為前端開發(fā)必需的基礎能力之一,你可能會使用它,但并不一定懂得其原理,以及更深入的服務器通信相關的知識。在...
    蕭玄辭閱讀 839評論 0 0
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest,但細究起來它們兩個是...
    changxiaonan閱讀 2,259評論 0 2