AJAX

AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

一、AJAX 簡介

1.1 什麼是 AJAX ？

AJAX = 異步 JavaScript 和 XML。

AJAX 是一種用於創建快速動態網頁的技術。

通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

1.2 AJAX是基於現有的Internet標準

AJAX是基於現有的Internet標準，並且聯合使用它們：

XMLHttpRequest 對象 (異步的與服務器交換數據)JavaScript/DOM (信息顯示/交互)CSS (給數據定義樣式)XML (作爲轉換數據的格式)lamp AJAX應用程序與瀏覽器和平臺無關的！

二、AJAX - 創建 XMLHttpRequest 對象

XMLHttpRequest 是 AJAX 的基礎。

2.1 XMLHttpRequest 對象

所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

2.2 創建 XMLHttpRequest 對象

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

爲了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執行代碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

再次對代碼進行修改 兼容代碼封裝進函數調用

<script>
    var btu = document.getElementById('btu');
    btu.onclick = function(){
        //封裝進函數供其他程序調用
        function cXHR(){
            try{return new XMLHttpRequest()}catch(e){};
            try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){};
        }
        alert(cXHR());
    }
</script>

三、AJAX - 向服務器發送請求請求

XMLHttpRequest 對象用於和服務器交換數據。

3.1 向服務器發送請求

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

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	規定請求的類型、URL 以及是否異步處理請求。
send(string)	將請求發送到服務器

open(method,url,async)

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）默認爲異步

send(string)

string：僅用於 POST 請求

3.2 判斷用戶名沒有沒佔用：

前臺代碼

<body>
    <input type="text" value="" id="names"> 
    <span id="tip"></span>
</body>
<script src="createXHR.js"></script>
<script>
    var inp = gid('names');
    inp.onblur = function(){
        var xhr = cXHR();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                // alert(xhr.responseText);
                if(xhr.responseText==1){
                    var h = '<font color="red">用戶名已經被佔用</font>';
                    gid('tip').innerHTML = h;
                }else{
                    var h = '<font color="green">用戶名可用</font>';
                    gid('tip').innerHTML = h;
                }
            }
        }
        xhr.open('get','03-1.php?names='+inp.value);
        xhr.send();
    }
</script>

後臺PHP代碼

$v = $_GET['names'];
//鏈接數據，查詢是否存在用戶名 //此步驟省略
if($v == 'admin'){
    echo 1;
}else{
    echo 0;
}

3.3 GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）向服務器發送大量數據（POST 沒有數據量限制）發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

3.4 GET 請求

//一個簡單的 GET 請求：
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

在上面的例子中，你可能得到的是緩存的結果。

爲了避免這種情況，請向 URL 添加一個唯一的 ID：

//實例
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

如果你希望通過 GET 方法發送信息，請向 URL 添加信息：

//實例
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

3.5 POST 請求

//一個簡單 POST 請求：
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定你希望發送的數據：

//實例
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value)

向請求添加 HTTP 頭。

header: 規定頭的名稱
value: 規定頭的值

3.6 url - 服務器上的文件

open() 方法的 url 參數是服務器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

該文件可以是任何類型的文件，比如 .txt 和 .xml，或者服務器腳本文件，比如 .asp 和 .php （在傳回響應之前，能夠在服務器上執行任務）。

3.7 異步 - True 或 False？

AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true：

xmlhttp.open("GET","ajax_test.html",true);

對於 web 開發人員來說，發送異步請求是一個巨大的進步。很多在服務器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程序掛起或停止。

通過 AJAX，JavaScript 無需等待服務器的響應，而是：

在等待服務器響應時執行其他腳本當響應就緒後對響應進行處理

3.8 Async=true

當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

實例
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

3.9 Async = false

如需使用 async=false，請將 open() 方法中的第三個參數改爲 false

xmlhttp.open("GET","test1.txt",false);

我們不推薦使用 async=false，但是對於一些小型的請求，也是可以的。

請記住，JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢，應用程序會掛起或停止。

注意：當你使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：

實例

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

四、緩存問題

4.1 緩存的產生

在Ajax的get請求中，如果運行在IE內核的瀏覽器下，其如果向同一個url發送多次請求時，就會產生所謂的緩存問題。緩存問題最早設計初衷是爲了加快應用程序的訪問速度，但是其會影響Ajax實時的獲取服務器端的數據。

4.2 客戶端解決緩存問題

產生緩存的問題就是我們的客戶端向同一個 url 發送了多次請求；如果我們每次請求的url不同，那麼，緩存問題就不會存在了；

