DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AJAX教程(8):AJAX 請求實例
AJAX教程(8):AJAX 請求實例
編輯:關於JavaScript     

我們已看到 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 占位符的內容就被響應文本來填充。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved