Ajax初識

Ajax定義

• Ajax：（Asynchronous JavaScript And XML）指異步 JavaScript 及 XML，實質上是就是用JavaScript的XMLHttpRequset對象實現的
• 它不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術，是基於JavaScript、XML、HTML、CSS、異步新用法
  
  

Ajax：只刷新局部頁面的技術

l JavaScript：更新局部的網頁

l XML：一般用於請求數據和響應數據的封裝

l XMLHttpRequest對象：發送請求到服務器並獲得返回結果（js中的）

l CSS：美化頁面樣式

l 異步：發送請求後不等返回結果，由回調函數處理結果

XMLHttpRequest對象&創建對象

關於XMLHttpRequset對象

• 定義：XMLHttpRequest對象是整個Ajax技術的核心，它提供了異步發送請求的能力
  
• 作用：用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新
• 支持：所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

創建XMLHttpRequest對象

由於IE5、IE6的兼容性問題，所以要視情況創建對象

function getAjax(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }

XMLHttpRequset 對象的相關API

方法

方法名	描述
open(method,URL,async)	建立與服務器的連接 method:提交方式（post/get） URL:提交的路徑 async:是否開啓異步（true/false）
send(context)	發送請求 context:參數（一般用於放post參數）
setRequsetHeader(header,value)	設置消息頭信息

屬性（一般用於處理結果時進行判斷）

1. readyState：XMLHttpRequest的狀態信息

狀態碼	說明
0	XMLHttpRequest對象沒有完成初始化 即：剛剛創建。
1	XMLHttpRequest對象開始發送請求 調用了open方法，但還沒有調用send方法。請求還沒有發出
2	XMLHttpRequest對象的請求發送完成 send方法已經調用，數據已經提交到服務器，但沒有任何響應
3	XMLHttpRequest對象開始讀取響應，還沒有結束 收到了所有的響應消息頭，但正文還沒有完全收到
4	XMLHttpRequest對象讀取響應結束 一切都收到了

2. status：HTTP的狀態碼

狀態碼	說明
200	服務器響應正常
400	無法找到請求資源
403	沒有訪問權限
404	訪問的資源不存在
500	服務器內部錯誤

3. responseText：獲得響應的文本內容
4. responseXML：獲得響應的XML文檔對象 documednt

請求

1. get請求

//1.創建XMLHttpRequset對象
function getAjax(){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function doAjax(){
    //獲取XMLHttpRequest對象
    var xmlHttp = getAjax();
    //2.監聽readyState狀態
    xmlHttp.onreadystatechange = function(){
        //5.成功後處理結果
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            vat text = xmlHttp.responseText;
        }
        //3.建立與服務器的連接
        xmlHttp.open("GET","/user?id=1001",true);
        //4. 發送數據給瀏覽器
        xmlHttp.send();
    }
}

1. post請求

//1.創建XMLHttpRequset對象
function getAjax(){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function doAjax(){
    //獲取XMLHttpRequest對象
    var xmlHttp = getAjax();
    //2.監聽readyState狀態
    xmlHttp.onreadystatechange = function(){
        //5.成功後處理結果
        if(xmlHttp.readyState==4&&xmlHttp.status==200){
            vat text = xmlHttp.responseText;
        }
        //3.建立與服務器的連接
        xmlHttp.open("Post","/user",true);
        //4. 發送數據給瀏覽器
        xmlHttp.send();
    }
}

區別：get直接通過URL傳值，Post通過send()傳值

案例

1. 用戶名驗證

   • 一般是在用戶進行註冊時
   • 在用戶名輸入框（input）上註冊一個觸發事件（如onChange（）、onKeyup()等）
   • 每當事件觸發時就調用ajax將用戶輸入的值傳給後臺校驗，
   • 然後將結果（一般是提示信息）反饋給ajax讓前臺展示。

2. 搜索提示

   原理差不多，將事件註冊在搜索框上，獲取用戶鍵入的值傳給後臺查詢數據庫，將結果反饋給ajax展示

3. 後臺json數據交互