在已有的项目中，“封装”了ajax，这个在jQuery的基础上有封装了一下，难免有点画蛇添足的意味。所以接下来的任务就是用原生的js来实现ajax的请求。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>mAjax</title>
    6. </head>
    7. <body>
    8. <button type="button" id="get">send get</button>
    10. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    11. <script>
    12.     $(function () {
    13.         /**
    14.          * 封装ajax
    15.          * @param url 发送请求的地址，必填;
    16.          * @param data 参数 json object{};
    17.          * @param type 请求方式:GET/POST/PUT/DELETE,默认值:'GET';
    18.          * @param successfn 请求成功后的回调函数;
    19.          * @param errorfn 请求失败后的回调函数;
    20.          * @param async 是否异步:true/false,默认值:true;
    21.          */
    22.         jQuery.mAjax = function (url, data, type, successfn, errorfn) {
    23.             type = (type === null || type === '' || typeof type === 'undefined') ? 'GET' : type.toUpperCase();
    25.             let defaults = {
    26.                 url: url,
    27.                 type: 'GET',
    28.                 contentType: 'text/html;charset=utf-8',
    29.                 data: data,
    30.                 async: true,
    31.                 cache: false,
    32.                 dataType: 'json',
    33.                 success: function (data) {
    34.                     successfn(data);
    35.                 },
    36.                 error: function (e) {
    37.                     errorfn(e);
    38.                 }
    39.             };
    41.             if (type === 'POST' || type === 'PUT') {
    42.                 defaults.contentType = 'application/json';
    43.             }
    45. //            $.ajax(defaults);
    46.             if (url === 1) {
    47.                 successfn('asdf ')
    48.             }
    49.         };
    50.     });
    52.     let mAjax = {
    53.         get: function (url, data) {
    54. //                $.ajax({
    55. //                    url:url,
    56. //                    type:'GET',
    57. //                    contentType:'text/html;charset=utf-8',
    58. //                    data:data,
    59. //                    dataType:'json',
    60. //                    success:function(resData){
    61. //                        return resData;
    62. //                    },
    63. //                    error:function(msg){
    64. //                        console.log('error');
    65. //                    }
    66. //                });
    68.             if (url !== undefined) {
    69.                 return url;
    70.             }
    71.         },
    72.         post: function () {
    73.             alert('post');
    74.         },
    75.         put: function () {
    76.             alert('put');
    77.         },
    78.         delete: function () {
    79.             alert('delete');
    80.         }
    82.     };
    84.     // ajax处理
    85.     let ajaxProcess = {
    86.         send: function () {
    87.             $.mAjax(1, {}, '', ajaxProcess.success, ajaxProcess.error);
    88.         },
    89.         success: function (data) {
    90.             alert(data);
    91.         },
    92.         error: function (e) {
    93.             alert(e);
    94.         }
    95.     };
    97.     // ajax处理
    98.     let ajaxProcess1 = function () {
    99.         this.send = function () {
    100.             $.mAjax(1, {}, '', ajaxProcess.success, ajaxProcess.error);
    101.         };
    102.         this.success = function (data) {
    103.             alert(data);
    104.         };
    105.         this.error = function (e) {
    106.             alert(e);
    107.         }
    108.     };
    110.     ajaxProcess1.prototype.get = function(){
    111.       alert("ajaxProcess1.prototype.get !!");
    112.     };
    115.     $('#get').on('click', function () {
    116.         ajaxProcess.send();
    117.         new ajaxProcess1().get();
    118.     });
    121. </script>
    122. </body>
    123. </html>