標籤：style http io ar color os 使用 sp java
（功能）ajax能且僅能 從伺服器讀取檔案（環境）需要伺服器環境才能測試，可以用工具建立本機伺服器環境（緩衝）解決緩衝問題：url加時間戳記讓每次請求地址唯一，如 url=‘abc.txt?t=‘+new Date().getTime();（編碼）請求的檔案必須與網頁的編碼一致，否則亂碼（處理）eval()處理請求結果很方便，自動分割。但據說eval有很多問題，除了ajax中，其它地方暫時不要亂用。（執行個體）請求資料並在同一個塊內顯示、json資料處理、分頁資料請求 ajax函數四步：1.建立ajax對象2.串連伺服器3.發送請求4.接收返回 //用一個不存在的變數：出錯
//用一個不存在的屬性：undefined ajax封裝函數(可以直接使用)：// 開始----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------function ajax(url, fnSucc, fnFaild){
//1.建立ajax對象
var oAjax=null;
if(window.XMLHttpRequest){ // 對ie6來說，window.XMLHttpRequest 是一個undefined屬性，為假；其它瀏覽器是存在的，為真。若此處為 XMLHttpRequest ，則ie6中無法通過，報錯。
oAjax=new XMLHttpRequest(); // ie6不認
}else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6專屬
}
//2.串連伺服器
oAjax.open(‘GET‘, url, true); //open(方法, url, 是否非同步)
//3.發送請求
oAjax.send();
//4.接收返回
//OnReadyStateChange
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){ //請求狀態已完成：0未初始化、1發送請求、2收到全部響應內容、3對加密內容解析、4內容解析完成可以使用了
if(oAjax.status==200){ //請求結果：已經成功擷取指定url的內容。
fnSucc(oAjax.responseText); //設定解析完的結果為傳入的成功函數的參數，使用後續函數操作
}else{
if(fnFaild){ //如果擷取內容失敗且存在失敗時處理函數，則執行
fnFaild();
}
}
}
};
}// 結束---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 請求狀態監控
onreadystatechange事件
readyState屬性：請求狀態
0（未初始化）還沒有調用open()方法
1（載入）已調用send()方法，正在發送請求
2（載入完成）send()方法完成，已收到全部響應內容
3（解析）正在解析響應內容
4（完成）響應內容解析完成，可以在用戶端調用了
status屬性：請求結果（200：成功； 404、300+、500+：都是有錯誤，如未找到檔案）
responseText：請求得到的內容 // 簡單ajax()使用(加時間戳記) =============================================================// 須先引入上面封裝的ajax()函數window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function(){
ajax(‘abc.txt?t=‘+new Date().getTime(),function(str){
alert(str);
});
};
} // 向伺服器請求 1.txt 2.txt 3.txt並顯示到同一個內容框裡 =======================================// 須先引入上面封裝的ajax()函數window.onload=function (){
var aBtn=document.getElementsByTagName(‘input‘);
var oDiv=document.getElementById(‘div1‘);
var i=0;
for(i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function (){
ajax(this.index+1+‘.txt?t=‘+new Date().getTime(), function (str){ //function(str){}成功後執行的匿名函數。 oDiv.innerHTML=str;
});
};
}
}; // eval()對結果進行分割處理 ===========================================================// 普通數組資料處理window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function(){
ajax(‘data.txt?t=‘+new Date().getTime(),function(str){
//str->‘[1,2,3,4]‘
var arr=eval(str);
alert(arr[3]); //此時結果為4。若不進行eval()處理那麼返回的結果是一個字串，結果為2
});
};
} // json資料處理window.onload=function(){
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function(){
ajax(‘data.json?t=‘+new Date().getTime(),function(str){
//str-> [{a: 12, b: 5}, {a: 8, b: 9}]
var arr=eval(str);
alert(arr[0].b); //此時結果為5。eval()對資料分割成多維陣列
});
};
} // 分頁資料請求 ====================================================================// 須先引入上面封裝的ajax()函數window.onload=function(){
var oUl=document.getElementById(‘ul1‘);
var aBtn=document.getElementsByTagName(‘a‘);
var i=0;
for(i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
// 需要請求的三個檔案名稱為：page1.txt page2.txt page3.txt
ajax(‘page‘+(this.index+1)+‘.txt?t=‘+new Datd().getTime(),function(str){
var aData=eval(str);
oUl.innerHTML=‘‘;
for(i=0;i<aData.length;i++){
var oLi=document.createElement(‘li‘);
//page1.txt中的資料為：[{user: ‘blue‘, pass: ‘123‘}, {user: ‘aaa‘, pass: ‘jjfhier‘}, {user: ‘leo‘, pass: ‘123456‘}] （另兩個類似）
oLi.innerHTML=‘<strong>‘+aData[i].user+‘</strong><i>‘+aData[i].pass+‘</i>‘; //此處輸出格式根據需要更改
oUl.appendChild(oLi);
}
});
};
}
}
<body>
<ul id="ul1">
</ul>
<a href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
</body>
妹味6：ajax與ajax封裝