我們可以在請求地址的後面加上一個無意義的參數，參數值使用隨機數即可，那麼每次請求都會產生隨機數，URL就會不同，緩存問題就被解決了；

Math.random()：返回 0--1 之間的隨機數，包括 0 但不包括 1；

修改代碼如下：

var url = '03-1.php?names='+inp.value+'&_='+Math.random();
xhr.open('get',url);

但是，隨機數雖然解決了問題，但是，我們不能保證每次生成的隨機數都不一樣；也就是說，使用隨機數存在一定的隱患；

new Date().getTime() ：獲取當前時間的毫秒時間戳修改代碼如下：

var url = '03-1.php?names='+inp.value+'&_='+new Date().getTime();
xhr.open('get',url);

4.3 設置響應頭禁用客戶端緩存

服務器端在相應客戶端請求時，可以設置相應頭詳細，如：header(‘Content-type:text/html; charset=utf-8’) ：告訴客戶端瀏覽器，使用utf-8的編碼格式解析頁面信息。

在php代碼中添加一下代碼：

//告訴客戶端瀏覽器不要緩存數據
header("Cache-Control: no-cache");

五、AJAX - 服務器響應

5.1 服務器響應

如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字符串形式的響應數據。
responseXML	獲得 XML 形式的響應數據。

5.2 responseText 屬性

如果來自服務器的響應並非 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應，因此你可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

5.3 responseXML 屬性

如果來自服務器的響應是 XML，而且需要作爲 XML 對象進行解析，請使用 responseXML 屬性：

請求 cd_catalog.xml 文件，並解析響應：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

cd_catalog.xml文件如下:

<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>   
</CATALOG>

六、AJAX - onreadystatechange 事件

6.1 onreadystatechange 事件

當請求被髮送到服務器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態信息。

下面是 XMLHttpRequest 對象的三個重要的屬性：

屬性	描述
onreadystatechange	存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
status	200: "OK" 404: 未找到頁面

readyState：從 0 到 4 發生變化。

0：請求未初始化（還沒有調用 open()）。
1：請求已經建立，但是還沒有發送（還沒有調用 send()）。
2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。
4：響應已完成；你可以獲取並使用服務器的響應了。

在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。

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

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

注意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應着 readyState 的每個變化。

6.2 使用回調函數

回調函數是一種以參數形式傳遞給另一個函數的函數。

如果你的網站上存在多個 AJAX 任務，那麼你應該爲創建 XMLHttpRequest 對象編寫一個標準的函數，併爲每個 AJAX 任務調用該函數。

該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

七、AJAX/PHP 實例

7.1 showHint() 函數

當用戶在上面的輸入框中鍵入字符時，會執行函數 "showHint()" 。該函數由 "onkeyup" 事件觸發：

function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 瀏覽器執行代碼
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}

源代碼解析：

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

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

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

7.2 AJAX 服務器頁面--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";
//從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;
?>

八、AJAX Database 實例

AJAX 可用來與數據庫進行動態通信。

8.1 實例解釋 - showCustomer() 函數

當用戶在下拉列表中選擇某個客戶時，會執行名爲 "showCustomer()" 的函數。該函數由 "onchange" 事件觸發：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 瀏覽器執行代碼
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客戶信息將顯示在這...</div>

</body>
</html>

showCustomer() 函數執行以下任務：

檢查是否已選擇某個客戶
創建 XMLHttpRequest 對象
當服務器響應就緒時執行所創建的函數
把請求發送到服務器上的文件
請注意我們向 URL 添加了一個參數 q （帶有輸入域中的內容）

8.2 AJAX 服務器頁面

由上面的 JavaScript 調用的服務器頁面是 PHP 文件，名爲 "getcustomer.php"。

response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
 for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")

九、AJAX XML 實例

AJAX 可用來與 XML 文件進行交互式通信。

當用戶點擊上面的"獲取我收藏的 CD"這個按鈕，就會執行 loadXMLDoc() 函數。

loadXMLDoc() 函數創建 XMLHttpRequest 對象，添加當服務器響應就緒時執行的函數，並將請求發送到服務器。

當服務器響應就緒時，會構建一個 HTML 表格，從 XML 文件中提取節點（元素），最後使用 XML 數據的填充 id="demo" 的表格元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>
<body>

<h1>XMLHttpRequest 對象</h1>

<button type="button" onclick="loadXMLDoc()">獲取我收藏的 CD</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

AJAX 介紹