当前位置: 首页 > 网络学院 > 客户端脚本教程 > AJAX > AJAX Suggest 案例

AJAX
AJAX 实例
AJAX浏览器
AJAX源代码
AJAX服务端
AJAX 数据库
AJAX与XML文件
AJAX XMLHttpRequest
微软的Ajax
AJAX 介绍
AJAX HTTP 请求
AJAX 服务器端脚本
AJAX Suggest 案例
AJAX ResponseXML
AJAX AppML
学院文章搜索

关键字

AJAX Suggest 案例

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-03-01   浏览: 711 ::
收藏到网摘: n/a

We have seen that AJAX can be used to create more interactive applications.
我们已经发现，AJAX可以用于创建更具交互性的应用程序。

AJAX Suggest Example
AJAX Suggest 案例

In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a standard HTML form.
在下面的AJAX案例中，我们将演示用户是如何通过向标准的HTML表单中输入数据从而实现表单页与Web服务器的在线沟通。

Type a Name in the Box Below
在下面的输入框内输入一个名称

First Name:

Suggestions:

Example Explained - The HTML Form
案例剖析 —— HTML 表单

The form above has the following HTML code:
上述表单包含了下面的HTML代码：

<form> 
First Name:
<input type="text" id="txt1"

onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

As you can see it is just a simple HTML form with an input field called "txt1".
你会发现，它是一张简单的包含信息输入框的HTML表单，文件名为“txt1”。

An event attribute for the input field defines a function to be triggered by the onkeyup event.
输入框的event [ 事件 ] 属性定义了一个由"onkeyup"事件激发的函数。

The paragraph below the form contains a span called "txtHint". The span is used as a placeholder for data retrieved from the web server.
表单下方的段落中包含了id名为“txtHint”的“span”元素，span是用于从服务器端重新获取数据的占位符。

When the user inputs data, a function called "showHint()" is executed. The execution of the function is triggered by the "onkeyup" event. In other words: Each time the user moves his finger away from a keyboard key inside the input field, the function showHint is called.
当用户输入信息时，就会执行一个名为“showHint()”的函数。函数的执行是由"onkeyup"事件激发的；换句话说：当用户的手指远离输入域的键盘键时，函数“showHint()”将会被激发。

Example Explained - The showHint() Function
案例剖析——showHint() 函数

The showHint() function is a very simple JavaScript function placed in the <head> section of the HTML page.
showHint() 函数是一个非常简单的JavaScript 函数，该函数在HTML页面的<head>片断中书写。

The function contains the following code:
该函数包含了下属代码：

function showHint(str)
{
if (str.length==0)
 { 
 document.getElementById("txtHint").innerHTML="";
 return;
 }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Your browser does not support 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);
}

The function executes every time a character is entered in the input field.
每当一个字符在输入域中输入时，就会执行这个函数。

If there is some input in the text field (str.length > 0) the function executes the following:
如果在文本域（str.length > 0）中输入了若干信息内容，函数就会执行下面的内容：

  • Defines the url (filename) to send to the server
    定义发送到服务器的url（文件名）
  • Adds a parameter (q) to the url with the content of the input field
    将附带输入域内容的参数添加至url
  • Adds a random number to prevent the server from using a cached file
    添加一个随机数字阻止服务器使用缓存文件
  • Creates an XMLHTTP object, and tells the object to execute a function called
    stateChanged when a change is triggered
    创建一个XMLHTTP对象，然后，当一个改变被激发时，委派该对象执行一个名为“ stateChanged”的函数
  • Opens the XMLHTTP object with the given url.
    使用给定的url打开XMLHTTP对象
  • Sends an HTTP request to the server
    向服务器发送一个HTTP请求

If the input field is empty, the function simply clears the content of the txtHint placeholder.
如果输入域为空，该函数就会完全清除txtHint占位符的内容。

Example Explained - The GetXmlHttpObject() Function
案例剖析——GetXMLHttpObject() 函数

The example above calls a function called GetXmlHttpObject().
上述案例请求了一个名为“GetXmlHttpObject()”的函数。

The purpose of the function is to solve the problem of creating different XMLHTTP objects for different browsers. 
函数的目的是为了解决在不同的浏览器中创建不同XMLHTTP对象的问题。

The function is listed below:
函数列举如下：

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

 

Example Explained - The stateChanged() Function
案例剖析——stateChanged() 函数

The stateChanged() function contains the following code:
stateChanged() 函数包含了下列代码：

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

The stateChanged() function executes every time the state of the XMLHTTP object changes.
每当XMLHTTP对象发生更改时，将执行stateChanged() 函数。

When the state changes to 4 ("complete"), the content of the txtHint placeholder is filled with the response text.
当情况改变为4（“完成”）时，txtHint 占位符中包含了响应文本的内容。

评论 (0) All

登陆 | 还没注册？