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范例
Example - AJAX Suggest
例子 - AJAX 建议
AJAX can be used to create more interactive applications.
AJAX能够用于创建更多交互性的应用程序。
AJAX Suggest example
AJAX建议的例子
The following AJAX example will demonstrate how a web page can communicate with a web server while a user enters data into an HTML form.
下面的例子将演示，当用户在HTML表单中输入数据时，web页面如何跟服务器交互的。
Type a name in the input field below:
在如下输入框中键入名字：
Suggestions:
姓名建议:
Example explained - The HTML form
例子讲解 - HTML表单
The form above has the following HTML code:
上面的表单的HTML代码如下：
<form> |
It is just a simple HTML form with an input field called "txt1".
这个就是带有命名为“txt1”字段的简单HTML表单
An event attribute for the input field defines a function to be triggered by the onkeyup 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.
下一段我们的表单中将包含一个叫“txtHint”的span【跨度】标签。span标签作为从服务器端数据回收的占位符。
When a user inputs data, the function called "showHint()" is executed. The execution of the function is triggered by the "onkeyup" event. In other words: Each time a user moves the 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:
在HTML网页的<head>区域中放置着我们写的非常简单的showHint()JavaScript函数：
| 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); } |
The function above executes every time a character is entered in the input field.
文本框中每一个字符的输入结束，以上的函数就会执行一次。
If there is input in the input field (str.length > 0), the showHint() function executes the following:
如果文本框中有输入即str.length>0,showHint()函数就执行以下操作：
- Defines the URL (filename) to send to the server
- 定义URL（文件名）发送给服务端
- Adds a parameter (q) to the URL with the content of the input field
- 增加一个（q）参数加上输入的内容给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 showHint() function above calls a function named GetXmlHttpObject().
上面的showHint()函数调用了GetXmlHttpObject()函数。
The purpose of the GetXmlHttpObject() function is to solve the problem of creating different XMLHTTP objects for different browsers:
GetXmlHttpObject()函数的目的是解决这样一个问题，它创建不同浏览器的对应XMLHTTP对象：
| 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; } |
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.
stateChanged()函数在每次XMLHTTP对象状态改变时就被执行。
When the state changes to 4 ("complete"), the content of the txtHint placeholder is filled with the response text.
当XMLHTTP状态改变为4（完成）时，txtHint占位符的内容就会被填写为服务器返回的文本。