分类：
2008-09-25 21:54:22
1.AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
2.AJAX 是一种在 2005 年由 Google 推广开来的编程模式。
3.AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法。
4.通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。
5.AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。
AJAX 简介
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
在继续学习之前，您需要对下面的知识有基本的了解：
如果您希望首先学习这些项目，请在我们的访问这些教程。
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快，更友好。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。
AJAX 基于下列 Web 标准：
在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。
Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。
不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。
通过 AJAX，因特网应用程序可以变得更完善，更友好。
没有什么新东西可学。
AJAX 基于已有的标准。这些标准已被大多数开发者使用多年。
AJAX Http 请求
在传统的 JavaScript 编程中，假如您希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。
由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。
通过利用 AJAX，您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。
通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。
通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！
在 2005 年 AJAX 被 Google 推广开来（Google Suggest）。
使用 XMLHttpRequest 对象来创建一种动态性极强的 web 界面：当您开始在 Google 的搜索框中输入查询时，JavaScript 会向某个服务器发出这些字词，然后服务器会返回一系列的搜索建议。
XMLHttpRequest 对象得到下列浏览器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
AJAX 实例
为了让您理解 AJAX 的工作原理，我们将创建一个小型的 AJAX 应用程序。
首先，我们需要一个带有两个文本框的 HTML 表单：用户名和时间。用户名文本框由用户填写，而时间文本框使用 AJAX 进行填写。
此 HTML 文件名为 "testAjax.htm"（请注意这个 HTML 表单没有提交按钮！）：
我们将在下一节解释 AJAX 的基本原理。
AJAX 浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
如需针对不同的浏览器来创建此对象，我们要使用一条 "try and catch" 语句。您可以在我们的 JavaScript 教程中阅读更多有关 的内容。
让我们用这段创建 XMLHttpRequest 对象的 JavaScript 来更新一下我们的 "testAjax.htm" 文件：
首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。
然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
假如这三种方法都不起作用，那么这个用户所使用的浏览器已经太过时了，他或她会看到一个声明此浏览器不支持 AJAX 的提示。
注释：上面这些浏览器定制的代码很长，也很复杂。不过，每当您希望创建 XMLHttpRequest 对象时，这些代码就能派上用场，因此您可以在任何需要使用的时间拷贝粘贴这些代码。上面这些代码兼容所有的主流浏览器：Internet Explorer、Opera、Firefox 以及 Safari。
下一节为您展示如何使用 XMLHttpRequest 对象与服务器进行通信。
AJAX - XMLHttpRequest 对象
在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。
onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：
xmlHttp.onreadystatechange=function()
{
// 我们需要在这里写一些代码
}
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
这是 readyState 属性可能的值：
| 状态 | 描述 |
|---|---|
| 0 | 请求未初始化（在调用 open() 之前） |
| 1 | 请求已提出（调用 send() 之前） |
| 2 | 请求已发送（这里通常可以从响应得到内容头部） |
| 3 | 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） |
| 4 | 请求已完成（可以访问服务器响应并使用它） |
我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// 从服务器的response获得数据
}
}
可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
下一节，我们会介绍如何向服务器请求数据！
AJAX - 请求服务器
要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。
open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个方法规定应当对请求进行异步地处理。
send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录，那么代码是这样的：
xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);
现在，我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。
下一节介绍 "time.asp" 的脚本，这样我们完整的 AJAX 应用程序就搞定了。
AJAX -服务器端的脚本
现在，我们要创建可显示当前服务器时间的脚本。
responseText 属性会存储从服务器返回的数据。在这里，我们希望传回当前的时间。这是 "time.asp" 的代码：
<% response.expires=-1 response.write(time) %>
注释：Expires 属性可设置在页面缓存失效前页面被缓存的时间（分钟）。Response.Expires=-1 指示页面不会被缓存。
请在下面的文本框中键入一些文本，然后单击时间文本框：
时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间！
AJAX 请求实例
我们已看到 AJAX 可被用来创建更多交互性的应用程序。
在下面的 AJAX 例子中，我们会演示当用户向一个标准的 HTML 表单中输入数据时网页如何与 web 服务器进行通信。
Suggestions：
表单的 HTML 代码：
Suggestions: id="txtHint">
正如您看到的，这是一个简单的带有名为 "txt1" 输入域的 HTML 表单。输入域的事件属性定义了一个由 onkeyup 事件触发的函数。
表单下面的段落包含了一个名为 "txtHint" 的 span，这个 span 充当了由 web 服务器所取回的数据的位置占位符。
当用户输入数据时，名为 "showHint()" 的函数就会被执行。函数的执行是由 "onkeyup" 事件触发的。另外需要说明的是，当用户在文本域中输入数据时把手指从键盘按键上移开时，函数 showHint 就会被调用。
showHint() 函数是一个位于 HTML 页面 head 部分的很简单的 JavaScript 函数。
此函数包含以下代码：
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("您的浏览器不支持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);
}
每当有字符输入文本框时，此函数就会执行。
假如文本域中存在某些输入，函数就会执行：
上面的例子可调用名为 GetXmlHttpObject() 的函数。
此函数的作用是解决为不同浏览器创建不同的 XMLHTTP 对象的问题。
这是此函数的代码：
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;
}stateChanged() 函数包含下面的代码：
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
每当 XMLHTTP 对象的状态发生改变时，stateChanged() 函数就会执行。
当状态变更为 4（“完成”）时，txtHint 占位符的内容就被响应文本来填充。
AJAX 请求 源代码
下面的源代码属于上一节的 AJAX 实例。
您可以拷贝粘贴这些代码，然后亲自测试一下。
这是 HTML 页面。它包含了一个简单的 HTML 表单，以及一个指向 JavaScript 的链接。
Suggestions: id="txtHint">
下面列出了 JavaScript 代码。
这是 JavaScript 代码，存储在文件 "clienthint.js" 中：
var xmlHttpfunction showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("您的浏览器不支持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); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }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; }
其实不存在什么“AJAX 服务器”。AJAX 页面可以由任一因特网服务器提供服务。
在上一节的例子中被 JavaScript 调用的服务器页面是一个简单的名为 "gethint.asp" 的 ASP 文件。
下面我们列出了这个服务器页面代码的实例，使用 ASP 来编写。
"gethint.asp" 页面中的代码针对 IIS 使用 VBScript 编写。它会检查一个名字数组，然后向客户端返回相应的名字：
<% response.expires=-1 dim a(30) '用名字为数组赋值 a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" '从URL取得参数q q=ucase(request.querystring("q")) '如果q的长度大于0，则查找所有的hint if len(q)>0 then hint="" for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if next end if '如果找不到hint，则输出"no suggestion" '或者输出正确的值 if hint="" then response.write("no suggestion") else response.write(hint) end if %>
AJAX 数据库实例
AJAX 可用来与数据库进行动态地通信。
AJAX 数据库实例
在下面的 AJAX 例子中，我们将演示如何使用 AJAX 技术令网页从数据库读取信息。
在下面的框中选择一个名字
客户信息将在此处列出。AJAX 实例解释
上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接：
请选择一位客户：
id="txtHint">客户信息将在此处列出。正如您看到的，这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。
表单以下的段落包含了一个名为 "txtHint" 的 div，这个 div 充当了由 web 服务器所取回的信息的位置占位符。
当用户选择数据时，名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触发。另外需要说明的是：每当用户改变下拉列表中的值，函数 showCustomer 就会被调用。
下面列出了 JavaScript 代码。
AJAX JavaScript
这是存储在文件 "selectcustomer.js" 中的 JavaScript 代码：
var xmlHttpfunction showCustomer(str){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("您的浏览器不支持AJAX！"); 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) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }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; }AJAX 服务器页面
这个被 JavaScript 调用的服务器页面，是一个名为 "getcustomer.asp" 的简单的 ASP 文件。
此页面使用 VBScript 针对 IIS 编写。可以使用 PHP 或其他服务器语言对它进行改写。
此代码可运行针对某个数据库的 SQL，并以 HTML 表格返回结果：
<% response.expires=-1 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("") do until rs.EOF for each x in rs.Fields response.write("
") %>") next rs.MoveNext loop response.write(" " & x.name & " ") response.write("" & x.value & " AJAX XML 实例AJAX 可用来与 XML 文件进行交互式通信。
AJAX XML 实例
在下面的 AJAX 实例中，我们将演示如何通过使用 AJAX 技术，从 XML 文件中读取信息。
在下面的下列列表中选择一个 CD
在此列出 CD 信息。AJAX 实例解释
上面的例子包含了一个简单的 HTML 表单，以及指向一段 JavaScript 的链接：
id="txtHint">在此列出 CD 信息。正如您所看到的，它只是一个带有名为 "cds" 的下拉列表的简单 HTML 表单。
表单下面的段落包含一个名为 "txtHint" 的 div。该 div 用作从 web 服务器接受的数据的位置占位符。
当用户选择列表时，名为 "showCD" 的函数就会被执行。该函数的执行是 "onchange" 事件触发的。换句话说，每当用户改变了下拉列表的值，这个 showCD 函数就会被调用。
下面列出了 JavaScript 代码。
AJAX JavaScript
这是存储在文件 "selectcd.js" 中的 JavaScript 代码：
var xmlHttpfunction showCD(str){ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcd.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) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }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; }AJAX 服务器页面
被 JavaScript 调用的服务器页面，是名为 "getcd.asp" 的简单 ASP 文件。
该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。
请看在 PHP 中对应的例子（测试：缺具体页面）。
该代码执行针对 XML 文件的查询，并以 HTML 返回结果：
<% response.expires=-1 q=request.querystring("q") set xmlDoc=Server.CreateObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.load(Server.MapPath("cd_catalog.xml")) set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']") for each x in nodes for each y in x.childnodes response.write("" & y.nodename & ": ") response.write(y.text) response.write("
") next next %>AJAX ResponseXML 实例
与 responseText 以字符串返回 HTTP 响应不同，responseXML 以 XML 返回响应。
ResponseXML 属性返回 XML 文档对象，可使用 W3C DOM 节点树的方法和属性来检查和解析该对象。
AJAX ResponseXML 实例
在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从数据库中读取信息。这次，这些从数据库中选取的数据将被转换为 XML 文档，然后我们将使用 DOM 来提取要显示的值。
选取下拉列表中的名称
AJAX 实例解释
上面的例子包含一个 HTML 表单，若干个保留所返回数据的 元素，以及指向一段 JavaScript 的链接：
上面的例子包含了一个 HTML 表单，该表单带有一个名为 "customers" 下拉框。
当用户选取下拉框中的客户时，函数 "showCustomer()" 就会被执行。事件 "onchange" 会触发该函数执行。换句话说，每当用户改变下拉框中的值时，函数 showCustomer() 就会被调用。
下面列出了 JavaScript 代码。
AJAX JavaScript
这是存储在文件 "selectcustomer_xml.js" 中的 JavaScript 代码：
var xmlHttp function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcustomer_xml.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) { var xmlDoc=xmlHttp.responseXML.documentElement; document.getElementById("companyname").innerHTML= xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue; document.getElementById("contactname").innerHTML= xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue; document.getElementById("address").innerHTML= xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue; document.getElementById("city").innerHTML= xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue; document.getElementById("country").innerHTML= xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue; } } 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; }showCustomer() 和 GetXmlHttpObject() 与上一节相同。stateChanged() 函数稍早前也在本教程中使用过。不过，这次我们通过 responseXML 以 XML 文档返回结果，并使用 DOM 来提取要显示的值。
AJAX 服务器页面
这个被 JavaScript 调用的服务器页面，是名为 "getcustomer_xml.asp" 的简单 ASP 文件。
该页面使用 VBScript 编写，针对 Internet 信息服务器 (IIS)。可以用 PHP 或其他服务器语言，简单地重写该页面。
请看在 PHP 中对应的例子（测试：缺具体页面）。
这段代码执行针对数据库的 SQL 查询，并以 XML 文档返回结果：
<% response.expires=-1 response.contenttype="text/xml" sql="SELECT * FROM CUSTOMERS " sql=sql & " WHERE CUSTOMERID='" & request.querystring("q") & "'" on error resume next 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 if err <> 0 then response.write(err.description) set rs=nothing set conn=nothing else response.write("") response.write("") response.write(" ") end if on error goto 0 %>" &rs.fields("companyname")& " ") response.write("" &rs.fields("contactname")& " ") response.write("" &rs.fields("address")& "") response.write("" &rs.fields("city")& " ") response.write("" &rs.fields("country")& " ") response.write("请注意上面的 ASP 代码中的第二行：response.contenttype="text/xml"。ContentType 属性为 response 对象设置了 HTTP 内容类型。该属性的默认值是 "text/html"。这次我们把内容类型设置为 XML。
然后我们从数据库中选取数据，并使用这些数据构建 XML 文档。