2018-7-25 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
打電話分下面4步：
ajax也分下面4步：
下面是原生js寫ajax的具體寫法 ：
但是，不能每次用ajax的時(shí)候都寫那么多代碼，要把這段ajax代碼封裝起來(lái)，方便使用。
封裝ajax代碼如下：
將封裝的ajax調(diào)用：
原生js寫ajax可以類比打電話
1.拿出手機(jī)
2.撥號(hào)
3.說(shuō)話
4.聽對(duì)方說(shuō)話
1.創(chuàng)建ajax對(duì)象
2.連接到服務(wù)器
3.發(fā)送請(qǐng)求（告訴服務(wù)器我要什么文件）
4.接收返回值
<script>
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
//1.創(chuàng)建ajax對(duì)象
//只兼容非ie6的瀏覽器，在ie6瀏覽器上運(yùn)行會(huì)提示沒有被定義
//var oAjax = new XMLHttpRequest();//這才是ajax實(shí)際的請(qǐng)求
//alert(oAjax);
//ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會(huì)報(bào)錯(cuò)。
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax);
//鑒于上面出現(xiàn)的問(wèn)題，可以采取下面的方法解決，用if判斷是否為IE6瀏覽器
if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()里面加window的原因下面會(huì)有描述。
{
var oAjax = new XMLHttpRequest();//創(chuàng)建ajax對(duì)象
}
else//如果沒有XMLHttpRequest，那就是IE6瀏覽器
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創(chuàng)建ajax對(duì)象
}
//2.連接服務(wù)器
//open(方法、文件名、異步傳輸）
//方法：
//傳輸方式是get方式還是post方式。
//文件名
//告訴服務(wù)器要讀哪個(gè)文件
//異步傳輸
//異步：多件事一件一件的做
//同步：多件事情一起進(jìn)行
//但是js里面的同步和異步和現(xiàn)實(shí)的同步異步相反。
//同步：多件事一件一件的做
//異步：多件事情一起進(jìn)行
//ajax天生是用來(lái)做異步的
oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是為了消除緩存，每次的t的值不一樣。
//3.發(fā)送請(qǐng)求
oAjax.send();
//4.接收返回
//客戶端和服務(wù)器端有交互的時(shí)候會(huì)調(diào)用onreadystatechange
oAjax.onreadystatechange=function()
{
//oAjax.readyState //瀏覽器和服務(wù)器，進(jìn)行到哪一步了。
//0->（未初始化）：還沒有調(diào)用 open() 方法。
//1->（載入）：已調(diào)用 send() 方法，正在發(fā)送請(qǐng)求。
//2->載入完成）：send() 方法完成，已收到全部響應(yīng)內(nèi)容。
//3->（解析）：正在解析響應(yīng)內(nèi)容。
//4->（完成）：響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用。
if(oAjax.readyState==4)
{
if(oAjax.status==200)//判斷是否成功,如果是200，就代表成功
{
alert("成功"+oAjax.responseText);//讀取a.txt文件成功就彈出成功。后面加上oAjax.responseText會(huì)輸出a.txt文本的內(nèi)容
}
else
{
alert("失敗");
}
}
};
}
};
/*//上面if里面需要些window的原因
//js里面的變量和屬性
var a = 12;
alert(a);//頁(yè)面上彈出12很正常，而實(shí)際上輸出的是下面的寫法，是屬于window的，只是window能省就省了。
alert(window.a);//輸出結(jié)果是一樣的
window.alert(window.a);
//想a這種全局變量實(shí)際上是winow的一個(gè)屬性。
//如果不定義一個(gè)變量a直接像下面那樣輸出a
alert(a)//系統(tǒng)會(huì)報(bào)錯(cuò)，而不是undefind，因?yàn)闆]有定義變量a。
alert(window.a);//如果是這樣寫，系統(tǒng)就不會(huì)報(bào)錯(cuò)了，會(huì)顯示undefind。
//出現(xiàn)上面的原因是因?yàn)橹苯訉慳從根上就找不到a，而前面加上window只是找不到window的屬性a了。*/
</script>
//最后把代碼封裝起來(lái),封裝起來(lái)以后，要給這個(gè)函數(shù)加上一個(gè)參數(shù)url.參數(shù)是為了替換要讀取的文件名
function ajax(url,fnSucc)
{
if(window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創(chuàng)建ajax對(duì)象
}
oAjax.open("GET",url,true);//把要讀取的參數(shù)的傳過(guò)來(lái)。
oAjax.send();
oAjax.onreadystatechange=function()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
fnSucc(oAjax.responseText);//成功的時(shí)候調(diào)用這個(gè)方法
}
else
{
if(fnfiled)
{
fnField(oAjax.status);
}
}
}
};
}
<script src="new_ajax.js"></script>//引用封裝的ajax文件
<script>
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
ajax('a.txt',function(str){//讀取a.txt文件里面的內(nèi)容
alert(str);//將讀取的內(nèi)容輸出
})
}
};
</script>
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.lzhte.cn