The XMLHttpRequest
To create AJAX web applications you have to become familiar with the JavaScript object called the XMLHttpRequest.
要徏立AJAXweb应用E序你就必须开始熟悉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的关键。它其实早在2000q的七月便开始生效了Q但直到2005qh们开始谈论AJAX和Web2.0后才被发掘?/p>
Below is listed some of the methods and properties you have to become familiar with.
下面列D的是一些方法和属性，q些你都应该非常熟悉
建立XMLHttpRequest对象
Different browsers use different methods to create an XMLHttpRequest object.
不同的浏览器使用了不同的建立Ҏ
Internet Explorer uses an ActiveXObject.
在IE里用的?strong>ActiveXObject
Other browsers uses a built in JavaScript object called XMLHttpRequest.
其它览器用的是JS内徏?strong>XMLHttpRequest 对象
Here is the simplest code you can use overcome this problem:
q是D늮单的代码Q可以用来解册个问题：
var XMLHttp=null |
Example above explained:
上面举例的解析：
First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
首先建立的是一个名?strong>XMLHttp的变量，我们可以用它来代替XMLHttpRequest对象。设|这个变量的gؓnull
Then test if the object window.XMLHttpRequest is available. This object is available in newer versions of browsers like Firefox, Mozilla, and Opera.
然后试下对?strong>window.XMLHttpRequest是否有效。这个对象只在Firefox, Mozilla, ?Operaq些览器的新版本中有效?/p>
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以上的版本中有效?br />
If it is available, use it to create a new object:
如果有效Q那么徏立一个新的对象：
XMLHttp=new ActiveXObject().
更好一点的举例Q?/h2>
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.
下面q个举例会尝试加载微软最新版本中?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.
首先建立一?strong>XMLHttp变量可用做你的XMLHttpRequest对象。设|ؓnull?/p>
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:
如果捕获C错误Q就试用老一点的Ҏ:
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
If XMLHttp still has a null value, try to create the object the "standard" way:
如果XMLHttp依旧为null|那么q“标准”方法徏立：
XMLHttp=new XMLHttpRequest()
XMLHttpRequest Ҏ
open() Ҏ.
The open() method sets up a request to a web server.
建立对web服务器的h?
send() Ҏ.
The send() method sends a request to the server.
向服务器发送请?
abort() Ҏ.
The abort() method aborts the current server request.
攑ּ当前的服务器h
XMLHttpRequest readyState 属?/h2>
The readyState property defines the current state of the XMLHttpRequest object.
readyState 定义了当前XMLHttpRequest对象的状?/p>
Here are the possible values for the readyState propery:
q所列D的是一些readyState可能出现的g及相应的描述Q?/p>
| State 状?/th> | 描述 |
|---|---|
| 0 | The request is not initialized h未初始?/td> |
| 1 | The request has been set up h已经建立 |
| 2 | The request has been sent h已发?/td> |
| 3 | The request is in process h正在处理?/td> |
| 4 | The request is completed h完成 |
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
发生在你已经建立XMLHttpRequest对象之后Q而在你调用open()Ҏ之前的这个阶D?/p>
readyState=1 after you have called the open() method, but before you have called send().
发生在你已经调用open()Ҏ之后Q而在你调用send()Ҏ之前的这个阶D?/p>
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.
发生在浏览器已经于服务器建立沟通之后，而在服务器完成反馈前的这个阶D?/p>
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?
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.
在你自己的AJAXE序中事实上你只要注重下状?p了?/p>
XMLHttpRequest responseText 属?/h2>
The responseText property contains the text returned by the server.
responseText属性包含了从服务器q回的文字信?/p>
AJAX可以通过使用XML文g来让信息产生互动
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文g的信?/p>
从下拉框中选择一盘CD
ARTIST: Dolly Parton
COUNTRY: USA
COMPANY: RCA
PRICE: 9.90
YEAR: 1982
AJAX 实例解析
The example above contains a simple HTML form and a link to a JavaScript:
上面的D例包含了单的HTML表单以及q接到JS的linkQ?/p>
<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表单Q里面有个名?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.
在表单下面的D落里有一个名?txtHint"的div。它可用来显CZweb服务器上获取到的信息
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"事g相关联。换句话_每当用户改变了下拉框里的内容Q这个函数就会执行?/p>
The JavaScript code is listed below.
JS代码在下面列出
The AJAX JavaScript
This is the JavaScript code stored in the file "selectcd.js":
q个名ؓ"selectcd.js"的JS文g保存了我们前面所讲到的代码：
var xmlHttp |
AJAX 服务端页?/h2>
The server paged called by the JavaScript, is a simple ASP file called "getcd.asp".
被JS所调用的服务端面名ؓ"getcd.asp"?/p>
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
q个面是用VBScript写的Q可q行在IIS上。它可以非常Ҏ的写成其他服务端脚本语言?/p>
The code runs a query against an XML file and returns the result as HTML:
代码会对XML文gq行查询Qƈ结果返回到以HTML的Ş式返回：
q=request.querystring("q")
|
]]>
AJAX可以用来和数据端q行数据的交互联通?/p>
AJAX Database Example
AJAX 数据库实?/h2>
In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.
在以下的AJAX范例中，我们可以了解C个网|如何用AJAX技术从数据端获得信息的?/p>
Select a Name in the Box Below
请在下面的菜单中选择一名字
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表单Q里面有一单的下拉菜单Q其名称?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"的DIVQ该DIV被用来做为反馈从WEB服务器检索信息的占位W?
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.
当用户选择数据Q一个称?"showCustomer()"的函数被执行了。这个函数由"onchange"事g所触发。可以这么讲Q每当用h变下拉菜但中的名字，函数׃执行
The JavaScript code is listed below.
JS的代码在下面
The AJAX JavaScript
AJAX的JS
This is the JavaScript code stored in the file "selectcustomer.js":
q是JS代码Q被保存在一叫做"selectcustomers.js"的文件内Q?/p>
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服务?/h2>
The server paged called by the JavaScript, is a simple ASP file called "getcustomer.asp".
服务는JS所调遣Q是一UCؓ"gecustomer.asp"的简单ASP文g
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语言Q当然也可以改写成像PHP或是其他一些服务语a
The code runs an SQL against a database and returns the result as an HTML table:
代码q行了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>")
|
]]>
This is the HTML page. It contains a simple HTML form and a link to a JavaScript.
q是一个HTML|页。它包括了一个简单的HTML表单和关联JS的link
<html> <body> <form> <p>Suggestions: <span id="txtHint"></span></p> </body> |
The JavaScript code is listed below.
JS代码在下?/p>
The AJAX JavaScript
AJAX ?JS
This is the JavaScript code, stored in the file "clienthint.js":
q是JS代码Q被保存?clienthint.js"文g?/p>
var xmlHttp
|
]]>