jquery中ajax封装原理/封装jquery的ajax工具函数

第一次写博客，如果有些的不对或者不正确的地方，还希望大神们能够批评指正，豌豆拜上！！

Hello,every body!!,豌豆横空出世，哈哈，纠结了很久的第一篇博客即将面世

    当当当.....出场自带bgm哟，话说写博客这个事，也不知道能写多久额，给自己一个鼓励的膜拜吧！！
    ok，果然刚开始不知道写点啥，尴尬...还是开始正题吧！！
    今天给大家分享一下jquery中$.ajax()方法封装的原理，平时数据交互中会经常用到ajax方法，还是很好用的，
    但是底层的封装原理如果了解的话，用起来会更得心应手些


    jquery中Ajax操作进行了封装，在jquery中$.ajax()方法属于最底层的方法,第二层是load()、$.get()和$.post()方法，
    第三层是$.getScript()和$.getJSON()方法。


    重点来啦，$.ajax()方法的结构为：$.ajax(options)
    该方法只有一个参数，但是在这个对象里包含了$.ajax()方法所需求的请求设置以及回调函数等信息，参数以key/value的形式存在，
    所有参数都是可以选的
    ajax参数可以有：
    1:请求方式：type（get/post）
    2:后台接口地址:url（可以从接口文档中查看）
    3:通过data把前端传输后台的必要信息传过去：data（如 name = 'wandou' & sex = 'girl'）
    4:前后端交互的格式：dataType（xml，html，script，json现在最常用的格式之一，jsonp等）
    5：发送请求前所要执行的函数：beforeSend:function(){}
    6:请求完成后调用的回调函数（请求成功或者失败时均调用）complete:function(){}
    7:请求成功后调用的回调函数：success:function(){}
    8:请求失败时被调用的函数：error:function(){}
    ......
    还有好多其他的参数，最近常用到这些，就写这些吧，后面的有想要了解的可以在查阅一下其他的资料
    $.ajax({
        type:'',
        url:'',
        data:{},
        dataType:'',
        beforeSend:function(){


        },
        success:function(){


        },
        complete:function(){


       }
    })
<script src="../jquery-3.2.1.min.js"></script>
    <script>
        //先来看看需求是啥个样纸
        //封装ajax工具函数*/
         //有哪一些不确定的点
         //确定的参数    类型      默认      参数具体值
         //1.请求方式    字符串    get       get,post
         //2.请求地址    字符串    当前地址   后台处理程序的地址（接口地址）
         //3.是否异步    布尔      true      true  false
         //4.发送数据    对象      {}        {name:'Echo',age:10}
         //5.成功回调    函数      -  响应成功的时候要做的事情  （需求来决定）
         //6.失败回调    函数      -  响应失败的时候要做的事情  （需求来决定）






        //现在开始说原理喽
        $(function(){
            $.ajax();
            //$是jquery中涵盖最大的一个对象，全局对象
        });
        window.$={};//这个在这就不多说了
        $.ajax=function(options){
            //判断 形参options是否接受了用户传入的实参
            //如果接受到了，就证明用户传入了实参对象，就可以继续执行后续代码逻辑
            //如果没有接收到，就证明用户没有传入实参，或者用户传入的实参不是对象类型的数据,就可以直接结束代码的执行
            if(!options||typeof options != 'object'){
                return false;
                //options如果没接收到实参，他的值是false那么！options的值是true，
                // （||只要一个是真的那么就是真的）那么短路运算不再执行，直接执行，return false
                //用户输入了实参options的值就是true，！option的值就是false
                //用户如果传入的实参不是对象类型，那么后面的值就是true
                //就会进入if判断，就结束执行
            }
            //参数默认值的处理
            var type=options.type != 'post'?'get':'post';
            //短路运算的或运算，如果第一个值是true就取第一个值，如果第一个值为false就去第二个值
            //第一个值是用户输入的url地址，那么如果用户输入了，第一个值就是true那么就取第一个值(用户输入的url地址)
            //如果用户没有输入url地址，第一个值就是false，这样就取第二个值（当前地址）
            var url=options.url||location.pathname;  //当前地址location.pathname
            var async=options.async===false?false:true;   //判断同步或异步
            var data=options.data||{};


            //默认请求方法时get，那么get方法中前端向后台传输的必要数据写在url后面
            //{name:'Echo',age:19,sex:'gril'}
            //xxx.php?name="Echo"&age=19&sex='gril';
            var dataStr='';
            for(key in data){
                dataStr+=key+'='+data[key]+'&';
                //   键名 =   键值       &
            }
            //多一个&符用slice去掉
            dataStr=dataStr&&dataStr.slice(0,-1);


            //说道这的时候有没有觉得晕晕的了？如果还是很清晰的话，那还是很牛批的哈！接受膜拜吧，大boss来了..
            //发送前回调函数，调用beforeSend:function(){}
            //那么接下里用户呢,如果输入了beforeSend这个属性，那么options.beforeSend值为true
            //反之,options.beforeSend的值为false
            if(options.beforeSend){
                var flag=options.beforeSend();
                if(flag==false){
                    //这个时候阻止ajax的发送
                    return false;
                }
            }
            //ajax编程开始喽 唔哩唔哩轰....
            var xhr=new XMLHttpRequest();
            //请求行
            xhr.open(type,type=='get'?url+dataStr:url,async);
            //请求头
            //get方法不需要设置请求头
            if(type=='post'){
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            }
            //请求主体 发送
            xhr.send(type=='post'?datastr:null);
            //响应
            xhr.onreadystatechange=function(){
                //监听响应状态码（响应状态）
                //通讯完成
                //readystate响应状态码  xhr.readystate表示xhr对象的响应状态码
                if(readystate==4){
                    //成功
                    //status响应状态值 200 304 403 404 500及以上
                    if(status==200){
                        //拿回数据 转换格式
                        //后台能确定返回给前端的数据格式
                        //需要根据后台响应的类型来确定数据格式
                        var contentType=xhr.getResponseHeader('Content-Type');
                        //规范的写法 application/xml；
                        //规范的写法 application/json
                        var result;  //一般情况下，result表示后台响应回来的数据
                        if(contentType.indexOf('xml')>-1){
                            //返回xml
                            result=xhr.responseXML;
                            //判断我们获取到的contentType是什么语法格式进行解析的，
                            //如果是按照xml格式进行解析的，就把返回的数据转换成xml格式的数据
                        }else if(contentType.indexOf('json')>-1){
                            //返回json
                            //这个后台返回回来的数据是不是json格式进行解析的
                            //如果是，就进入if条件判断里
                            result=JSON.parse(xhr.responseText);
                        }else{
                            //如果xml和json都不是，那就让他自由发挥吧！哈哈
                            result=xhr.responseText;
                        }
                        //这为什么会有一个判断式呢？这是个问题，其实是想做一下判断
                        //假如说未输入success属性，那就取前面的内容，可是前面什么内容也没有，那就继续执行其他的
                        //假如说输入了内容，那就取后面的内容
                        options.success&&options.success(result);
                    }else{
                        //去调用失败回调函数
                        var message={
                            status:xhr.status,
                            statusText:xhr.statusText
                        };
                        //假如设置了错误的提示信息，那就按照输入的提示信息提示
                        //假如没有设置错误的信息，那就显示默认信息
                        options.error&&options.error(message);
                    }
                    //通讯完成回调函数
                    options.complete&&options.complete();
                }
            }
        };
        $.get = function(options){
            options.type='get';
            $.ajax(options);
        };
        $.post = function(options){
            options.type = 'post';
            $.ajax(options);
        }
    </script>