jQuery - 初探ajax

Posted mz33

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery - 初探ajax相关的知识,希望对你有一定的参考价值。

  在学习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(/^2d{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的参数使用了

 

  一起加油吧~

 

 

 

 

 
 

 

以上是关于jQuery - 初探ajax的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

几个非常实用的JQuery代码片段

jQuery高级Ajax

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

使用 JQuery ajax 在 DOM 操作后附加事件