AJAX请求(原生js,jQuery)

概念

ajax (Asynchronous JavaScript and XML)

• 异步：（不会阻塞js脚本的运行）能够同时干多件事，比如发信息聊天，不用等别人回复就能继续干自己的事。

• 同步：同一时间只能干一件事，比如:通过打电话聊天。

• ajax可以设置为同步请求，open的第三个参数即为设置请求是否为异步，默认为true，false为同步

• 优点：实现网页的局部刷新

ajax请求四步走

            //ajax请求
            let baseUrl = "http://120.76.31.111/app";
            function getData(){
                
                //第一步
                let xhr = new XMLHttpRequest();
                //第二步
                xhr.open("get",baseUrl+"/XhlGetSubjectTypeList");
                //第三步
                xhr.send();
                //第四步
                /*
                 * readyState:状态值，用来监听请求是否发送成功，有5个值
                 * 0：还没初始化请求，也就是在open请求的状态值为0；
                 * '1'：open后
                 * '2'：表示发出请求，即send后
                 * '3'：表示后天已经接收到请求，但没有全部接收
                 * '4'：数据接收完成
                 * 的数据未更新
                 *
                 * status:状态码，用来监听后台是否愿意给你回复信息
                 *      404：请求的资源没找到
                 *      500：服务器错误
                 *      200：数据返回成功
                 *      304：请求
                 */
                xhr.addEventListener('readystatechange',function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        console.log(xhr);
                        //字符串转对象JSON.parse()
                        let res = JSON.parse(xhr.responseText);
                        console.log(res);
                        renderData(res);
                    }
                })
            }

封装和调用

• 封装

(function(_window){
    function my_ajax(_type,_url,callback,_data){
        var str="";
        for(var i in _data){//处理传入数据
            str += i+"="+_data[i]+"&";
        }
        str = str.slice(0,-1);
        if (window.XDomainRequest) {//兼容IE9跨域
            xhr = new XDomainRequest();
            xhr.onload = function () {
                try{
                    var result = JSON.parse(xhr.responseText);
                    callback(result);
                }catch(e){              
                    callback(xhr.responseText);
                }
            }
        }else{
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("readystatechange",function(){
                if(xhr.readyState == 4&&xhr.status==200){
                    try{                
                        var result = JSON.parse(xhr.responseText);
                        callback(result);
                    }catch(e){              
                        callback(xhr.responseText);
                    }
                    
                }
            })
        }
        if(_type=="get"||_type=="GET"){
            xhr.open(_type,_url+"?"+str);
            xhr.send();
        }else if(_type=="post"||_type=="POST"){
            xhr.open(_type,_url);
            xhr.send(str);
        }
    }
    _window.my_ajax = my_ajax;
})(window)

• 调用

var _url = "http://120.76.31.111/app/gettypeexercisesubject";
//调用封装好的AJAX请求函数，四个参数分别为 请求类型，请求路径，回调函数（获取请求到的数据），拼接地址
 my_ajax("get",_url,function(res){
    console.log(res);
},{
    typeId:1
})

jQuery

            var baseUrl = "http://yaochiwan.bluej.cn";
            //首页
            var carousel = baseUrl + "/carousel/list", //轮播图
                adverList = baseUrl + "/adver/list"; //滚动广告
            
            /*
             * ajax:
             *  1.get请求：$.get(url,data|callback|type)
             *  2.post请求：$.post(url,data|callback|type)
             * 
             * url:请求地址
             * data：请求参数
             * callback：回调函数
             * type：返回的数据类型（格式）
             * 
             * 3.$.ajax(url,[setting])
             */
//          $.get(carousel,{position_id:1},function(res){
//              console.log(res);
//          })
//          
            $.ajax({
                type:'get',
                url:carousel,
                data:{
                    position_id:1
                },
                success:function(res){
                    console.log('成功',res);
                }
            })