AJAX封装

51 0

笔记:

//创建XHR对象
function createXHR() {
    if(typeof XMLHttpRequest != 'undefined') {
        return new XMLHttpRequest(); // ie7+ 及现代浏览器
    }else if(typeof ActiveXObject != 'undefined') {
        var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; //ie6及以下版本
        for(var i = 0;i < versions.length;i++){
            try {
                return new ActiveXObject(versions[i]);
            }catch(e) {
                //跳过
            }
        }
    }else {
        throw new Error('您当前的浏览器不支持XHR对象!');
    }
}


//ajax封装 
function ajax(obj){
    var xhr = createXHR();
    obj.url += '?rang=' + Math.random();
    if(obj.method === 'get') {
        obj.url +=obj.url.indexOf('?') == -1 ? '?' +obj.data : '&' + obj.data;   //这里要假设如果不使用'?rang=' + Math.random()的随机数字方法来使ie不读取缓存的话,就要这样判断
    }
    if(obj.async === true){
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                status();
            }
        }
    }
    xhr.open(obj.method,obj.url,obj.async);
    if(obj.method === 'post') {
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(obj.data);
    }else {
        xhr.send(null);
    }
    if(obj.async === false) {
        status();
    }
function status() {
        if(xhr.status == 200) {
            obj.soccuss(xhr.responseText);   //数据回调
        }else {
            throw new Error('数据返回出错!错误代码:' + xhr.status + '错误信息:' + xhr.statusText);
        }
}
}

//字符转码
function encod(data){
    var arr = [];
    for(var i in data) {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}

//调用代码
addEvent(document,'click',function(){
    ajax({
        method : 'post',
        url : 'demo3.php',
        async : true,
        data : encod({
                name : 'Lee',
                age : 100
        }),
        soccuss : function(text) {
                    alert(text);
                }
    });
})

//兼容添加事件
function addEvent(obj,type,fn) {
    if(obj.addEventListener) {
        obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){
        obj.attachEvent('on'+type,fn);
    };
}
0
  • 本文分类:JavaScript
  • 本文标签:AJAXAJAX封装
  • 流行热度:已超过 51 人围观了本文
  • 发布日期:2018年11月4日 - 21时57分21秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码