【Ajax 基礎學習】

今天簡單的學習了 Ajax 的基礎知識，總結在這裏。部分代碼不是原創，特此說明。

【Ajax 簡介】

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。有不少使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。例如當咱們在谷歌的搜索框輸入關鍵字時，JavaScript 會把這些字符發送到服務器，而後服務器會返回一個搜索建議的列表。以下圖所示：

 

【XMLHttpRequest】

首先咱們介紹 XMLHttpRequest 。XMLHttpRequest 是 AJAX 的基礎。爲了應對全部的現代瀏覽器，包括 IE5 和 IE6，在建立 XMLHttpRequest 對象以前，咱們須要檢查瀏覽器是否支持 XMLHttpRequest 對象。若是支持，則建立 XMLHttpRequest 對象。若是不支持，則建立 ActiveXObject，代碼以下：

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');
}

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open(method,url,async);
xmlhttp.send();

這裏的 open 方法有三個參數，分別是 method, url, async, 表明以下意思：

method ：規定請求的類型，有 GET 和 POST 兩種

url ：請求的服務器文件的 url 

async ：規定是否異步處理請求，true（異步）或 false（同步）

如需得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。若是來自服務器的響應並不是 XML，請使用 responseText 屬性。若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，請使用 responseXML 屬性。

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。下面是 XMLHttpRequest 對象的三個重要的屬性：

 

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 服務器鏈接已創建 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

 

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

【Ajax 實例】

如今咱們建立一個相似 google 的搜索框，達到以下的效果：

 

 

 

 

 

 

咱們在搜索框內輸入內容，服務器自動分析已有內容進行匹配。首先咱們建立 HTML 頁面，代碼以下：

<h1>請在下面的輸入框內鍵入字母(A - Z)</h1>
<form action="">
    姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>建議：<span id="txtHint"></span></p>

javascript 代碼以下：

//定義相應 onkeyup 的函數
function showHint(str){
    var xmlhttp;
    //若是用戶輸入內容爲空，HTML 頁面不顯示任何數據
    if(str.length == 0){
        document.getElementById('txtHint').innerHTML = '';
        return;
    }
    //檢查瀏覽器是否支持 XMLHttpRequest 對象
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }
    else{
        xmlhttp = ActiveXObject('Microsoft.XMLHTTP');
    }
    //規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById('txtHint').innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open('GET','eg22.php?q='+str,true);
    xmlhttp.send();
}

能夠看到咱們在請求 eg22.php 頁面的信息，相應的 PHP 頁面代碼以下：

<?php
// 用名字來填充數組
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//得到來自 URL 的 q 參數
$q=$_GET["q"];

//若是 q 大於 0，則查找數組中的全部提示
if (strlen($q) > 0)
  {
  $hint="";
  for($i=0; $i<count($a); $i++)
    {
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      {
      if ($hint=="")
        {
        $hint=$a[$i];
        }
      else
        {
        $hint=$hint." , ".$a[$i];
        }
      }
    }
  }

// 若是未找到提示，則把輸出設置爲 "no suggestion"
// 不然設置爲正確的值
if ($hint == "")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//輸出響應
echo $response;
?>

源代碼解釋：

若是輸入框爲空 (str.length==0)，則該函數清空 txtHint 佔位符的內容，並退出函數。

若是輸入框不爲空，showHint() 函數執行如下任務：

• 建立 XMLHttpRequest 對象
• 當服務器響應就緒時執行函數
• 把請求發送到服務器上的文件
• 請注意咱們向 URL 添加了一個參數 q （帶有輸入框的內容）

到目前爲止咱們已經完成了目標工做。須要注意的一點是，若是使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面便可。