原生JS寫Ajax
阿新 • • 發佈：2018-12-18
打電話的流程 1.手機 2.撥號 3.說話 4.聽 從伺服器上取資料 1.建立ajax物件 2.連線到伺服器 3.傳送請求 4.接收返回值
html檔案的程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="new_ajax.js"></script> <script> window.onload=function () { var oBtn=document.getElementById("btn1"); oBtn.onclick=function () { ajax("a.txt",function (str) { alert(str); }) } } </script> </head> <body> <button id="btn1">讀取</button> </body> </html> JS檔案，命名為new_ajax.js的程式碼 function ajax(url,fnSucc,fnFaild) { // 1.建立Ajax物件 // 非IE6 // var oAjax=new XMLHttpRequest(); // alert(oAjax); // IE6 // var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); // alert(oAjax); /* 為什麼要寫window.XMLHttpRequest而不是XMLHttpRequest而不是？ 在JS中，變數即是window的屬性。 alert(a);報錯 alert(window.a);undefined 那麼如果寫成 if(XMLHttpRequest)，將會直接報錯，而寫成if(window.XMLHttpRequest)才能正常判斷 * */ if(window.XMLHttpRequest) { var oAjax=new XMLHttpRequest(); } else { var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } // 2.連線伺服器 // open(方法：GET/POST,檔名) /* * 同步：事件一件一件來 * 非同步：多個事情可以一起做（剛好和人們的正常思維相反） * Ajax一般用非同步方式，若用同步，在向伺服器傳送請求的時候什麼也做不了,true代表非同步 * */ oAjax.open('GET',url,true); // 3.傳送請求 oAjax.send(); // 4.接收返回 oAjax.onreadystatechange=function () { // oAjax.readyState //瀏覽器和伺服器，進行到哪一步了 /* 0 (未初始化)還沒有呼叫open方法 1（載入）已呼叫send()方法，正在傳送請求 2（載入完成）send()方法完成，已收到全部響應內容 3（解析）正在解析響應內容 4（完成）響應內容解析完成，可以在客戶端呼叫了 * */ if(oAjax.readyState==4)//讀取完成，完成不代表成功 { if(oAjax.status==200) //成功 { fnSucc(oAjax.responseText); } else { if(fnFaild) { fnFaild(oAjax.status); } } } } }