网络学院 w3pop社区 网络资源 IT新闻

w3pop.com :: 网络学院 :: AJAX :: AJAX 实例

会员登陆

帐号

密码

回答

记住密码

忘记密码? 注册

AJAX
AJAX 实例
AJAX浏览器
AJAX源代码
AJAX服务端
AJAX 数据库
AJAX与XML文件
AJAX XMLHttpRequ..
微软的Ajax
AJAX 介绍
AJAX HTTP 请求
AJAX 服务器端脚�..
AJAX Suggest 案�..
AJAX ResponseXML
AJAX AppML

No. 1

AJAX 实例

作者:w3pop.com 翻译/整理:w3pop.com 发布:2007-04-28 修改:2007-06-02 浏览:10200 :: ::

AJAX can be used to create more interactive applications.
AJAX可以用来创建交互式性更好的网络应用程序。

AJAX Example
AJAX 实例

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 web form.
在以下的AJAX范例中，我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。

Type a Name in the Box Below
在下面的框中输入姓名

First Name:

Suggestions:

Example Explained - The HTML Form
实例解析-超文本标记语言表单

The form above has the following HTML code:
以上的范例所含超文本标记语言代码如下：

<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".
就如你看到的，它只是一个普通的表单，里面有一称为"txt1"的输入框

An event attribute for the input field defines a function to be triggered by the onkeyup event.
在input区域里有一个事件属性，当按键释放的时候就触发这个事件。

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 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”事件触发的。换种说法：每当用户在txt1区域内触动键盘按钮，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()函数是一种位于HTML顶端的简单的JS函数。

The function contains the following code:
函数包含以下代码：

function showHint(str)
{
if (str.length==0)
{ 
document.getElementById("txtHint").innerHTML=""

return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
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
    通过输入将内容附加到参数(q)后

  • 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对象，当HTTP触发一次变动则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.

Example Explained - The stateChanged() Function
实例解析 - stateChanged()函数

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

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
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 (or to "complete"), the content of the txtHint placeholder is filled with the response text.
当状态改变为4(或为"完成"),txtHint span里就会显示反馈的文字

评论 (17) 1 2 3 4 All