原生ajax

ajax定義

Asynchronous JavaScript and XML，意思是異步JS和XML；

解釋下異步，異步是相對於同步來講的，同步即同時進行（累積多了就排隊，一個一個執行，必須等上一個結束，才能到下一個），而異步就是執行到我了，我去旁邊繼續執行等結果，後面排隊的繼續不用等我結果出來再執行。

 這是對於ajax的特色來設計的，由於ajax對後端數據的請求須要時間，而這個時間不利用起來就是浪費。固然，若是必需要等前一個的結果怎麼辦，這就使用到JS中的重要部分——回調函數了，其實回調在JS中應用不少，只是咱們對它沒有概念而已，像點擊事件執行的就是回調（先綁定事件，只有在點擊發生時，纔會執行）。那麼ajax也同樣，先請求數據，只有在狀態改變時纔會執行接下來的（這個狀態包括請求成功和請求失敗）。

ajax特色：AJAX 是一種用於建立快速動態網頁的技術，對網頁的某部分進行更新，不用刷新整個網頁。

經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁（不使用AJAX）若是須要更新內容，必需重載整個網頁面。

ajax工做原理

get請求

function btnClick() {
		//建立核心對象
		xmlhttp = null;
		if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//編寫回調函數
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				alert(xmlhttp.responseText)
			}
		}
		//open設置請求方式和請求路徑
		xmlhttp.open("get", "/Ajax/ajax2?username=張三");//一個servlet，後面還能夠寫是否同步
		//send 發送
		xmlhttp.send();
	}


複製代碼

POST請求

function btnClick() {
		//建立核心對象
		xmlhttp = null;
		if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//編寫回調函數
		xmlhttp.onreadystatechange = function() {
			/* 	alert(xmlhttp.readyState); */
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				alert(xmlhttp.responseText)
			}
			/* alert(123); */
		}
		//open設置請求方式和請求路徑
		xmlhttp.open("post", "/Ajax/ajax2");//一個servlet，後面還能夠寫是否同步
		//設置請求頭
		xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		//send 發送
		xmlhttp.send("username=張三");
	}


複製代碼

狀態說明

onreadystatechange表示請求狀態改變的事件觸發器

readystate表示請求狀態，4表示完成，具體以下表：

第一種說法

第二種說法

0：初始化，XMLHttpRequest對象尚未完成初始化

1：載入，XMLHttpRequest對象開始發送請求

2：載入完成，XMLHttpRequest對象的請求發送完成，已收到所有響應內容但還沒有解析

3：解析，XMLHttpRequest對象開始解析服務器的響應內容

4：完成，XMLHttpRequest對象讀取服務器響應結束

第三種說法

0 - (未初始化)尚未調用send()方法

1 - (載入)已調用send()方法，正在發送請求

2 - (載入完成)send()方法執行完成，

3 - (交互)正在解析響應內容

4 - (完成)響應內容解析完成，能夠在客戶端調用了

封裝一個ajax方法

function ajax(){ 
  var ajaxData = { 
    type: (arguments[0].type || "GET").toUpperCase(), 
    url: arguments[0].url || "", 
    async: arguments[0].async || "true", 
    data: arguments[0].data || null, 
    dataType: arguments[0].dataType || "json", 
    contentType: arguments[0].contentType || "application/x-www-form-urlencoded; charset=utf-8", 
    beforeSend: arguments[0].beforeSend || function(){}, 
    success: arguments[0].success || function(){}, 
    error: arguments[0].error || function(){} 
  } 

  ajaxData.beforeSend() 
  var xhr = createxmlHttpRequest();  
  xhr.responseType=ajaxData.dataType; 

  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);  
  xhr.setRequestHeader("Content-Type",ajaxData.contentType);  
  xhr.send(convertData(ajaxData.data));  

  xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
      if(xhr.status == 200){ 
        ajaxData.success(xhr.response) 
      }else{ 
        ajaxData.error() 
      }  
    } 
  }  
} 

function createxmlHttpRequest() {  
  if (window.ActiveXObject) {  
    return new ActiveXObject("Microsoft.XMLHTTP");  
  } else if (window.XMLHttpRequest) {  
    return new XMLHttpRequest();  
  }  
} 
  
function convertData(data){ 
  if( typeof data === 'object' ){ 
    var convertResult = "" ;  
    for(var c in data){  
      convertResult+= c + "=" + data[c] + "&";  
    }  
    convertResult=convertResult.substring(0,convertResult.length-1) 
    return convertResult; 
  }else{ 
    return data; 
  } 
}

ajax({ 
  type:"POST", 
  url:"ajax.php", 
  dataType:"json", 
  data:{
    "name":"abc",
    "age":123,
    "id":"456"
 }, 
  beforeSend:function(){ 
    //some js code 
  }, 
  success:function(msg){ 
    console.log(msg) 
  }, 
  error:function(){ 
    console.log("error") 
  } 
})
複製代碼

IE7及其以上版本中支持原生的 XHR 對象，所以能夠直接用： var oAjax = new XMLHttpRequest(); IE6及其以前的版本中，XHR對象是經過MSXML庫中的一個ActiveX對象實現的。使用下面的語句建立： var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

GET 請求方式是經過URL參數將數據提交到服務器的，POST則是經過將數據做爲 send 的參數提交到服務器；POST 請求中，在發送數據以前，要設置表單提交的內容類型；