Ajax学习笔记

     最近在学习Ajax，怎么说呢，应该学的东西一点都不能偷懒，最后还是要学习的！谁让我的目标是成为前端大白呢？哈哈~
   Ajax是对Asynchronous Javascript XML的简写。Ajax技术的核心是XMLHttpRequest对象，简称为XHR。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获得更多的信息，简单的来说，就是当用户点击之后，可以不必刷新页面也能取得新数据。流程就是，首先使用XHR对象取得新的数据，然后再通过DOM将新数据插入到页面中。很重要的一点，Ajax通信与数据格式无关，不一定必须是XML数据。那么下面要讲的就是大名鼎鼎的XHR啦。

XMLHttpRequest对象

1. 第一步来创建一个XHR对象吧。IE7是一条分界线。
   （1）在IE7之前的版本创建XHR对象很复杂，先上代码吧。

<script type="text/javascript">    function createXHR(){        //callee是一个指针，指向拥有这个arguments的函数，activeXString只是一个自定义属性，仅此而已        if(typeof arguments.callee.activeXString!="string"){            //在IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的            //IE7以下版本，可能会遇到三种不同版本的的XHR对象，"MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXMLHttp"            var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXMLHttp"],                    i,len;            //从最高版本开始创建,如果创建失败,就被catch抓住,不处理,继续循环            for(i=0,len=versions.length;i<len;i++){                try{                    new ActiveXObject(versions[i]);                    arguments.callee.activeXString=versions[i];                    break;                }catch(ex){                    //跳过                }            }        }        return new ActiveXObject(arguments.callee.activeXString);    }</script>

---

（2）IE7+，Firefox、Opera、Chrome和Safari都已经支持原生的XHR对象，这时创建XHR对象就简单多啦,一句话搞定。

var xhr=new XMLHttpRequest();

（3）如果我们考虑到浏览器的兼容性，这时创建代码就应该是（1）和（2）的组合版。

<script type="text/javascript">    function createXHR(){        if(typeof XMLHttpRequest !="undefined"){            return new XMLHttpRequest();        }else if(typeof ActiveXObject !="undefined"){//如果原生对象不存在，检测ActiveX对象是否存在            if(typeof arguments.callee.activeXString!="string"){                var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXMLHttp"],                        i,len;                for(i=0,len=versions.length;i<len;i++){                    try{                        new ActiveXObject(versions[i]);                        arguments.callee.activeXString=versions[i];                        break;                    }catch(ex){                        //跳过                    }                }            }            return new ActiveXObject(arguments.callee.activeXString);        }else{            throw new Errors("No XHR abject available.");//连个对象都不存在，返回错误        }    }    var xhr=createXHR();</script>

2.XHR的用法
      讲完了创建下面就开始使用这个对象了。在使用XHR对象时，要