標籤：
什麼是 ajaxajax 即“Asynchronous JavaScript and XML”（非同步 JavaScript 和 XML），也就是無重新整理資料讀取。
http 請求首先需要瞭解 http 請求的方法（GET 和 POST）。
GET 用於擷取資料。GET 是在 URL 中傳遞資料，它的安全性低，容量低。
POST 用於上傳資料。POST 安全性一般，容量幾乎無限。
ajax 請求ajax 請求一般分成 4 個步驟。
1、建立 ajax 對象在建立對象時，有相容問題：
var oAjax = new XMLHttpRequest(); //for ie6 以上var oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘); //for ie6
合并上面的代碼：
var oAjax = null;if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest();}else{ oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘);}2、串連伺服器
在這裡會用到 open() 方法。open() 方法有三個參數，第一個參數是串連方法即 GET 和 POST，第二個參數是 URL 即所要讀取資料的地址，第三個參數是否非同步，它是個布爾值，true 為非同步，false 為同步。
oAjax.open(‘GET‘, url, true);3、發送請求
send() 方法。
oAjax.send();4、接收傳回值
onreadystatechange 事件。當請求被發送到伺服器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState：請求狀態，返回的是整數（0-4）。
0（未初始化）：還沒有調用 open() 方法。
1（載入）：已調用 send() 方法，正在發送請求。
2（載入完成）：send() 方法完成，已收到全部響應內容。
3（解析）：正在解析響應內容。
4（完成）：響應內容解析完成，可以在用戶端調用。
status：請求結果，返回 200 或者 404。
200 => 成功。
404 => 失敗。
responseText：返回內容，即我們所需要讀取的資料。需要注意的是：responseText 返回的是字串。
oAjax.onreadystatechange=function(){ if(oAjax.readyState==4){ if(oAjax.status==200){ fnSucc(oAjax.responseText); }else{ if(fnFaild){ fnFaild(); } } }};
將以上代碼進行封裝：
function ajax(url, fnSucc, fnFaild){ //1.建立對象 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); }else{ oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.串連伺服器 oAjax.open(‘GET‘, url, true); //open(方法, url, 是否非同步) //3.發送請求 oAjax.send(); //4.接收返回 oAjax.onreadystatechange = function(){ //OnReadyStateChange事件 if(oAjax.readyState == 4){ //4為完成 if(oAjax.status == 200){ //200為成功 fnSucc(oAjax.responseText) }else{ if(fnFaild){ fnFaild(); } } } };}
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>ajax基礎</title></head><body> 點擊按鈕的時候，讀取abc.txt<input id="btn" type="button" value="讀取"/><br/> <div id="con"></div></body></html><script type="text/javascript" src="ajax.js"></script><script type="text/javascript">window.onload = function(){ var oBtn = document.getElementById(‘btn‘); var oCon = document.getElementById(‘con‘); oBtn.onclick = function(){ ajax(‘abc.txt‘,function(str){ oCon.innerHTML = str; }); }}</script>
abc.txt 內容：
這是ajax調用的內容1。這是ajax調用的內容2。這是ajax調用的內容3。
參考
【javascript】ajax 基礎
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
