黑马程序员技术交流社区

标题: 原生ajax封装get和post请求 [打印本页]

---

作者: 闪电侠就是我    时间: 2018-5-7 23:24
标题: 原生ajax封装get和post请求
        /**
* 遇上需要异步处理的函数传入回调函数,在异步函数里面运行回调函数就好了
*/

function Post(url,data,callback,type){
        //1,获得ajax对象
        var ajax = getAjax();

        //2,建立一个post请求,open的第二个参数默认为true(表示异步执行),如果改成false表示同步执行,必须先执行2再执行3
        ajax.open('post',url,true);
       
        //3,设置post请求头
        ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
       
        //4,发送请求,里面加上需要发送的数据使用键值对
        ajax.send(data);
       
        //5,设置监听回调函数,当得到ajax请求状态值为4时执行指定代码段
        ajax.onreadystatechange = function(){
               
                if(this.readyState==4){
                       
                        //数据解析方法对象
                        var types = {
                                 'json':function(ajax){
//                                         console.log(ajax);
                                         return JSON.parse(ajax.responseText);
                                 },
                                 'xml':function(ajax){
                                         //如果返回的是xml格式的数据那么在php文件里面必须加上下面这个声明声明,解析xml和使用document对象就可以了
                                         //header('Content-type:text/xml;charset=utf-8');
                                         return ajax.responseXML;
                                 },
                                 'text':function(ajax){
                                         return ajax.responseText;
                                 }
                        };
                       
                        callback(types[type](this));
                }
        }
       
}

//获得ajax对象
function getAjax(){
        var ajax = null;
       
        if(window.XMLHttpRequest){
                //主流浏览器获得ajax对象,w3c和高版本ie(9以上)
                ajax = new XMLHttpRequest();
        }else{
                //低版本ie(6,7,8)
                ajax = new ActiveXObject('Microsoft.XMLHTTP');
        }
       
        return ajax;
}


//get获取请求数据
function Get(url,callback,type){
        //1,获得ajax对象
        var ajax = getAjax();
       
        //2,建立一个http请求,open的第二个参数默认为true(表示异步执行),如果改成false表示同步执行
        //new Date().getTime(),给url加上时间戳来解决ie对get请求php文件时的强制缓存问题
        ajax.open('get',url+new Date().getTime(),true);
       
        //3,发送get请求,里面不填数据就是get请求,
        ajax.send();
       
        //4,设置监听回调函数,当得到ajax请求状态值为4时执行指定代码段
        ajax.onreadystatechange = function(){
                if(ajax.readyState==4){
                        //数据解析方法对象
                        var types = {
                                 'json':function(ajax){
//                                         console.log(ajax);
                                         return JSON.parse(ajax.responseText);
                                 },
                                 'xml':function(ajax){
                                         //如果返回的是xml格式的数据那么在php文件里面必须加上下面这个声明声明,解析xml和使用document对象就可以了
                                         //header('Content-type:text/xml;charset=utf-8');
                                         return ajax.responseXML;
                                 },
                                 'text':function(ajax){
                                         return ajax.responseText;
                                 }
                        };
                       
                        callback(types[type]);
                }
        }
}

---

作者: zhongqiujie    时间: 2018-5-26 11:30
同学，不错啊，66666

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2