【轉】Javascript原生Ajax請求

時間 2019-12-07

標籤 javascript 原生 ajax 請求欄目 JavaScript 简体版

原文原文鏈接

什麼是 ajax
ajax 即「Asynchronous JavaScript and XML」（異步 JavaScript 和 XML），也就是無刷新數據讀取。
http 請求
首先須要瞭解 http 請求的方法（GET 和 POST）。
GET 用於獲取數據。GET 是在 URL 中傳遞數據，它的安全性低，容量低。
POST 用於上傳數據。POST 安全性通常，容量幾乎無限。
ajax 請求
ajax 請求通常分紅 4 個步驟。
一、建立 ajax 對象
在建立對象時，有兼容問題：javascript

var oAjax = new XMLHttpRequest();   //for ie6 以上
var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6

合併上面的代碼：html

1 var oAjax = null; 2 if(window.XMLHttpRequest){ 3     oAjax = new XMLHttpRequest(); 4 }else{ 5     oAjax = new ActiveXObject('Microsoft.XMLHTTP'); 6 }

二、鏈接服務器
在這裏會用到 open() 方法。open() 方法有三個參數，第一個參數是鏈接方法即 GET 和 POST，第二個參數是 URL 即所要讀取數據的地址，第三個參數是否異步，它是個布爾值，true 爲異步，false 爲同步。java

1 oAjax.open('GET', url, true);

三、發送請求
send() 方法。ajax

1 oAjax.send();

四、接收返回值
onreadystatechange 事件。當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState：請求狀態，返回的是整數（0-4）。
0（未初始化）：尚未調用 open() 方法。
1（載入）：已調用 send() 方法，正在發送請求。
2（載入完成）：send() 方法完成，已收到所有響應內容。
3（解析）：正在解析響應內容。
4（完成）：響應內容解析完成，能夠在客戶端調用。
status：請求結果，返回 200 或者 404。
200 => 成功。
404 => 失敗。
responseText：返回內容，即咱們所須要讀取的數據。須要注意的是：responseText 返回的是字符串。安全

 1 oAjax.onreadystatechange=function(){  2     if(oAjax.readyState==4){  3         if(oAjax.status==200){  4  fnSucc(oAjax.responseText);  5         }else{  6             if(fnFaild){  7  fnFaild();  8  }  9  } 10  } 11 };

將以上代碼進行封裝：服務器

 1 function ajax(url, fnSucc, fnFaild){  2     //1.建立對象
 3     var oAjax = null;  4     if(window.XMLHttpRequest){  5         oAjax = new XMLHttpRequest();  6     }else{  7         oAjax = new ActiveXObject("Microsoft.XMLHTTP");  8  }  9       
10     //2.鏈接服務器 
11     oAjax.open('GET', url, true);   //open(方法, url, 是否異步)
12       
13     //3.發送請求 
14  oAjax.send(); 15       
16     //4.接收返回
17     oAjax.onreadystatechange = function(){  //OnReadyStateChange事件
18         if(oAjax.readyState == 4){  //4爲完成
19             if(oAjax.status == 200){    //200爲成功
20  fnSucc(oAjax.responseText) 21             }else{ 22                 if(fnFaild){ 23  fnFaild(); 24  } 25  } 26  } 27  }; 28 }

最後附上實例：異步

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax基礎</title>
 6 </head>
 7 <body>
 8     點擊按鈕的時候，讀取abc.txt<input id="btn" type="button" value="讀取"/><br/>
 9     <div id="con"></div>
10 </body>
11 </html>
12 <script type="text/javascript" src="ajax.js"></script>
13 <script type="text/javascript">
14 window.onload = function(){ 15     var oBtn = document.getElementById('btn'); 16     var oCon = document.getElementById('con'); 17  oBtn.onclick = function(){ 18  ajax('abc.txt',function(str){ 19  oCon.innerHTML = str; 20  }); 21  } 22 } 23 </script>