Ajax相信大家都聽說過患久，接下來這幾篇文章就來說說關(guān)于Ajax的一些知識洋机，從而也順道引出來在實(shí)際工作過程中經(jīng)常使用的一下技術(shù):跨域忠荞。
首先我們先來看Ajax多搀，Ajax簡單的來說，就是一個異步的javascript請求侧甫，用來獲取后臺服務(wù)端的數(shù)據(jù)珊佣，為什么要異步的呢？很簡單闺骚，因為獲取后臺網(wǎng)絡(luò)數(shù)據(jù)是需要時間的彩扔，如果同步的話，將會講當(dāng)前界面卡住僻爽，造成非常不友好的用戶體驗虫碉。
在元素JS中來實(shí)現(xiàn)Ajax主要的類就是XMLHttpRequest，它的使用一般有四個步驟：
1胸梆、創(chuàng)建XMLHttpRequest對象
2敦捧、準(zhǔn)備發(fā)送網(wǎng)絡(luò)請求
3、開始發(fā)送網(wǎng)絡(luò)請求
4碰镜、指定回調(diào)函數(shù)
沒錯兢卵，就是這么簡單的四個步驟，下面我們就通過代碼來將這四個步驟實(shí)現(xiàn)出來绪颖。
?第一步秽荤，創(chuàng)建XMLHttpRequest對象
varxhr=newXMLHttpRequest();
第二步：準(zhǔn)備發(fā)送網(wǎng)絡(luò)請求
xhr.open('get','./01check.php?username='+uname+'&password='+pw,true)
調(diào)用open方法，這里面有三個參數(shù)柠横，第一個參數(shù)代表的這個Http請求是以get方式還是post方式窃款，如果是get請求，則如果有參數(shù)的話牍氛，則需要將參數(shù)跟在url的后面晨继，而如果是post請求，參數(shù)應(yīng)該跟在請求體中搬俊。
第二個參數(shù)就是這個Http請求的url地址紊扬。這個url地址后面是否有?加參數(shù)蜒茄，得取決于第一個參數(shù)是get還是post
第三個參數(shù)代表這個Http請求是同步的還是異步的。false代表同步餐屎，true代表異步檀葛。這個參數(shù)一般都是寫true，因為誰都不想在網(wǎng)絡(luò)請求的時候啤挎，將這個網(wǎng)頁卡住吧驻谆？不過對于學(xué)習(xí)來說的話，我們等等可以測試一下false的效果庆聘。
第三步：開始發(fā)送網(wǎng)絡(luò)請求
xhr.send(null);
調(diào)用send方法，傳遞一個null勺卢。需要注意的是伙判，如果你在第二步的請求方式為get的話，那么這里傳null黑忱，如果在第二步的請求方式為post的話宴抚，這里就需要傳入你所需要傳遞給服務(wù)器的參數(shù)了。因為之前我們說過甫煞，post請求的參數(shù)并不是跟在url后面的菇曲，而是跟在請求體中，而send方法中的參數(shù)就是會被設(shè)置到請求體中抚吠。因此常潮，對于post請求，需要在這里傳遞參數(shù)楷力。如：
varparam='username='+uname+'&password='+pw;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
需要注意的是喊式，如果使用post請求，并且又有參數(shù)的話萧朝，那么對于xhr就必須設(shè)置請求頭信息岔留，否則服務(wù)端接受不到參數(shù)。這個寫法都是固定的检柬，如有需要直接復(fù)制即可献联，不需要背。
第四步何址，指定回調(diào)函數(shù)里逆，xhr.send方法調(diào)用完之后，http請求就發(fā)送出去了头朱。由于在第二步中运悲，我們設(shè)置了請求為異步請求，異步請求不能直接獲得結(jié)果项钮，只能通過監(jiān)聽回調(diào)的方式來得到響應(yīng)數(shù)據(jù)班眯。
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText);
}
}
}
上訴代碼的4和200代表的正常得到數(shù)據(jù)希停，服務(wù)器響應(yīng)正常，那么這時候我們就可以通過xhr.responseText來獲取到服務(wù)器給我們返回的數(shù)據(jù)了署隘。
這里給出readyState和status的常用值代表含義的對應(yīng)關(guān)系
好宠能，通過上訴步驟，我們就能實(shí)現(xiàn)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>
關(guān)于原生的Ajax請求违崇，還有一點(diǎn)需要說明的就是在第二個步驟設(shè)置的同步還是異步的標(biāo)識位。也就是xhr.open方法的最后一個參數(shù)诊霹，這個值一般都是true羞延，但是總有人愛裝牛角尖，就會問如果是false會怎樣脾还？
前面已經(jīng)說過了伴箩，這個值true代表是異步請求服務(wù)器的數(shù)據(jù)，false代表同步請求服務(wù)器的數(shù)據(jù)鄙漏。如果是同步請求嗤谚，那么在xhr獲取到數(shù)據(jù)之前，整個瀏覽器都是卡在send方法等待數(shù)據(jù)返回怔蚌，所以此時用戶操作界面是沒有任何效果的巩步，按鈕點(diǎn)擊不了，頁面也滾動不了桦踊，體驗非常的差椅野。這里需要說明的是，如果真有人把這個參數(shù)寫成false的話钞钙，那么在第四步中獲取數(shù)據(jù)的方式將會有所改變鳄橘。如下：
<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>
注意到?jīng)]有，如果是同步請求的話芒炼，那么我們就不需要監(jiān)聽onreadystatechange方法瘫怜。因為xhr在send方法調(diào)用的時候，是一直卡在這個方法中的本刽。一旦這個方法結(jié)束鲸湃，那么xhr就已經(jīng)成功的訪問到服務(wù)器的數(shù)據(jù)了，不需要做readystatechange的監(jiān)聽子寓。換句話說暗挑，這時候readystatechange也監(jiān)聽不到了。因為xhr.onreadystatechange = function(){}這行代碼是在xhr.send之后調(diào)用的斜友，對于同步方法來說炸裆，send方法中xhr.readystate已經(jīng)發(fā)生了變化，最后變?yōu)?之后才跳出send方法繼續(xù)向下執(zhí)行鲜屏。
最后烹看，還需要講一個稍微不太重要的東西国拇，就是XMLHttpRequest的創(chuàng)建對于低版本的IE需要做兼容。因為低版本的IE可能沒有XMLHttpRequest這個對象惯殊。做法如下：
varxhr=null;
if(window.XMLHttpRequest){//能力測試
xhr=newXMLHttpRequest();//標(biāo)準(zhǔn)}else{
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
好酱吝，到目前為止呢，我們就講了關(guān)于Ajax在原生js下的使用方式和注意事項土思，總結(jié)來說有以下幾點(diǎn)：
1务热、XMLHttpRequest對象創(chuàng)建的兼容處理
2、get請求post請求在代碼上有什么差異
3己儒、同步和異步的影響崎岂，以及同步和異步獲取數(shù)據(jù)的差異。
?其實(shí)在實(shí)際開發(fā)中址愿，我們比較少自己使用原生的js代碼來實(shí)現(xiàn)Ajax该镣，而是使用第三方庫，比如jQuery响谓，那么jQuery如何來使用Ajax，我們自己能不能封裝一個類似jQuery一樣的Ajax調(diào)用方式呢省艳？我們下一篇文章再來說明一下娘纷。
P???I?
