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;itry{
                    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;itry{
                        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对象时，要