您现在的位置:首页 >> 前端 >> 内容

原生封装ajax

时间:2017/7/24 10:08:40 点击:

  核心提示:项目开发中,在进行数据交互的时候,经常会用到ajax请求。现在用原生JS对ajax进行了封装,具体代码如下:/* * ajax组件 */module.exports = function (windo...

项目开发中,在进行数据交互的时候,经常会用到ajax请求。现在用原生JS对ajax进行了封装,具体代码如下:

/*
 * ajax组件
 */
module.exports = function (window, undefined) {
    var UhAjax = {
        ajaxFunction:function(){
            var xmlHttp;
            try{ 
                // Firefox, Opera 8.0+, Safari
                xmlHttp = new XMLHttpRequest();
            }
            catch (e){
                try{
                    // Internet Explorer
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e){}
                }
            }
            return xmlHttp;
        },
        ajax:function(ajaxUrl, method, data, callback){
            var xmlHttp = UhAjax.ajaxFunction();
            xmlHttp.onreadystatechange = function(){
                if(xmlHttp.readyState == 4){
                    if(xmlHttp.status==200||xmlHttp.status==304){
                        callback(JSON.parse(xmlHttp.responseText));
                    }
                }
            }
            //打开连接
            xmlHttp.open(method,ajaxUrl,true);
            //设置响应头
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //发送请求
            xmlHttp.send("data=" + data);
        }
    };
    window.UhAjax = UhAjax;
    return UhAjax;
}(window);
用法如下:
var ajaxUrl = "xxx";
UhAjax.ajax(ajaxUrl, 'get', null, function(data){
    console.log(data);
});

作者:网络 来源:蒲厷渶と戀的博客