AJAX 請求執行個體

來源:互聯網
上載者:User
AJAX Suggest執行個體

在下面的 AJAX 例子中,我們會示範當使用者向一個標準的 HTML 表單中輸入資料時網頁如何與 網頁伺服器進行通訊。

在下面的文字框中輸入名字:

Suggestions:no suggestion

例子解釋 - 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 充當了由 網頁伺服器所取回的資料的位置預留位置。

當使用者輸入資料時,名為 "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 預留位置的內容就被響應文本來填充。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.