我們已看到 AJAX 可被用來創(chuàng)建更多交互性的應(yīng)用程序。

AJAX Suggest實(shí)例

在下面的 AJAX 例子中，我們會演示當(dāng)用戶向一個(gè)標(biāo)準(zhǔn)的 HTML 表單中輸入數(shù)據(jù)時(shí)網(wǎng)頁如何與 web 服務(wù)器進(jìn)行通信。在下面的文本框中輸入名字：

First Name：

Suggestions：

例子解釋 - HTML表單

表單的 HTML 代碼：

<form> 
First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

正如您看到的，這是一個(gè)簡單的帶有名為 "txt1" 輸入域的 HTML 表單。輸入域的事件屬性定義了一個(gè)由 onkeyup 事件觸發(fā)的函數(shù)。

表單下面的段落包含了一個(gè)名為 "txtHint" 的 span，這個(gè) span 充當(dāng)了由 web 服務(wù)器所取回的數(shù)據(jù)的位置占位符。

當(dāng)用戶輸入數(shù)據(jù)時(shí)，名為 "showHint()" 的函數(shù)就會被執(zhí)行。函數(shù)的執(zhí)行是由 "onkeyup" 事件觸發(fā)的。另外需要說明的是，當(dāng)用戶在文本域中輸入數(shù)據(jù)時(shí)把手指從鍵盤按鍵上移開時(shí)，函數(shù) showHint 就會被調(diào)用。

例子解釋 - showHint() 函數(shù)

showHint() 函數(shù)是一個(gè)位于 HTML 頁面 head 部分的很簡單的 JavaScript 函數(shù)。

此函數(shù)包含以下代碼：

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

每當(dāng)有字符輸入文本框時(shí)，此函數(shù)就會執(zhí)行。

假如文本域中存在某些輸入，函數(shù)就會執(zhí)行：

定義回傳數(shù)據(jù)的服務(wù)器的 url(文件名)

使用文本框的內(nèi)容向 url 添加參數(shù)(q)

添加一個(gè)隨機(jī)的數(shù)字，以防止服務(wù)器使用某個(gè)已緩存的文件

創(chuàng)建一個(gè) XMLHTTP 對象，并告知此對象當(dāng)某個(gè)改變被觸發(fā)時(shí)執(zhí)行名為 stateChanged 的函數(shù)

向服務(wù)器發(fā)送一個(gè) HTTP 請求

如果輸入域?yàn)榭眨撕瘮?shù)僅僅會清空 txtHint 占位符的內(nèi)容

例子解釋 - GetXmlHttpObject() 函數(shù)

上面的例子可調(diào)用名為 GetXmlHttpObject() 的函數(shù)。

此函數(shù)的作用是解決為不同瀏覽器創(chuàng)建不同的 XMLHTTP 對象的問題。

這是此函數(shù)的代碼：

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() 函數(shù)

stateChanged() 函數(shù)包含下面的代碼：

function stateChanged() 
{ 
  if (xmlHttp.readyState==4)
  { 
  document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  }
}

每當(dāng) XMLHTTP 對象的狀態(tài)發(fā)生改變時(shí)，stateChanged() 函數(shù)就會執(zhí)行。

當(dāng)狀態(tài)變更為 4(“完成”)時(shí)，txtHint 占位符的內(nèi)容就被響應(yīng)文本來填充。

以上就是動力節(jié)點(diǎn)小編介紹的"AJAX請求實(shí)例"，希望對大家有幫助，如有疑問，請?jiān)诰€咨詢，有專業(yè)老師隨時(shí)為您服務(wù)。