什麼是 Ajax？——Ajax 核心要領

AJAX

1. 名詞解釋

   1、同步
   在一段時間內，只能做一件事情
   同步訪問：在訪問服務器時，客戶端只能等待服務器的響應，不能做其他事情，用戶體驗非常差
   代表場合：
   1、輸入網址訪問頁面
   2、a標記的默認跳轉
   3、submit按鈕的表單提交
   2、異步
   在一段時間內，能同時做多件事情。
   異步訪問：在向服務器發送請求時，不耽誤用戶在網頁上做其他的操作
   代表場合:
   1、用戶名的重複驗證
   2、聊天室
   3、股票走勢圖
   4、搜索建議(百度、京東、淘寶的搜索框)

2. 什麼是AJAX

Asynchronous Javascript And Xml
異步的 JS 和 xml
本質:使用JS提供的XMLHttpRequest對象異步的向服務器發送請求，並接受響應數據(格式是xml(已過時))
AJAX中服務器響應回來的是部分的數據，而不是完整的頁面，並且 可以以無刷新的效果來更改頁面中的局部內容

3. 獲取AJAX核心對象 – XMLHttpRequest

標準創建：var xhr=new XMLHttpRequest();
IE8 以下：
var xhr=new
ActiveXObject(“Microsoft.XMLHttp”);
允許通過window.XMLHttpRequest 判斷瀏覽器是否支持XMLHttpRequest( ),如果window.XMLHttpRequest的值是null的話，說明需要通過ActiveXObject（）創建，否則需要通過XMLHttpRequest（）來創建。
ex：
var xhr；
//判斷瀏覽器是否支持XMLHttpReaquest
if (window.XMLHttpRequest){
xhr=new XMLHttpRequest( );
}else{
//瀏覽器不支持XMLHttpRequest
xhr=new ActiveXObject（“Microsoft.XMLHttp”）;
}

4. XHR的 屬性 和 方法

• 1、open( ) – 方法

      作用：創建請求
      語法：open(method ,url , isAsyn )
          1、method ： 字符串類型
             請求方式：  get  post
          2、URL  ：字符串類型
             請求地址
          3、isAsyn ： Boolean 類型
             指定採用同步(false)還是異步(true)的方式發送請求
  

• 2、readyState – 屬性

        作用：表示xhr對象的請求狀態
        值： 由 0 — 4 ：表示 5個狀態
  
           0：請求尚未初始化
           1：已經打開到web服務器的連接，正在向服務器發送請求
           2：請求完成
           3：正在接收服務器端的響應
           4：表示接收響應數據成功
          注意：當readyState的值爲4的時候，表示所有的響應都已經接收完畢。
  

• 3、status – 屬性

       作用：服務器的響應狀態碼
       值：   200
        當status的值是200的時候，表示服務器已經正確的給出所有的響應
  

• 4、onreadystatechange - 事件

       作用：當xhr的readyState屬性值發生改變的時候，要自動激發的操作。
       語法：
          xhr.onreadystatechange = function( ){
          //每當xhr.readyState的值，發生變化時，要執行的操作
          //判斷xhr.readyState 爲4的時候並且xhr.status爲200的時候，才能獲取正常的響應數據
            if(xhr.readyState == 4 && xhr.status ==200){
               //可以接收響應回來的數據
               //responseText 屬性，表示服務器響應回來的文本
              var resText=xhr.responseText；
  

}
}

• 5、send（） - 方法

         作用：發送/提交請求
         語法：send( body);
             body : 是請求主體
            沒有請求主體的提交方式，body位置 處，要寫null
            由請求主體的提交方式，body位置處，編寫的就是請求主體的數據
  

5. 發送異步請求的步驟

       1、創建/獲取xhr的對象
       2、創建請求：  xhr.open（）
       3、設置xhr的 onreadystatechange  事件
           判斷readyState 以及 status的值，並接受響應
          xhr.onreadystatechange=function(){
   		if(xhr.readyState == 4 && xhr.status ==200){
   	xhr.responseText;
   	}
   }
        4、發送請求：  xhr.send（）
        練習：
            創建一個頁面06-ajax-ex.html，創建一個按鈕，點擊按鈕時，向06-ajax-ex.php 異步的發送一個請求，並將 響應 的數據(歡迎光臨) 顯示在頁面的一個div
       6、使用GET提交方式，發送請求數據
          在請求地址後，拼接請求參數(查詢字符串)
            ….
            xhr.open("get","xx.php?name=value&name1=value1",true);
            ….
          ex:
            xhr.open("get","check.php?uname=zs&upwd=123",true);
            在check.php中如何獲取uname 和upwd 的值？
            $uname=$_REQUEST["uname"];
            $upwd=$_REQUEST["upwd"];