AJAX相关简介

2005年，Adaptive Path公司的Jesse James Garrett发明了这个词，用于概括一步加载页面内容技术。既：使用AJAX技术既可以做到只更新页面中的一小部分。其他内容——标志、导航、头部、脚部，都不用重新加载。

AJAX的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用用整个页面来响应请求，他会在后台处理请求，与此同时，用户还能继续浏览页面并与之交互。你的脚本则可以按需要加载和创建页面内容，而不会打断用户的浏览体验。

和任何新技术一样，AJAX有他自己的适用范围，他依赖JAVASCRIPT。所以可能会有浏览器不支持他，而搜索引擎的蜘蛛程序也不会抓取到有关内容。

AJAX技术的核心就是XmlHttpRequest对象的标准还比较新，但是这个对象的历史可谓久远，因为得到了几乎所有现代浏览器的支持。但不同的浏览器实现XmlHttpRequest对象的方式不太一样，为了保证跨浏览器，你需要为同样的事情，写不同的代码分支。

下面我们来看一个简单的例子，一下的代码是ajax.html文件夹中的代码：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>Ajax</title>  
 </head>
 <body>
  <div id="new"></div>
  <script src="scripts/addLoatEvent.js"></script>
  <script src="scripts/getHttpObject.js"></script>
  <script src="scripts/getNewContent.js"></script>
 </body>
</html>

在同一个文件夹下面，我们还创建了另一个文件example.txt，来充当服务器端脚本的输出。多数情况下，服务器端脚本在接到请求后，还会做出一番处理在输出结果。这里我们简化了这个过程，只存储了一句话，用来显示服务器端接收到客户端请求之后，返回的一句话：

This was loaded asynchronously!

微软最早在IE5中以ActiveX对象的形式实现了一个名叫XMLHTTP的对象，而其他浏览器则基于XMLHttpRequest来创建新对象，所以，为了兼容所有的浏览器，在scripts/getHttpObject.js文件中的getHttpObject函数要这样来写：

function getHttpObject(){
  if(typeof XMLHttpRequest == "undefined")
   XMLHttpRequest = function(){
    try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch(e){}
    try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch(e){}
    try{ return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch(e){}
    return false;
}
   return new XMLHttpRequest(); 
}

在scripts/getNewContent.js文件中的getNewContent方法要这样写：

function getNewContent(){
  var request = getHttpObject();
  if(request){
    request.open("GET","example.txt",true);
    request.onreadystatechange = function(){
     if(request.readyState == 4){
     alert("Response Received~");
     var para = document.createElement("p");  
     var txt = document.createTextNode(request.responseText);
     para.appendChild(txt);
     document.getElementById("new").appendChild(para);
}
};
     request.send(null);
}esle{
  alert("Sorry,Your browser doesn't support XMLHttpRequest~");

}
 alert("Function Done~");
}

addLoadEvent(getNewContent);

其中，open方法指定服务器上面将要访问的文件，指定请求类型有：GET，POST或者SEND，此处是GET，这个方法的第三个参数用于指定请求是否以异步方式发送和处理。
onreadystatechange是一个事件处理函数，他会在服务器给XMLHttpRequest对象送回响应的时候被触发。可以根据服务器的具体响应做出响应的处理。注意：在为onreadystatechange指定函数引用时，不要再函数名后面加括号。因为加括号表示立即调用，而我们在此只是想把函数自身的引用（而不是函数的结果）赋值给onreadystate-change属性。

除了浏览器支持XMLHttpRequest对象的情况下，getHttpObject会返回相应的对象之外，还要考虑浏览器不支持XMLHttpRequest的情况，也要做出相应的处理，即request.send(null);

服务器在向XMLHttpRequest对象发回响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值，他可能有5个值：

0 表示未初始化
1 表示正在加载
2 表示加载完毕
3 表示正在交互
4 表示完成

访问服务器发送回来的数据要通过两个属性完成。一个是responseText属性，这个属性用于保存文本字符串形式的数据。另一个属性是responseXML属性，用于保存Content-Type头部中指定为“text/xml”的属性，其实是一个DocumentFragment对象。

注意：异步请求有一个容易被忽略的问题是异步性，就是脚本在发送XMLHttpRequest请求之后，仍会继续执行，不会等待响应返回。如上述函数中加载的alert显示框一样，很可能显示“Function Done~” 的警告框会先于“Request Received”的警告框出现，这就证明了脚本不会等待send的相应，而是会继续执行。

另一个scripts/addLoadEvent.js文件夹下面的addLoadEvent方法如下：

function addLoadEvent(func){
  var oldOnLoad = window.onload;
  if(typeof window.onload != 'function'){
  window.onload = func;
}else{
  window.onload = function(){
  oldOnLoad;
  func;
}
}  
}

这个方法在此就不做赘述了，是为了让window.onload方法一次性能够加载多个函数，而做出响应的处理的函数。

Ajax技术还给我们带来了很多的好处：

可以增强站点的可用性，用户无需刷新页面，从而可以很快的得到响应。
减少重复加载页面的次数。但这种缺少状态记录的技术会与浏览器的一些使用惯例产生冲突，导致用户无法使用后退按钮或者无法为特定状态下的页面添加书签。
只更新部分页面区域的特性，也会影响到用户的预期。理想情况，用户的每一次操作都应该得到一个清晰明确的结果。

posted @ 2013-01-23 18:09 天之涯，海之角阅读(267) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

AJAX相关简介

公告