1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <style> 6 td{ 7 width: 50px; 8 height: 10px; 9 } 10 </style> 11 </head> 12 <body> 13 <table id="peopleInfo"> 14 </table> 15 <script src="../JS/ajax.js"></script> 16 <script> 17 Ajax('test.txt?datetime=new Date.getTime',function(str){ 18 console.log(str); 19 var people=JSON.parse(str); 20 console.log(people[0].name); 21 var html="" 22 html+='<tr><td>姓名</td> <td>年齡</td> <td>性別</td></tr>'; 23 for(var i=0;i<3;i++){ 24 html+='<tr><td>'+people[i].name+'</td> <td>'+people[i].age+'</td> <td>'+people[i].sex+'</td> </tr>'; 25 } 26 var x=document.getElementById("peopleInfo"); 27 x.innerHTML =html; 28 //方法二 29 // var body = document.body; 30 // var div = document.createElement("table"); 31 // div.id = "mDiv"; 32 // body.appendChild(div); 33 },function(){ 34 alert('失敗了'); 35 }) 36 </script> 37 </body> 38 </html>
function Ajax(url,fnSucc,fnFaild) { //1.創建ajax對象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari var oAjax = new XMLHttpRequest(); //創建 XMLHttpRequest 對象 } else {// code for IE6, IE5 var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象： } //2.鏈接服務器（打開服務器的連接） //open(方法，文件名，異步傳輸) //open() 方法的 url 參數是服務器上文件的地址：該文件可以是任何類型的文件 oAjax.open('GET', url, true); //編碼格式，防止亂碼 oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //3.發送 oAjax.send(); //4.接收返回 //當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數： oAjax.onreadystatechange = function () { if (oAjax.readyState == 4) { if (oAjax.status == 200) { fnSucc(oAjax.responseText);//responseText 屬性返回字符串形式的響應 } else { fnFaild(oAjax.status); } }; }; }
常用方法介紹
open(method,url,async)
規定請求的類型、URL 以及是否異步處理請求。
method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）
send(string)
將請求發送到於 POST 請求服務器。
string：僅用
responseText 屬性返回字符串形式的響應，因此您可以這樣使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
callback 函數是一種以參數形式傳遞給另一個函數的函數。
如果您的網站上存在多個 AJAX 任務，那么您應該為創建 XMLHttpRequest 對象編寫一個標准的函數，並為每個 AJAX 任務調用該函數。
| 屬性 | 描述 |
| onreadystatechange | 存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。 |
| readyState | 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
|
| status | 200: "OK" 404: 未找到頁面 |