我們已看到 ajax 可被用來創建更多交互性的應用程序。

ajax suggest實例

在下面的 ajax 例子中，我們會演示當用戶向一個標準的 html 表單中輸入數據時網頁如何與 web 服務器進行通信。

在下面的文本框中輸入名字：

suggestions：

例子解釋 - html表單

表單的 html 代碼：

<form> first name:<input type="text" id="txt1" onkeyup="showhint(this.value)" /></form><p>suggestions: <span id="txthint"></span></p> 

正如您看到的，這是一個簡單的帶有名為 "txt1" 輸入域的 html 表單。輸入域的事件屬性定義了一個由 onkeyup 事件觸發的函數。

表單下面的段落包含了一個名為 "txthint" 的 span，這個 span 充當了由 web 服務器所取回的數據的位置占位符。

當用戶輸入數據時，名為 "showhint()" 的函數就會被執行。函數的執行是由 "onkeyup" 事件觸發的。另外需要說明的是，當用戶在文本域中輸入數據時把手指從鍵盤按鍵上移開時，函數 showhint 就會被調用。

例子解釋 - showhint() 函數

showhint() 函數是一個位于 html 頁面 head 部分的很簡單的 javascript 函數。

此函數包含以下代碼：

function showhint(str){  if (str.length==0)    {     document.getelementbyid("txthint").innerhtml="";    return;    }  xmlhttp=getxmlhttpobject()    if (xmlhttp==null)    {    alert ("您的瀏覽器不支持ajax！");    return;    }var url="gethint.asp";url=url+"?q="+str;url=url+"&sid="+math.random();xmlhttp.onreadystatechange=statechanged;xmlhttp.open("get",url,true);xmlhttp.send(null);}

每當有字符輸入文本框時，此函數就會執行。

假如文本域中存在某些輸入，函數就會執行：

• 定義回傳數據的服務器的 url（文件名）
• 使用文本框的內容向 url 添加參數（q）
• 添加一個隨機的數字，以防止服務器使用某個已緩存的文件
• 創建一個 xmlhttp 對象，并告知此對象當某個改變被觸發時執行名為 statechanged 的函數
• 向服務器發送一個 http 請求
• 如果輸入域為空，此函數僅僅會清空 txthint 占位符的內容

例子解釋 - getxmlhttpobject() 函數

上面的例子可調用名為 getxmlhttpobject() 的函數。

此函數的作用是解決為不同瀏覽器創建不同的 xmlhttp 對象的問題。

這是此函數的代碼：

function getxmlhttpobject(){  var xmlhttp=null;  try    {    // firefox, opera 8.0+, safari    xmlhttp=new xmlhttprequest();    }  catch (e)    {    // internet explorer    try      {      xmlhttp=new activexobject("msxml2.xmlhttp");      }    catch (e)      {      xmlhttp=new activexobject("microsoft.xmlhttp");      }    }  return xmlhttp;}

例子解釋 - statechanged() 函數

statechanged() 函數包含下面的代碼：

function statechanged() {   if (xmlhttp.readystate==4)  {   document.getelementbyid("txthint").innerhtml=xmlhttp.responsetext;  }}

每當 xmlhttp 對象的狀態發生改變時，statechanged() 函數就會執行。

當狀態變更為 4（“完成”）時，txthint 占位符的內容就被響應文本來填充。