ajax簡介

一、概述

Ajax 即「Asynchronous Javascript And XML」（異步 JavaScript 和 XML），其實XML早已被JSon取代，由於Json更小。
經過在後臺與服務器進行少許數據交換，Ajax 可使網頁實現異步更新。
這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

二、格式

<script>    
 //涉及到的AJAX操做的頁面「不能」使用文件協議的方式訪問 
 //AJAX是一套API 核心提供的類型（構造函數）： XMLHttpRequest //xhr 用戶代理，就相似於瀏覽器的做用（發送請求接收響應）
 //建立 xhr 用戶代理 var xhr=new XMLHttpRequest() //設置請求行 xhr.open('GET','http://sample.php?name=zhangsan&age=18')
 //發送請求 xhr.send(null) //等待響應 xhr.onreadystatechange=function(){ //HTML5中能夠用onload事件
 //這個事件不僅是響應時觸發，狀態改變就觸發 if(this.readyState == 4 && this.status=200){ var result = this.responseText; document.querySelector("#result").innerHTML=this.responseText;
 } }  //下面是post方式請求：
 //建立請求代理 xhr  var xhr=new XMLHttpRequest()
  //設置請求行 xhr.open('post','http://sample.php')
  //設置請求頭 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

 //發送請求（傳入參數） xhr.send('name=zhangsan&age=18')
  //等待響應 xhr.onreadystatechange=function(){ //HTML5中能夠用onload事件
 //這個事件不僅是響應時觸發，狀態改變就觸發  if(this.status=200){  var result = this.responseText; document.querySelector("#result").innerHTML=this.responseText;
 }
 } </script>

 

 

readyState 狀態描述 說明

0 UNSENT 代理（XHR）被建立，但還沒有調用open()方法。
1 OPENED open()方法已經被調用，創建了鏈接。
2 HEADERS_RECEIVED send()方法已經被調用，而且能夠獲取狀態行和響應頭。
3 LOADING 響應體下載中，responseText屬性可能已經包含部分數據。
4 DONE 響應體如今完成，能夠直接使用responseText.

xhr.status:200 403 404 對應xhr.statusText:OK forbidden unfinded
xhr.getAllResponseHeaders() 獲取所有響應頭信息
xhr.getResponseHeader('key') 獲取指定頭信息
xhr.responseText、xhr.responseXML都表示響應主體

 

注意：GET和POST請求方式的區別:

一、GET沒有請求主體，使用xhr.send(null)
二、GET能夠經過在請求URL中添加請求參數
三、POST能夠經過xhr.send('name=zhangsan&age=18')
四、POST須要設置請求頭
五、GET效率高應用多，POST安全
六、GET大小限制4K，POST沒有限制