当前位置: 首页 > 网络学院 > 客户端脚本教程 > AJAX > AJAX 实例
AJAX can be used to create more interactive applications.
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范例中,我们将了解到当用户以网页格式输入数据时一个网页是如何与网络服务器连接的。
Suggestions:
The form above has the following HTML code:
以上的范例所含超文本标记语言代码如下:
<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这个函数就会执行。
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) |
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)函数就执行:
If the input field is empty, the function simply clears the content of the txtHint placeholder.
The stateChanged() function contains the following code:
stateChanged()函数包含以下代码:
function stateChanged() |
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里就会显示反馈的文字