AJAX Basic

AJAX基础

AJAX HOME
AJAX首页
 AJAX Intro
AJAX简介
 AJAX Request
AJAX请求
 AJAX Example
AJAX实例
 AJAX Browsers
AJAX浏览器
 AJAX XMLHttpRequest
AJAX XMLHttpRequest对象
 AJAX Server
AJAX服务器端
 AJAX Server Script
AJAX服务器脚本

AJAX Advanced

AJAX高阶

AJAX Suggest
AJAX建议
 AJAX Source
AJAX源码
 AJAX Database
AJAX数据库
 AJAX XML File
AJAX XML文件
 AJAX ResponseXML
AJAX响应XML

AJAX Examples

AJAX范例

AJAX Examples
AJAX范例

AJAX Suggest Source Code

AJAX建议源码

AJAX source code to Suggest example

AJAX建议功能例子的源码

The source code below belongs to the AJAX example on the previous page.

如下的代码是上一页的AJAX建议例子的源码。

You can copy and paste it, and try it yourself.

您可以拷贝和粘贴，自己去试一试。

The AJAX HTML page

AJAX HTML网页

This is the HTML page. It contains a simple HTML form and a link to a JavaScript.

这是HTML网页，它包含一个简单的HTML表单和一个JavaScript连接。

<html>
<head>
<script src="clienthint.js"></script> //clienthint 客户端提示.js
</head>
<body>

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

</body>
</html>

The AJAX JavaScript

AJAX JavaScript

This is the JavaScript code, stored in the file "clienthint.js":

这是一段JavaScript代码，存储于“clienthint.js”文件中：

var xmlhttp

function showHint(str)
{
if (str.length==0)
　 {
　 document.getElementById("txtHint").innerHTML="";
　 return;
　 }
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
　 {
　 alert ("Your browser does not support XMLHTTP!");
　 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()
{
if (window.XMLHttpRequest)
　 {
　 // code for IE7+, Firefox, Chrome, Opera, Safari
　 return new XMLHttpRequest();
　 }
if (window.ActiveXObject)
　 {
　 // code for IE6, IE5
　 return new ActiveXObject("Microsoft.XMLHTTP");
　 }
return null;
}

The AJAX server page - ASP and PHP

AJAX服务器端页面 - ASP和PHP

There is no such thing as an AJAX server. AJAX pages can be served by any internet server.

根本没有AJAX服务器。AJAX网页可以在任何互联网服务器上运行。

The server page called by the JavaScript in the example from the previous chapter is a simple ASP file called "gethint.asp".

前一章节例子中JavaScript伺服网页用一个简单的ASP文件“gethint.asp”实现。

Below we have listed two examples of the server page code, one written in ASP and one in PHP.

下面我们给出两种伺服网页源码，一个用ASP撰写一个用PHP撰写。

AJAX ASP example

AJAX ASP 例子

The code in the "gethint.asp" page is written in VBScript for an Internet Information Server (IIS). It just checks an array of names and returns the corresponding names to the client:

“gethint.asp”网页的源码用VBScript撰写，在互联网信息服务器（IIS）上运行。它仅仅检索一个姓名数组并在客户端返回对应姓名：

<%
response.expires=-1
dim a(30)
'Fill up array with names
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"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
　 hint= ""
　 for i=1 to 30
　　　 if q=ucase(mid(a(i),1,len(q))) then
　　　　　 if hint= "" then
　　　　　　　 hint=a(i)
　　　　　 else
　　　　　　　 hint=hint & " , " & a(i)
　　　　　 end if
　　　 end if
　 next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
　 response.write( "no suggestion")
else
　 response.write(hint)
end if
%>

AJAX PHP example

AJAX PHP 实例

The code above rewritten in PHP.

以上代码用PHP服务器端脚本重写。

Note: To run the entire example in PHP, remember to change the value of the url variable in "clienthint.js" from "gethint.asp" to "gethint.php".

备注：用PHP去运行整个例子，记得在“clienthint.js”中更改url变量的值从“gethint.asp”改为“gethint.php”。

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
　 {
　 $hint= "";
　 for($i=0; $i <count($a); $i++)
　　　 {
　　　 if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
　　　　　 {
　　　　　 if ($hint== "")
　　　　　　　 {
　　　　　　　 $hint=$a[$i];
　　　　　　　 }
　　　　　 else
　　　　　　　 {
　　　　　　　 $hint=$hint. " , ".$a[$i];
　　　　　　　 }
　　　　　 }
　　　 }
　 }

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
　 {
　 $response= "no suggestion";
　 }
else
　 {
　 $response=$hint;
　 }

//output the response
echo $response;
?>