DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> AJAX教程(9):AJAX 請求 源代碼
AJAX教程(9):AJAX 請求 源代碼
編輯:關於JavaScript     

AJAX Suggest 源代碼的實例

下面的源代碼屬於上一節的 AJAX 實例。

您可以拷貝粘貼這些代碼,然後親自測試一下。

AJAX HTML 頁面

這是 HTML 頁面。它包含了一個簡單的 HTML 表單,以及一個指向 JavaScript 的鏈接。

<html>
<head>
<script src="clienthint.js"></script> 
</head>

<body>

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

<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

下面列出了 JavaScript 代碼。

AJAX JavaScript

這是 JavaScript 代碼,存儲在文件 "clienthint.js" 中:

var xmlHttp

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

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

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

AJAX 服務器頁面 - ASP 和 PHP

其實不存在什麼“AJAX 服務器”。AJAX 頁面可以由任一因特網服務器提供服務。

在上一節的例子中被 JavaScript 調用的服務器頁面是一個簡單的名為 "gethint.asp" 的 ASP 文件。

下面我們列出了這個服務器頁面代碼的實例,使用 ASP 來編寫。

AJAX ASP 實例

"gethint.asp" 頁面中的代碼針對 IIS 使用 VBScript 編寫。它會檢查一個名字數組,然後向客戶端返回相應的名字:

<%
response.expires=-1
dim a(30)

'用名字為數組賦值
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'從URL取得參數q
q=ucase(requ

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