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

w3pop.com :: 网络学院 :: AJAX :: AJAX Suggest 案例

会员登陆

帐号

密码

回答

记住密码

忘记密码? 注册

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

No. 1

AJAX Suggest 案例

作者:w3pop.com 翻译/整理:w3pop.com 发布:2007-08-23 浏览:2878 :: ::

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