jQuery - 初探ajax

时间：2020-04-06 23:48:21 收藏：0 阅读：103

　　在学习jQuery中AJAX的时候，看到文档中那么多参数，一眼望去还是有点吓人的，不过理解了用原生JS封装实现ajax ，就可以比较轻松的理解了

原生JS封装AJAX

<script>
    function ajax(options){
        // 设置默认参数
        var _default = {
            type : "GET",
            url : "",
            data : null , 
            datatype : "text",
            status : null,
            success : function(){},
            complete : function(){},
            error : function(){}
        }
        // 用传入的数据对默认数据进行覆盖
        options = assign(_default , options);
        // 将传输的数据类型转换成小写
        options.type = options.type.toLowerCase();

        //回调函数里面this指向的绑定;
        if(isObject(options.context)){
            var callback_list = ["success" , "complete" , "error"];
            callback_list.forEach(function(item){
                options[item] = options[item].bind(options.context)
            })
        }

        var xhr = null;
        if(typeof XMLHttpRequest === "function"){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 判断传输数据的类型
        // 如果数据的传输类型是get ， 则把数据拼接到URL上
        if(options.type === "get"){
            options.url = toUrlData(options.data , options.url , options.type)
        }
        // 如果数据的传输类型是post ， 则把数据拼接到data上
        if(options.type === "post"){
            options.data = toUrlData(options.data , options.url , options.type)
        }
        xhr.open(options.type.toUpperCase() , options.url , true);
        //判断是否post传送方式 ， 设置请求头
        options.type === "post" ? xhr.setRequestHeader("Content-type" , "application/x-www-form-urlencoded") :"";
        // 调用send方法
        xhr.send(options.type === "get" ? null : options.data);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                options.complete();
                if(/^2\d{2}$/.test(xhr.status)){
                    // 传递数据 ， 如果需要转换成json就转化 ， 不需要则原样返回
                    // 如果json报错 ，我们就调用错误函数
                    try{
                        var res = options.datatype === "json" ? JSON.parse(xhr.responseText) : xhr.responseText;
                        options.success(res);
                    }catch(e){
                        options.error(e, xhr.status)
                    }
                }else{
                    options.error("error" , xhr.status)
                }
            }
            // 策略模式调用
            if(isObject(options.status)){
                typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";
            }
        }
    }
　　//合并对象函数
    function assign(){
       var target =  arguments[0];
       for(var i = 1 ; i < arguments.length ; i++ ){
           for(var attr in arguments[i]){
               target[attr] = arguments[i][attr];
           }
       }
       return target
    }
　　//拼接URL地址
    function toUrlData( obj , url , method){
        if(isObject(obj) ){
            var str = "";
            for(var attr in obj){
                str += "&" + attr + "=" + obj[attr]
            }
            str = str.slice(1);
            // 如果数据发送方式是POST，那么直接返回str就可以了;
            method = method || "";
            if( method.toUpperCase() === "POST"){
                return str;
            }
            url += "?" + str;
            return url;
        }
        return url;
    }
　　//判断是不是对象
    function isObject( data ){
        console.log(data.constructor)
        return (typeof data === "object" && data !== null && data.constructor && data.constructor === Object)
    }
　　//设置传递的参数
    var options = {
        url : "./data.php",
        data : {
            a : 2 , 
            b : 4
        },
        type : "post",
        success : function(res){
            console.log(res , this)
        },
        error : function(res){
            console.log("失败" , res)
        },
        complete : function(res){
            console.log("完成")
        },
        context : {ddd : 1},
        status : {
            404 : function(){
                console.log("我找不到页面了")
            },
            200 : function(){
                console.log("我的状态码是200，非常正常");
            }
        }
    }
　　//调用ajax
    ajax(options)
</script>

　　看完了上面用原生JS封装实现AJAX ，下面看看jQuery中的ajax

jQuery中的AJAX

jQuery中ajax有三种写法

写法一：$.getJSON $.getScript 容易使用但是可定制性差

 $.getJSON("./06_data.php" , {data : "hello world"} , function(res){
        console.log(res)
    })

　　// 默认把请求回来的数据当成JS执行

$.getScript("./06_data.js" , function(res){
        console.log(res)
    })

写法二：load $.get $.post ：存在一定的可配置能力

   $("header").load("./06_data.html" , function(){
        // 对元素的操作一定要放在回调函数里面
        $("header").children().css({
            color : "#f99"
        })
    })

    $.get("./06_data.php" , {data : "get请求"} , function(res){
        console.log(res)
    } , "json")

写法三：$.ajax ：可以随意配置 , 同时支持jsonp

  $.ajax({
        url : "./06_data.php" , 
        data :  {data : "hello world"},
        dataType : "json",
        success : function(res){
            console.log(res)
        }
    })

　　$.ajax("./06_data.php" , {

type : "get",

dataType : "html",

success : function(res){

console.log(res)

}

})

 //随意配置 ， 使用参数

　　$.ajax({

url : "./07_data.php",

data : {a : 10 , b : 20},

type : "GET",

dataType : "json",

context : {name : "my context"},

status : {

404 : function(){

500 : function(){

}

});

看完这些，有没有发现jQuery中写法三的和原生封装的JS很像呢，看懂了原生JS的封装，就可以很轻易的理解jq中ajax的参数使用了

　　一起加油吧~