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

使用原生JS封装一个ajax

时间:2016-08-09 20:17:25      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

function ajax(data){
    //第一步,创建XHR对象
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();//标准的浏览器
    }else{
        xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);//万恶的IE浏览器
    }
    //第二步,准备发送前的一些配置文件
    var type = data.type == ‘get‘ ? ‘get‘ : ‘post‘;
    var url = ‘‘;
    if(data.url){
        url = data.url;
        if(type == ‘get‘){
            url += "?" + data.data + "&_t + new Date().getTime();
        }
    }

    var flag = data.asyn == ‘true‘ ? ‘true‘ : ‘false‘;
    xhr.open(type,url,type);
    //第三步,执行发送的动作
    if(type == ‘get‘){
        xhr.send(null);
    }else{
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(data.data);
    }
    //指定回掉函数
    xhr.onreadystatechange = function(){
        if(this.readyState == 4){
            if(this.status == 200){
                if(typeof data.success == ‘function‘){
                    var d = data.dataType == ‘xml‘?xhr.responseXML:xhr.responseText;
                    data.success(d);
                }
            }else{
                if(typeof data.failure == ‘function‘){
                    data.failure();
                }
            }
        }
    }
}

其中传入的data属性为:

data={
    data:"",
    dataType:"xml/json",
    type:"get/post",
    url:"",
    asyn:"true/false",
    success:function(){},
    failure:function(){}
}

 

使用原生JS封装一个ajax

标签:

原文地址:http://www.cnblogs.com/xigua1994/p/5754322.html

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