Ajax

最近写博比较频繁，主要是为了将自己平时零散的知识点总结一下，让自己的知识能成一下体系。

今天把高程的Ajax部分看完了，简单梳理一下，如有理解不到位的地方，也请各位网友指点一下，抱拳！

 

先上大段代码

//处理IE7之前版本的兼容并创建XHR对象;
function createXHR(){
    if(typeof XMLHttpRequest != "undefined"){
        //如果存在XMLHttpRequest则直接使用该对象
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != "undefined"){
        //以下均为处理IE兼容问题
        if(typeof arguments.callee.activeXString != "string"){
            var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
            var len=null;
            for (var i=0; len=versions.length; i < len; i++) {
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString=versions[i];
                    break;
                }catch(ex){
                    //do something
                };
            };
        };
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        //如果没有XHR对象可用的话，也需要处理一下
        throw new Error("No XHR Object Available");
    }
};

var xhr=createXHR();//创建变量xhr

//在调用open之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性
xhr.onreadystatechange=function(){
    //监控xhr的状态：readyState的值有5个，每次值改变都会触发一次readystatechange
    //readyState==0 ---→未初始化，尚未调用open方法
    //readyState==1 ---→启动，调用open尚未调用send
    //readyState==2 ---→发送，调用send尚未接收到相应
    //readyState==3 ---→接收，收到部分响应数据
    //readyState==4 ---→完成，接收到全部响应数据且可以在客户端使用了
    if(xhr.readyState==4){
        if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
            //200为响应成功的标志，304表示资源没有被修改
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful:"+xhr.status);
        };
    };
};
xhr.open("get","example.txt",true);
xhr.send(null);
//xhr.abort();//在接收到响应之前调用该方法可以取消异步请求

以上是最简单的一个Ajax请求的过程，大概的流程如下：

1.先定义一个XMLHttpRequest对象，这里的难点就是需要考虑IE兼容；

2.启动一个请求以备发送open():该方法接收三个参数（实际可以接收5个，不过处于安全考虑，不建议使用）：要发送的请求类型（“get”，“post”）,请求的URL和表示是否异步的布尔值；这里还涉及到跨域问题，后面会提到；

3.发动特定请求send(null):接收一个参数，即要作为请求主体发送的数据。如果不需要的话，也需要写一个null作为参数。

4.检查响应状态，根据不同的状态，做出不同的处理，这部分代码一般写在open方法之前，主要是为了处理跨浏览器兼容问题。

 

jQuery里已经将Ajax封装好了，调用很方便。

$.ajax({

     type: 'POST',

     url: url ,

    data: data ,

    success: success ,

    dataType: dataType

});

 

以上写的很简单，其实Ajax还是很复杂的，w3c上介绍的很详细，一点点慢慢看。其实前端发展了这么多年了，基本大神们已经把各种东西都总结出来了，资料也很多。

http://www.w3school.com.cn/jquery/ajax_ajax.asp

 

---

 

补充GET和POST的区别

---

 

讲到Ajax就不得不提GET和POST，二者的区别也是常被提起的，在网上也看了很多相关的文章，现把大家总结好的且是大多数人接受的一个区别列出来：

1. get是从服务器上获取数据，post是向服务器传送数据。（这个基本上是没有异议的）

2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
　　（这个其实是大家默认的一种约定）

3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
　　（这里说的get传送数据量小其实并不是指get本身，二是说URL有一个长度限制，这个根据浏览器不同而不同，但是其实很多现代浏览器也并没有真的限制URL的长度，只是URL的长度会影响服务器响应的效率。所以这个应该不算是get和POST的区别。）

5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。 
　　（现在在日常使用中，其实很多人也会把get的数据进行一个encode处理，这样很多人也很难一眼就从URL中读取到实际数据了，如果说可以进行encode解析，那么这个人应该也有能力截取POST发送包吧...）

以上关于get和POST的区别黑体字部分是一般大家默认的，也是面试过程中面试官希望大家回答的，记住就好了；红色字体部分，可能是更深层次的东西吧，因为我没做过服务器端的工作，对这些，暂时还不敢较真，不过，先列出来，有技术大神可以指点一二，日后自己有机会更多的接触该部分，也会回来自己做一个校正。