码迷,mamicode.com
首页 > Web开发 > 详细

封装原生JS实现Ajax

时间:2015-05-02 12:27:06      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:

通过createXHR()函数创建一个XHR对象:

function createXHR() {
    if (window.XMLHttpRequest) {    //IE7+、Firefox、Opera、Chrome 和Safari
         return new XMLHttpRequest();
    } else if (window.ActiveXObject) {   //IE6 及以下
        var versions = [‘MSXML2.XMLHttp‘,‘Microsoft.XMLHTTP‘];
        for (var i = 0,len = versions.length; i<len; i++) {
            try {
                return new ActiveXObject(version[i]);
                break;
            } catch (e) {
                //跳过
            }    
        }
    } else {
        throw new Error(‘浏览器不支持XHR对象!‘);
    }
}

PS: IE7+、Firefox、Opera、Chrome 和Safari 都支持原生的XHR 对象,在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest 即可,如果是IE6 及以下,那么我们必须还需要使用ActiveX 对象来实现。在低版本IE 浏览器可能会遇到不同版本的XHR 对象,所以将它们放到一个数组里,然后循环,尝试创建一个XHR对象,若成功,则终止循环。然后调用该函数即可创建一个XHR对象:

var xhr = createXHR();    //创建XHR对象

OK,下面就来进行封装:

//封装ajax,参数为一个对象
function ajax(obj) {
    var xhr = createXHR();    //创建XHR对象
    //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
    obj.url = obj.url + ‘?rand=‘ + Math.random();
    obj.data = params(obj.data);  //通过params()将名值对转换成字符串
    //若是GET请求,则将数据加到url后面
    if (obj.method === ‘get‘) {
        obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ + obj.data : ‘&‘ + obj.data; 
    }
    if (obj.async === true) {   //true表示异步,false表示同步
        //使用异步调用的时候,需要触发readystatechange 事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {   //判断对象的状态是否交互完成
                callback();         //回调
            }
        };
    }
    //在使用XHR对象时,必须先调用open()方法,
    //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
    xhr.open(obj.method, obj.url, obj.async);
    if (obj.method === ‘post‘) {
        //post方式需要自己设置http的请求头,来模仿表单提交。
        //放在open方法之后,send方法之前。
        xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
        xhr.send(obj.data);        //post方式将数据放在send()方法里
    } else {
        xhr.send(null);        //get方式则填null
    }
    if (obj.async === false) {  //同步
        callback();
    }
    function callback() {
        if (xhr.status == 200) {  //判断http的交互是否成功,200表示成功
            obj.success(xhr.responseText);            //回调传递参数
        } else {
            alert(‘获取数据错误!错误代号:‘ + xhr.status + ‘,错误信息:‘ + xhr.statusText);
        }    
    }
}

//名值对转换为字符串
function params(data) {
    var arr = [];
    for (var i in data) {
        //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
        arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));
    }
    return arr.join(‘&‘);
}

然后,比如给某一个按钮加一个点击绑定事件来调用ajax方法:

ajax({
    method : ‘post‘,
    url : ‘demo.php‘,
    data : {
        ‘name‘ : ‘JR‘,
        ‘age‘ : 22
    },
    success : function (message) {
        alert(message);
    },
    async : true
});

ps:下面附上学习笔记——GET请求和POST请求的对比

GET方式

POST方式

同一个地址不重复执行 每次都执行
可被缓存 不可缓存
把参数数据队列加到提交表单的action属性所指的URL中,值和表单内各个字段一 一对应,在URL中可以看到 通过HTTP POST机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址,用户看不到这个过程
服务器端用Request.QueryString 获取变量的值 服务器端用Request.Form 获取提交的数据
传送的数据量较小,不能大于2KB 传送的数据量较大,一般被默认为不受限制,但理论上,因服务器的不同而异
安全性非常低 安全性较高
method 为get时,action页面后边带的参数列表会被忽视 method 为post时,action页面后边带的参数列表不忽视,故不一样
它将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数之间用&区分 数据是放在HTTP主体中的,其组织方式不止一种,有&连接方式,也有分隔符方式,可隐藏参数,传递大批数据,比较方便

封装原生JS实现Ajax

标签:

原文地址:http://www.cnblogs.com/jr1993/p/4471789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!