ajax：Asynchronous JavaScript and XML”（异步JavaScript和XML)
json：javascript object Notation
ajax原理和XmlHttpRequest对象
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。
function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementById("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。
对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：
a、向服务器提交数据的类型，即post还是get。
b、请求的url地址和传递的参数。
c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。
Send方法用来发送请求。
知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。
现在，我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。
6、ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
7、ajax的缺点
下面我着重讲一讲ajax的缺陷，因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。
下面所阐述的ajax的缺陷都是它先天所产生的。
1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2、安全问题
技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
XMLHTTPREQUEST
一、 简介
AJAX，一个异步JavaScript和XML的缩略词，是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着，例如，你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据，把数据发送到存储在一个数据库的服务器脚本，或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而，在这项新技术提供巨大能力的同时，它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。
首先，我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件，但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后，你将会明白什么是AJAX，在什么情况下，为什么以及怎样使用这项技术。你将要学习，在保持给用户提供直观体验的同时怎样创建对象，发出请求以及定制响应。
我已创建了一个适合于本文的示例工程(你可以下载源代码)。这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。
二、 常规属性和方法
表1和2提供了一个属性和方法的概述-它们为Windows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和Opera等浏览器所支持。
表1属性
属性 描述
onreadystatechange 当请求对象变化时该事件处理器激活。
readyState 返回指示对象的当前状态的值。
responseText 来自服务器的响应串的版本。
responseXML 来自服务器的响应的DOM兼容的文档对象。
status 来自服务器的响应的状态码。
statusText 以一个字符串形式返回的状态消息。
表2方法
方法 描述
Abort() 取消当前HTTP请求。
getAllResponseHeaders() 检索所有的HTTP头值。
getResponseHeader("headerLabel") 从响应体中检索一个HTTP头部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 初始化一个MSXML2.XMLHTTP请求，并从该请求指定方法，URL和认证信息。
send(content) 发送一个HTTP请求到服务器并接收响应。
setRequestHeader("label", "value") 指定一个HTTP头的名字。
三、 从哪里开始
首先，你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与目标工程驻留在相同的服务器上。
下一步，创建发出请求的HTML文件。当页面通过使用页面主体中的onload方法进行加载时，该请求发生。接着，该文件需要一个有ID的div标签，这样当我们准备好要显示内容时就可以对之进行定位。当你做完所有这些，你的页面的主体看上去如下：
＜body οnlοad="makeRequest('xml/content.xml'); "＞
＜div id="copy"＞＜/div＞
＜/body＞
四、 创建请求对象
为了创建请求对象，你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象; 而Mozilla，Netscape 7，Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式：Opera，Mozilla，Netscape和Safari允许你简单地调用该对象的构造器，但是Windows IE需要把对象的名字传递到ActiveX构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例：
if(window.XMLHttpRequest)
{ request = new XMLHttpRequest(); }
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP"); }
五、 发出请求
现在既然你已经创建了你的请求对象，那么你已经为向服务器发出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后，该事件处理器方法将在状态发生变化时作出响应。一旦我们完成请求，我们就开始创建这个方法。打开连接以GET或POST一个定制的URL-在此是一个content.xml，并且设置一个布尔定义-是否你想要进行异步调用。
现在到了发出请求的时间了。在这个示例中，我使用了null，因为我们使用的是GET; 为了使用POST，你需要使用下面这个方法发出一个查询串：
request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null);
六、 定制加载和错误处理消息
你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的时候了。在这个实例中，我针对所有的装载状态代码提供反馈，并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状态，readyState属性包括显示在下表中的一些值。
值 描述
0 未初始化，对象没有用数据进行初始化。
1 装载中，对象正在装载它的数据。
2 装载结束，对象完成了它的数据的装载。
3 可交互，用户能与对象交互了，尽管它还没有装载结束。
4 完成，对象已经完全被初始化。
W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:
?200:请求成功了。
?404:服务器没有找到与所请求的文件相匹配的任何东西。
最后，我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意，我在定位我们前面在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:
if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request..."; }
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response..."; }
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded..."; }
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready..."; }
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定向到另外一个页面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}
当状况代码为200时，这意味着请求成功。下面开始进行响应了。
七、分析响应
当你准备好分析来自请求对象的响应时，真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的，在开发期间，可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点，首先使用你创建的请求对象，定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定位到documentElement-它检索一个到XML响应的根结点的参考。
var response = request.responseXML.documentElement;
现在既然你有了到响应的根结点的参考，那么你可以使用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个childNode：
response.getElementsByTagName('header')[0].firstChild.data;
使用firstChild.data可以允许你存取该元素中的文本：
response.getElementsByTagName('header')[0].firstChild.data;
下面是怎样创建这些代码的完整的例子：
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;
八、需求分析
现在既然你知道怎样使用AJAX的基础知识，那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是，在你还没有刷新页面时你无法使用"Back"按钮。为此，可以先专注于你的工程中的一小部分-它能够从使用这种类型的交互中受益。例如，你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时，它能够把数据发送到一个脚本中并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的; 并且这种使用无论对开发者还是用户都会带来益处; 这全依赖于具体的条件和执行情况。
还有其它方法可用来解决"Back"按钮的问题，例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给用户带来更大的好处。
九、结论
尽管AJAX允许我们构建新的和改进的方式来与一个WEB页面进行交互; 但是作为开发者，我们需要牢记产品是不考虑技术的; 它关心的是用户以及其如何与用户进行交互。没有了用户群，我们构建的工程毫无用处。基于这个标准，我们就能评估应该使用什么技术以及何时使用它们来创建对相应用户有用的应用。
json：javascript object Notation
ajax原理和XmlHttpRequest对象
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。
function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementById("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。
对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：
a、向服务器提交数据的类型，即post还是get。
b、请求的url地址和传递的参数。
c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。
Send方法用来发送请求。
知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。
现在，我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。
6、ajax的优点
Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
7、ajax的缺点
下面我着重讲一讲ajax的缺陷，因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。
下面所阐述的ajax的缺陷都是它先天所产生的。
1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
2、安全问题
技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
XMLHTTPREQUEST
一、 简介
AJAX，一个异步JavaScript和XML的缩略词，是最近出来的技术词语。异步意味着你可以经由超文本传输协议(HTTP)向一个服务器发出请求并且在等待该响应时继续处理另外的数据。这就意味着，例如，你可以调用一个服务器端脚本来从一个数据库中以XML方式检索数据，把数据发送到存储在一个数据库的服务器脚本，或者简单地装载一个XML文件以填充你的Web站点而不需刷新该页面。然而，在这项新技术提供巨大能力的同时，它也引起了在"Back"按钮问题上的很多争论。本文将帮助你确定在真实世界中何时使用AJAX是最佳选择。
首先，我假定你对缩略词JavaScript和XML部分有一个基本了解。尽管你能通过AJAX请求任何类型的文本文件，但是我在此主要集中讨论XML。我将解释怎样在真实世界中使用AJAX以及怎样在一个工程中评估它的价值。在你读完本文后，你将会明白什么是AJAX，在什么情况下，为什么以及怎样使用这项技术。你将要学习，在保持给用户提供直观体验的同时怎样创建对象，发出请求以及定制响应。
我已创建了一个适合于本文的示例工程(你可以下载源代码)。这个示例实现了一个简单的请求-它装载一个包含页面内容的XML文件并且分析数据以把它显示在一个HTML页面中。
二、 常规属性和方法
表1和2提供了一个属性和方法的概述-它们为Windows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和Opera等浏览器所支持。
表1属性
属性 描述
onreadystatechange 当请求对象变化时该事件处理器激活。
readyState 返回指示对象的当前状态的值。
responseText 来自服务器的响应串的版本。
responseXML 来自服务器的响应的DOM兼容的文档对象。
status 来自服务器的响应的状态码。
statusText 以一个字符串形式返回的状态消息。
表2方法
方法 描述
Abort() 取消当前HTTP请求。
getAllResponseHeaders() 检索所有的HTTP头值。
getResponseHeader("headerLabel") 从响应体中检索一个HTTP头部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) 初始化一个MSXML2.XMLHTTP请求，并从该请求指定方法，URL和认证信息。
send(content) 发送一个HTTP请求到服务器并接收响应。
setRequestHeader("label", "value") 指定一个HTTP头的名字。
三、 从哪里开始
首先，你需要创建XML文件-后面我们对之进行请求并作为页面内容进行分析。你正在请求的文件必须与目标工程驻留在相同的服务器上。
下一步，创建发出请求的HTML文件。当页面通过使用页面主体中的onload方法进行加载时，该请求发生。接着，该文件需要一个有ID的div标签，这样当我们准备好要显示内容时就可以对之进行定位。当你做完所有这些，你的页面的主体看上去如下：
＜body οnlοad="makeRequest('xml/content.xml'); "＞
＜div id="copy"＞＜/div＞
＜/body＞
四、 创建请求对象
为了创建请求对象，你必须检查是否浏览器使用XMLHttpRequest或ActiveXObject。这两个对象之间的主要区别在于使用它们的浏览器。Windows IE 5 及以上版本使用ActiveX对象; 而Mozilla，Netscape 7，Opera和Safari 1.2及以上版本使用XMLHttpRequest对象。另外一个区别是你创建对象的方式：Opera，Mozilla，Netscape和Safari允许你简单地调用该对象的构造器，但是Windows IE需要把对象的名字传递到ActiveX构造器中。下面是怎样创建代码来决定要使用哪个对象和怎样创建它的示例：
if(window.XMLHttpRequest)
{ request = new XMLHttpRequest(); }
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP"); }
五、 发出请求
现在既然你已经创建了你的请求对象，那么你已经为向服务器发出请求作了准备。创建一个到事件处理器的参考以听取onreadystatechange事件。然后，该事件处理器方法将在状态发生变化时作出响应。一旦我们完成请求，我们就开始创建这个方法。打开连接以GET或POST一个定制的URL-在此是一个content.xml，并且设置一个布尔定义-是否你想要进行异步调用。
现在到了发出请求的时间了。在这个示例中，我使用了null，因为我们使用的是GET; 为了使用POST，你需要使用下面这个方法发出一个查询串：
request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null);
六、 定制加载和错误处理消息
你为onreadystatechange方法创建的事件处理器正是集中进行加载和处理错误的场所。现在到了考虑用户并针对他们与之交互的内容的状态提供反馈的时候了。在这个实例中，我针对所有的装载状态代码提供反馈，并且也对最经常发生的错误处理状态代码提供一些基本的反馈。为了显示请求对象的当前状态，readyState属性包括显示在下表中的一些值。
值 描述
0 未初始化，对象没有用数据进行初始化。
1 装载中，对象正在装载它的数据。
2 装载结束，对象完成了它的数据的装载。
3 可交互，用户能与对象交互了，尽管它还没有装载结束。
4 完成，对象已经完全被初始化。
W3C中有很长的一串有关HTTP状态代码的定义。我选择了两个状态代码:
?200:请求成功了。
?404:服务器没有找到与所请求的文件相匹配的任何东西。
最后，我检查任何另外的状况代码-它们将生成一个错误并提供一个一般错误信息。下面是一个代码示例-你可以用之来处理这些情况。注意，我在定位我们前面在HTML文件的主体中创建的div ID并且对它应用装载和/或错误信息-通过innerHTML方法-这个方法用于设置在div对象的开始和结束标签之间的HTML:
if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request..."; }
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response..."; }
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded..."; }
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready..."; }
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一个定制消息或把用户重定向到另外一个页面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}
当状况代码为200时，这意味着请求成功。下面开始进行响应了。
七、分析响应
当你准备好分析来自请求对象的响应时，真正的工作开始了。现在你可以用你请求的数据开始工作。仅为测试目的，在开发期间，可以使用responseText和responseXML属性来显示来自响应的原始数据。为了存取XML响应中的结点，首先使用你创建的请求对象，定位到responseXML属性以检索(你可能已经猜测出来)来自响应的XML。定位到documentElement-它检索一个到XML响应的根结点的参考。
var response = request.responseXML.documentElement;
现在既然你有了到响应的根结点的参考，那么你可以使用getElementsByTagName()以结点名字来检索childNodes。下面一行用一个头部的nodeName来定位一个childNode：
response.getElementsByTagName('header')[0].firstChild.data;
使用firstChild.data可以允许你存取该元素中的文本：
response.getElementsByTagName('header')[0].firstChild.data;
下面是怎样创建这些代码的完整的例子：
var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;
八、需求分析
现在既然你知道怎样使用AJAX的基础知识，那么下一步就是决定是否在一工程使用它。须记住的最重要的事情是，在你还没有刷新页面时你无法使用"Back"按钮。为此，可以先专注于你的工程中的一小部分-它能够从使用这种类型的交互中受益。例如，你可以创建一个表单-它在用户每次输入一个输入字段或一个字母时查询一个脚本以便进行实时校验。你可以创建一个拖放页面-在释放一项时，它能够把数据发送到一个脚本中并把该页面的状态保存到一个数据库中。使用AJAX的理由毫无疑问是存在的; 并且这种使用无论对开发者还是用户都会带来益处; 这全依赖于具体的条件和执行情况。
还有其它方法可用来解决"Back"按钮的问题，例如使用Google Gmail-它现在能够为你的操作提供一种撤消功能而不刷新该页面。以后还会出现许多更具创造性的例子-它们将通过提供给开发者创建独特实时的体验的手段给用户带来更大的好处。
九、结论
尽管AJAX允许我们构建新的和改进的方式来与一个WEB页面进行交互; 但是作为开发者，我们需要牢记产品是不考虑技术的; 它关心的是用户以及其如何与用户进行交互。没有了用户群，我们构建的工程毫无用处。基于这个标准，我们就能评估应该使用什么技术以及何时使用它们来创建对相应用户有用的应用。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
