AJAX教程[转]
AJAX教程
AJAX并不是什么新的语言，但它是是一种全新的使用方法。
通过AJAX你可以建立更好更快以及更友好的WEB应用程序。AJAX的实现原理是基于JavaScript以及HTTP request
AJAX = 异步JavaScript和可扩展标记语言
AJAX is an acronym for Asynchronous JavaScript And XML.
AJAX是Asynchronous JavaScript And(和) XML的缩写
AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications.
AJAX并不是什么新的程序语言，但这个简单的新技术可以让WEB应用程序更好，更快，更友好。
AJAX uses JavaScript to send and receive data between a web browser and a web server.
AJAX使用JS在WEB浏览器与WEB服务器间来发送并接收数据
The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change.
AJAX技术可以让数据的响应与交换都作用在服务器后台上，而不需要让用户的页面在每次都要做重新的加载工作
AJAX 为一种浏览器技术
AJAX is a technology that runs in your browser. It uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
AJAX是一种运用于浏览器中的技术。在浏览器和服务器之间，它使用异步数据进行转换，并允许网页向服务器索取少量信息而非整个网页。
The technology makes Internet applications smaller, faster and more user friendly.
这项技术标志着网络应用程序的微小化、迅捷化以及友好化。
AJAX is a web browser technology independent of web server software.
AJAX是一种不需依靠服务器软件而独立运做的浏览器技术。
AJAX 是基于开放式的标准
AJAX is based on the following open standards:
AJAX基于以下开放式标准：
- JavaScript
- XML
- HTML
- CSS
The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology)
运用于ALAX的开放标准被很好的定义并且得到一些主要的常用浏览器支持。ALAX应用程序是独立的浏览器和平台（交互平台，交互浏览器技术）。
AJAX 事关更好的网络应用程序
Web applications have many benefits over desktop applications, they can reach a larger audience, they are easier to install and support, and easier to develop.
网络应用程序比单机应用程序有更多的好处，它能符合更多用户的需求，更易安装且方便支持和扩展。
However, Internet applications are not always as "rich" and user-friendly as traditional desktop applications.
然而，网络应用程序并非总是像单机应用程序一样好使唤。
With AJAX, Internet applications can be made richer (smaller, faster, and easier to use).
而运用AJAX，网络应用程序将变地更实用（更小、更快、更易于使用）。
你现在就可以开始着手使用AJAX
There is nothing new to learn.
并不需要学习什么新的知识
AJAX is based on open standards. These standards have been used by most developers for several years.
AJAX是基于开放标准的。这些标准已经被大多数开发人员使用多年。
Most existing web applications can be rewritten to use AJAX technology instead of traditional HTML forms.
大多数现存的网络应用程序可以用AJAX进行重新编写以取代传统的超文本标记语言方式。
AJAX 使用了 XML 以及 HTTP Requests
A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.
传统的网络应用程序会将输入的信息提交给服务器（使用HTML表单）。在服务器通过代码后，将会把一个全新的完整的页面传送给用户。
Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.
由于用户每次提交输入信息的时候服务器都将传回一个新的页面，传统的网络应用程序通常运行缓慢且使用不便。
With AJAX, web applications can send and retrieve data without reloading the whole web page. This is done by sending HTTP requests to the server (behind the scenes), and by modifying only parts of the web page using JavaScript when the server returns data.
使用AJAX，网页应用程序能不经重新下载整个网页就发送并重新获得数据。这是通过发送HTTP请求和使用JS对网页进行部分修改来实现的。
XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
联系服务器的较好的方式是发送像可扩展标记语言这样的数据（其他的方法也可以采用）。
You will learn more about how this is done in the next chapters of this tutorial.
你将在这章更多地了解到这一切是如何做到的。
AJAX浏览器
w3pop.com / 2006-09-22
AJAX applications can only run in web browsers with XML support.
AJAX应用程序只可以在支持XML的浏览器上运行
AJAX Browser Support
浏览器对AJAX的支持
AJAX applications can only run in web browsers with complete XML support.
AJAX只能运行在那些完全支持XML的浏览器上
Only two web browsers available today - Internet Explorer (IE) and Mozilla Firefox.- have complete enough support for XML to run AJAX applications.
目前只有两个浏览器是符合这个要求的 - IE和火狐 - 它们对XML的支持足以运行AJAX程序
Since other browsers like Safari and Opera have limited, incomplete or incorrect XML support, this tutorial will focus on IE and Firefox examples.
其它浏览器在此方面有局限性(比如Safari 和 Opera)，所以它们对XML的支持还不完全，这个教程会主要针对IE和FF浏览器进行举例
The example on the previous page called a function called GetXmlHttpObject.
上一页的举例调用了名为GetXmlHttpObject的函数
The purpose of the function is to solve the problem of creating different XMPHTTP objects for different browsers.
使用这个函数的目的是为了解决针对不同浏览器建立不同的XMPHTTP对象而设计的。
The function is listed below:
函数是这样的：
function GetXmlHttpObject(handler) |
AJAX代码
w3pop.com / 2006-09-22
AJAX Example - AJAX Source
AJAX 实例 - AJAX 源码
The source code below belongs to the AJAX example on the previous pages.
下面的源代码是前一个页面的。
You can copy and paste it, and try it yourself.
你可以将它复制并粘贴，自己来尝试。
The AJAX HTML Page
AJAX HTML页面
This is the HTML page. It contains a simple HTML form and a link to a JavaScript.
这是一个HTML网页。它包括了一个简单的HTML表单和关联JS的link
<html> <body> <form> <p>Suggestions: <span id="txtHint"></span></p> </body> |
The JavaScript code is listed below.
JS代码在下面
The AJAX JavaScript
AJAX 的 JS
This is the JavaScript code, stored in the file "clienthint.js":
这是JS代码，被保存在"clienthint.js"文件中
var xmlHttp |
AJAX服务端
w3pop.com / 2006-09-22
There is no such thing as an AJAX server.
在AJAX服务器端并没有什么特别的东西
AJAX pages can be served by any internet server.
任何网络服务器都可以提供AJAX页面服务
AJAX 服务端页面 - ASP 和 PHP
The server page called by the JavaScript in the example from the previous chapters is a simple ASP file called "gethint.asp".
上一篇中被JS所调用的服务端ASP页面的名称为"gethint.asp"
Below we have listed two examples of the server page code, one written in ASP and one in PHP.
下面我们会举出两个例子，一个是用ASP写的，另一个是用PHP写的。
AJAX ASP 举例
The code in the "gethint.asp" page is written in VBScript for an Internet Information Server (IIS). It just checks an array of names and returns the corresponding names to the client:
在 "gethint.asp"里所写的代码是用了VBScript，可以运行在IIS上。它只是对数组的名称做了检查并将合适的名称反馈给了客户端：
<% 'get the q parameter from URL 'lookup all hints from array if length of q>0 'Output "no suggestion" if no hint where found |
AJAX PHP 举例
The code above rewritten in PHP.
将上面的代码用php来写出
Note: To run the entire example in PHP, remember to change the value of the url variable in "clienthint.js" from "gethint.asp" to "gethint.php".
注意：如果要运行PHP,请记得要把"clienthint.js"中url变量值从"gethint.asp" 改成 "gethint.php"
PHP 举例
<?php //get the q parameter from URL //lookup all hints from array if length of q>0 |
AJAX 数据库
w3pop.com / 2006-09-22
AJAX can be used for interactive communication with a database.
AJAX可以用来和数据端进行数据的交互联通。
AJAX Database Example
AJAX 数据库实例
In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.
在以下的AJAX范例中，我们可以了解到一个网页是如何用AJAX技术从数据端获得信息的。
Select a Name in the Box Below
请在下面的菜单中选择一名字
| CustomerID | ALFKI |
| CompanyName | Alfreds Futterkiste |
| ContactName | Maria Anders |
| Address | Obere Str. 57 |
| City | Berli |
| PostalCode | 12209 |
| Country | Germany |
AJAX Example Explained
AJAX 实例解析
The example above contains a simple HTML form and a link to a JavaScript:
上面的例子包含了一个简单的HTML表单和一关联到JS的link:
<html> <head> <script src="selectcustomer.js"></script> </head> <body> <form> Select a Customer: <select name="customers" onchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste <option value="NORTS ">North/South <option value="WOLZA">Wolski Zajazd </select> </form> <p> <div id="txtHint"><b>Customer info will be listed here.</b></div> </p> </body> </html> |
As you can see it is just a simple HTML form with a drop down box called "customers".
正如你所见这只是一个简单的HTML表单，里面有一简单的下拉菜单，其名称为"customers"
The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.
表单下面包含一个名为"txtHint"的DIV，该DIV被用来做为反馈从WEB服务器检索信息的占位符
When the user selects data, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCustomer is called.
当用户选择数据，一个称为 "showCustomer()"的函数被执行了。这个函数由"onchange"事件所触发。可以这么讲：每当用户改变下拉菜但中的名字，函数就会执行
The JavaScript code is listed below.
JS的代码在下面
The AJAX JavaScript
AJAX的JS
This is the JavaScript code stored in the file "selectcustomer.js":
这是JS代码，被保存在一叫做"selectcustomers.js"的文件内：
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getcustomer.asp"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
} |
The AJAX Server Page
AJAX服务页
The server paged called by the JavaScript, is a simple ASP file called "getcustomer.asp".
服务页由JS所调遣，是一称为"gecustomer.asp"的简单ASP文件
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
该页使用的是针对IIS的VBS语言，当然也可以改写成像PHP或是其他一些服务语言
The code runs an SQL against a database and returns the result as an HTML table:
代码运行了SQL来从数据库中将结果返回到HTML表格中：
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & request.querystring("q")
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
|
AJAX与XML文件
w3pop.com / 2006-09-22
AJAX can be used for interactive communication with an XML file.
AJAX可以通过使用XML文件来让信息产生互动
AJAX XML 实例
In the AJAX example below we will demonstrate how a web page can fetch information from an XML file using AJAX technology.
在先面的AJAX实例中我们将演示如何让WEB页面使用AJAX技术来获取到来自XML文件的信息
从下拉框中选择一盘CD
AJAX 实例解析
The example above contains a simple HTML form and a link to a JavaScript:
上面的举例包含了简单的HTML表单以及连接到JS的link：
<html> <body> <form> <p> </body> |
As you can see it is just a simple HTML form with a simple drop down box called "cds".
正如你所看到的，它只是简单的HTML表单，里面有个名为"cds"的下拉框
The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.
在表单下面的段落里有一个名为"txtHint"的div。它可用来显示从web服务器上获取到的信息
When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCD is called.
当用户选择了信息，一个名为"showCD"的函数就会被执行。这个函数执行与"onchange"事件相关联。换句话说：每当用户改变了下拉框里的内容，这个函数就会执行。
The JavaScript code is listed below.
JS代码将在下面列出
The AJAX JavaScript
This is the JavaScript code stored in the file "selectcd.js":
这个名为"selectcd.js"的JS文件保存了我们前面所讲到的代码：
var xmlHttp |
AJAX 服务端页面
The server paged called by the JavaScript, is a simple ASP file called "getcd.asp".
被JS所调用的服务端页面名为"getcd.asp"。
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
这个页面是用VBScript写的，可运行在IIS上。它可以非常容易的写成其他服务端脚本语言。
The code runs a query against an XML file and returns the result as HTML:
代码会对XML文件进行查询，并将结果返回到以HTML的形式返回：
q=request.querystring("q") |
AJAX XMLHttpRequest
w3pop.com / 2006-09-22
The XMLHttpRequest object makes AJAX possible.
The XMLHttpRequest
To create AJAX web applications you have to become familiar with the JavaScript object called the XMLHttpRequest.
要建立AJAXweb应用程序你就必须开始熟悉JS对象中的XMLHttpRequest
The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.
XMLHttpRequest 对象是AJAX的关键。它其实早在2000年的七月便开始生效了，但直到2005年人们开始谈论AJAX和Web2.0后才被发掘。
Below is listed some of the methods and properties you have to become familiar with.
下面列举的是一些方法和属性，这些你都应该非常熟悉
建立XMLHttpRequest对象
Different browsers use different methods to create an XMLHttpRequest object.
不同的浏览器使用了不同的建立方法
Internet Explorer uses an ActiveXObject.
在IE里使用的是ActiveXObject
Other browsers uses a built in JavaScript object called XMLHttpRequest.
其它浏览器使用的是JS内建的XMLHttpRequest 对象
Here is the simplest code you can use overcome this problem:
这是段简单的代码，可以用来解决这个问题：
var XMLHttp=null |
Example above explained:
上面举例的解析：
First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
首先建立的是一个名为XMLHttp的变量，我们可以用它来代替XMLHttpRequest对象。设置这个变量的值为null
Then test if the object window.XMLHttpRequest is available. This object is available in newer versions of browsers like Firefox, Mozilla, and Opera.
然后测试下对象window.XMLHttpRequest是否有效。这个对象只在Firefox, Mozilla, 和 Opera这些浏览器的新版本中有效。
If it's available, use it to create a new object:
如果它是有效的，那么就使用它来建立一个新的对象：
XMLHttp=new XMLHttpRequest().
If it's not available, test if an object window.ActiveXObject is available. This object is available in Internet Explorer version 5.5 and later.
如果无效。测试下对象window.ActiveXObject是否有效。这个对象只在IE5.5以上的版本中有效。
If it is available, use it to create a new object:
如果有效，那么建立一个新的对象：
XMLHttp=new ActiveXObject().
更好一点的举例？
Some programmers will prefer to use the newest and fastest version of the XMLHttpRequest object.
一些程序希望使用最新最快版本的XMLHttpRequest对象。
The example below tries to load Microsoft's the latest version "Msxml2.XMLHTTP", available in Internet Explorer 6, before it falls back to "Microsoft.XMLHTTP", available in Internet Explorer 5.5 and later.
下面这个举例会尝试加载微软最新版本中的"Msxml2.XMLHTTP"。它在IE6中有效，以前的版本都是"Microsoft.XMLHTTP"。
var XMLHttp=null |
Example above explained:
上面举例的解析：
First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
首先建立一个XMLHttp变量可用做你的XMLHttpRequest对象。设置为null值
Then try to create the object the Microsoft way, available in Internet Explorer 6 and later:
然后尝试用MS的方法来建立一个在IE6或更新版本中有效的对象：
XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
If this catches an error, try the older (Internet Explorer 5.5) way:
如果捕获到了错误，就尝试用老一点的方法:
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
If XMLHttp still has a null value, try to create the object the "standard" way:
如果XMLHttp依旧为null值，那么就用“标准”方法建立：
XMLHttp=new XMLHttpRequest()
XMLHttpRequest 方法
open() 方法.
The open() method sets up a request to a web server.
建立对web服务器的请求。
send() 方法.
The send() method sends a request to the server.
向服务器发送请求
abort() 方法.
The abort() method aborts the current server request.
放弃当前的服务器请求
XMLHttpRequest readyState 属性
The readyState property defines the current state of the XMLHttpRequest object.
readyState 定义了当前XMLHttpRequest对象的状态
Here are the possible values for the readyState propery:
这所列举的是一些readyState可能出现的值以及相应的描述：
| State 状态 |
描述 |
|---|---|
| 0 | The request is not initialized 请求尚未初始化 |
| 1 | The request has been set up 请求已经建立 |
| 2 | The request has been sent 请求已发送 |
| 3 | The request is in process 请求正在处理中 |
| 4 | The request is completed 请求完成 |
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
发生在你已经建立XMLHttpRequest对象之后，而在你调用open()方法之前的这个阶段
readyState=1 after you have called the open() method, but before you have called send().
发生在你已经调用open()方法之后，而在你调用send()方法之前的这个阶段
readyState=2 after you have called send().
发生在你已经调用send()方法之后
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
发生在浏览器已经于服务器建立沟通之后，而在服务器完成反馈前的这个阶段
readyState=4 after the request has been completed, and the response data have been completely received from the server.
发生在请求完成并收到来自服务器的反馈信息之后
Different browsers treat the ready state differently. Don't expect all browsers to report all states. Some will not report 0 and 1.
不同的浏览器对于不同的状态处理方式不同。别指望所有浏览器都能报告所有状态。一些浏览器不会报告0和1
For Your AJAX applications you will actually only be interested state 4. That is when the request is completed and it is safe use the received data.
在你自己的AJAX程序中事实上你只要注重下状态4就行了。
XMLHttpRequest responseText 属性
The responseText property contains the text returned by the server.
responseText属性包含了从服务器返回的文字信息
