ajax学习笔记之一

　　Ａajax概述

　　05年２月份，Adaptive Path公司发表了一片名为“ajax :一种ＷＥＢ应用的程序开发的新方法”的文章。从此以后，ajax慢慢的被人们重视起来。但早期的ajax 的实现技术是比较早的隐藏帧技术。微软认识到了隐藏帧技术和隐藏iframe技术的流行，因此开发了XMLHttp，并且以ActiveX对象的形式引入。推动了web2.0的进程.

　　首先应用在ＩＥ浏览器上，继而。Mozilla,Opera,Safari也相继开发了自己的XMLHTTPRequest对象类支持ajax。

 

　　１ajax开发的原则.

　　尽量减少通信：发送的和接受的数据尽可能的少

　　没有意外

　　遵循常规

　　无干扰

　　可访问性

　　避免下载整个页面

　　用户第一

 

　　２ajax背后的技术

　　HTML/XHTML

      CSS

      DOM

      XML

      XSLT

      XMLHttp

      javaScript

 

    Ｂhttp协议的状态码枚举

　　１

　　200找到了资源，并且一切正常

      304该资源上次请求后没有修改，通常用于浏览器的缓存机制

      401用户无权访问该资源

      403客户未能获得授权

      404指定的位置不存在要找的资源

 

　　２XMLHTTPRequest对象

　　IE5.0加入ＸＭＬ支持，也引入了名MSXML的ActiveX的程序库。然后Mozilla,Safari,Opera等也实现了自己的XMLHTTPRequest,统称为XHR对象。

     创建XHR对象：IE7以前

 

var oXHR=new ActiveXObject("Microsoft.XMLHttp");

   这个对象有很多的实现版本，微软建议是用3.0这个版本。通常在IE下面要去尝试浏览器具体是用的是哪个版本的ActiveX对象，因此，在创建的时候就有可能产生异常。

function createXHR(){

   var aVersions={"MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0"};
   for(va i=0;i<aversions.length;i++){
        tyr{
            var oXHR=new ActiveXObject(aVersions[i]);
            return oXHR;
           }catch(oError){}

   }

}
  throw new Error("MSXML is not installed.");

}

    幸好，在mazilla,safari,opera和ie7使用的代码是相同的

 

var oXHR=new XMLHttpRequest();

 这样就有了多个方法来创建这个对象，当然拥有一中创建XHR对象的跨浏览器的方法很有好处。可以修改函数如下。

 

function createXHR(){
  if(typeofXMLHttpRequest!="undefined"){
     return new XMLHttpRequest();

}else if(window.ActiveXObject){
   var aVersions={"MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0"};
   for(va i=0;i<aversions.length;i++){
        tyr{
            var oXHR=new ActiveXObject(aVersions[i]);
            return oXHR;
           }catch(oError){}

   }

   3使用XHR对象

 

var oXHR=new XMLHttpRequest();//这里表示除IE外的浏览器的创建方法
oXHR.open("get","info.txt",true);

    request type:请求类型 post,get,还有其它的，但不是被所有的浏览器支持。

    URL  :请求目标

    async:是否异步true表示异步。

   接着要定义一个onreadystatechange的事件处理函数。XHR有一个名为readState的属性。共有5种取值。

 

    0对象已经创建，未初始化open()方法

    1open方法已经调用，请求未发送

    2请求已经发送

    3收到部分响应

    4所有数据已经收到，连接已经关闭

 

var oXHR=new XMLHttpRequest();//这里表示除IE外的浏览器的创建方法
oXHR.open("get","info.txt?id=123",true);
oXHR.onreadystatechange==function(){ //如果是同步请求，那么就不需要这个函数
 if(oXHR.readyState==4){
  alert("Got response.");
}

}

 

最后一步就是发送

 

oXHR.send(null);//这里如果是get，则必须写null，post就像对象的引用。

 关于post请求

 

function sendRequestPost(){
    var oForm=document.forms[0];
    var sBody=getRequestBody(oForm);
    
   var oXHR=new XMLHTTPRequest();
   oXHR.open("post",oForm.action,true);
   oXHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   oXHR.onreadystatechange=function(){
        if(oXHR.readyState==4){
            if(oXHR.status==200){
              alert(oXHR.responseText);
          }
     }
}

oXHR.send(sBody);
}

 缓存控制，只要对浏览器重复调用，就必须考虑缓存的控制。这里可以使用Cache-Control 或Explres来设置

 

Cache-Control:no-cache
Expires:Fri,30 Oct ...

 

总结：ajax技术有他的不少优点，但也是有限制的。在IE上，要求用户必须启用ActiveX控件，如果用户禁用ActiveX控件，我们就无法访问XHR对象，这个时候就只能使用隐藏帧技术。