建立ajax庫過程中碰到的幾個問題
阿新 • • 發佈：2019-02-02
問題一：
針對非IE瀏覽器建立時，必須這樣寫，避免瀏覽器報錯導致在IE下執行不到後面的語句。
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
}因為這樣寫，在IE下執行時，瀏覽器會認為是Undefined，而執行else後的語句：
else{
var oAjax=new activeXObject("Microsoft.XMLHTTP");
}問題二：
在連結伺服器時：
open(method,url,true);其中第三個引數表示：非同步。非同步即多個事情一起發生。如果改為false就沒有必要用aJax了。
問題三：
在判斷瀏覽器與伺服器的傳輸狀態時用到這個事件：
oAjax.onreadystatechange=function(){
}readyState==0表示Ajax物件剛建立。
readyState==1表示已經連結伺服器。
readyState==2表示已經像伺服器載入資料。
readyState==3表示編譯解碼完成。
readyState==4表示連結完成。注意：完成並不代表成功。
在這個庫裡，我們只用到4這個值。
oAjax.onreadystatechange=function(){ if(oAjax.readyState==4){ if(oAjax.status==200){ //當status值等於200時，表示連結成功。 alert(oAjax.responseText); //responseText的值為所訪問的檔案返回的文字物件。 } else{ alert(oAjax.status); //如果失敗會返回status值為404的提示。 } } }
注意：readyState的第二個單詞為大寫，都寫成小寫，系統不會報錯，這樣的錯誤比較難找的。
下面貼上一個完整的AJAX庫。
function ajax(url,fnSucc,fnFail){ if(window.XMLHttpRequest){ var oAjax=new XMLHttpRequest(); } else{ var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } //2.連結伺服器 //open('方法','檔名',同步（true)還是非同步false)) Ajax存在的意義是是讀取伺服器的資料 oAjax.open('GET','a.txt?t='+new Date().getTime(),true); //為了清除快取可以在檔名後加？a=? //3.傳送請求 oAjax.send(); //4.接受返回 oAjax.onreadystatechange=function(){ // oAjax.readyState 瀏覽器和伺服器互動到哪裡了？4代表返回完成。0:(未初始化）；1：已載入send()方法，正在傳送。2.載入完成，即send()方法完成，已收到全部相應內容 //3.（解析）正在解析相應內容 4.（完成）相應內容解析完成，可以在客戶端呼叫了。 if(oAjax.readyState==4)//讀取完成，即使出錯也算完成，也會提示4 { if(oAjax.status==200) //讀取成功 { fnSucc(oAjax.responseText); } else{ if(fnFail){ fnFail(oAjax.status); } } } } }
在我的伺服器的www這個資料夾裡有一個叫a.txt的檔案。這個檔案裡有一個數組：
[{username:'大牛',password:123456},{username:'大牛',password:123456},{username:'大牛',password:123456},{username:'大牛',password:123456},{username:'大牛',password:123456}]其實就是一個以字串形式存在的陣列，數組裡每個元素都是一個json。接下來會用到eval這個方法，把responseText獲取的字串轉化成陣列，並賦給變數arr.
<html>
<head>
<meta charset="utf-8"/>
<title>寫一個自己的ajax庫</title>
<script src="ajax.js"></script>
<script>
window.onload=function(){
oBtn=document.getElementById("btn1");
oUl=document.getElementById("ul1");
oBtn.onclick=function(){
ajax("a.txt",function(str){
var arr=eval(str); <span style="color:#ff6666;">//將獲取的字串轉化成陣列賦給arr。</span>
//alert(arr);
for(var i=0;i<arr.length;i++){
var oLi=document.createElement("li");
oLi.innerHTML="使用者名稱："+arr[i].username+" 密碼："+arr[i].password+".";
oUl.appendChild(oLi);
}
});
}
}
</script>
</head>
<body>
<input type="button" value="click" id="btn1"/>
<ul id="ul1">
<li>使用者名稱：張三 密碼：123456</li>
</ul>
</body>
</html>