//原生js寫ajax就像打電話
//打電話分下面4步
//1.拿出手機
//2.撥號
//3.說話
//4.聽對方說話
//ajax也分下面4步
//1.創建ajax對象
//2.連接到服務器
//3.發送請求(告訴服務器我要什麼文件)
//4.接收返回值
下面是原生js寫ajax的具體寫法
window.onload=function()
{
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
//1.創建ajax對象
//只兼容非ie6的瀏覽器,在ie6瀏覽器上運行會提示沒有被定義
//var oAjax = new XMLHttpRequest();//這纔是ajax實際的請求
//alert(oAjax);
//ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用,會報錯。
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax);
//鑑於上面出現的問題,可以採取下面的方法解決,用if判斷是否爲IE6瀏覽器
if(window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6瀏覽器。()裏面加window的原因下面會有描述。
{
var oAjax = new XMLHttpRequest();//創建ajax對象
}
else//如果沒有XMLHttpRequest,那就是IE6瀏覽器
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創建ajax對象
}
//2.連接服務器
//open(方法、文件名、異步傳輸)
//方法:
//傳輸方式是get方式還是post方式。
//文件名
//告訴服務器要讀哪個文件
//異步傳輸
//異步:多件事一件一件的做
//同步:多件事情一起進行
//但是js裏面的同步和異步和現實的同步異步相反。
//同步:多件事一件一件的做
//異步:多件事情一起進行
//ajax天生是用來做異步的
oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是爲了消除緩存,每次的t的值不一樣。
//3.發送請求
oAjax.send();
//4.接收返回
//客戶端和服務器端有交互的時候會調用onreadystatechange
oAjax.onreadystatechange=function()
{
//oAjax.readyState //瀏覽器和服務器,進行到哪一步了。
//0->(未初始化):還沒有調用 open() 方法。
//1->(載入):已調用 send() 方法,正在發送請求。
//2->載入完成):send() 方法完成,已收到全部響應內容。
//3->(解析):正在解析響應內容。
//4->(完成):響應內容解析完成,可以在客戶端調用。
if(oAjax.readyState==4)
{
if(oAjax.status==200)//判斷是否成功,如果是200,就代表成功
{
alert("成功"+oAjax.responseText);//讀取a.txt文件成功就彈出成功。後面加上oAjax.responseText會輸出a.txt文本的內容
}
else
{
alert("失敗");
}
}
};
}
};
/*//上面if裏面需要些window的原因
//js裏面的變量和屬性
var a = 12;
alert(a);//頁面上彈出12很正常,而實際上輸出的是下面的寫法,是屬於window的,只是window能省就省了。
alert(window.a);//輸出結果是一樣的
window.alert(window.a);
//想a這種全局變量實際上是winow的一個屬性。
//如果不定義一個變量a直接像下面那樣輸出a
alert(a)//系統會報錯,而不是undefind,因爲沒有定義變量a。
alert(window.a);//如果是這樣寫,系統就不會報錯了,會顯示undefind。
//出現上面的原因是因爲直接寫a從根上就找不到a,而前面加上window只是找不到window的屬性a了。*/
但是,不能每次用ajax的時候都寫那麼多代碼,要把這段ajax代碼封裝起來,方便使用。
封裝ajax
//最後把代碼封裝起來,封裝起來以後,要給這個函數加上一個參數url.參數是爲了替換要讀取的文件名
function ajax(url,fnSucc)
{
if(window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創建ajax對象
}
oAjax.open("GET",url,true);//把要讀取的參數的傳過來。
oAjax.send();
oAjax.onreadystatechange=function()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
fnSucc(oAjax.responseText);//成功的時候調用這個方法
}
else
{
if(fnfiled)
{
fnField(oAjax.status);
}
}
}
};
}
將封裝的ajax調用
//引用封裝的ajax文件window.onload=function()
{
varoBtn = document.getElementById("btn1");
oBtn.onclick =function()
{
ajax('a.txt',function(str){//讀取a.txt文件裏面的內容alert(str);//將讀取的內容輸出 })
}
};