AJAX 实例

最新推荐文章于 2024-07-25 10:06:21 发布

cuoguo1111

最新推荐文章于 2024-07-25 10:06:21 发布

阅读量562

点赞数

文章标签： ajax function input url object 服务器

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
在下面的框中输入姓名

Suggestions:

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

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

<form> 
First Name:
<input type="text" id="txt1"
οnkeyup="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
（不确定）用输入内容给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对象，当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里就会显示反馈的文字

cuoguo1111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 实例

AJAX can be used to create more interactive applications. AJAX可以用来创建交互式性更好的网络应用程序。AJAX ExampleAJAX 实例In the AJAX example below we will demonstrate how a web page can communicate with a web serve
复制链接

扫一扫