1、Ajax封裝

function ajax (options) {
    // 默認值
    var defaults = {
        type: 'get',
        url: '',
        async: true,
        data: {},
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function () {},
        error: function () {}
    }
    // 使用用戶傳遞的參數替換默認值參數
    Object.assign(defaults, options);
    // 創建ajax對象
    var xhr = new XMLHttpRequest();
    // 參數拼接變量
    var params = '';
    // 循環參數
    for (var attr in defaults.data) {
        // 參數拼接
        params += attr + '=' + defaults.data[attr] + '&';
        // 去掉參數中最后一個&
        params = params.substr(0, params.length-1)
    }
    // 如果請求方式為get
    if (defaults.type == 'get') {
        // 將參數拼接在url地址的后面
        defaults.url += '?' + params;
    }

    // 配置ajax請求
    xhr.open(defaults.type, defaults.url, defaults.async);
    // 如果請求方式為post
    if (defaults.type == 'post') {
        // 設置請求頭
        xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
        // 如果想服務器端傳遞的參數類型為json
        if (defaults.header['Content-Type'] == 'application/json') {
            // 將json對象轉換為json字符串
            xhr.send(JSON.stringify(defaults.data))
        }else {
            // 發送請求
            xhr.send(params);
        }
    } else {
        xhr.send();
    }
    // 請求加載完成
    xhr.onload = function () {
        // 獲取服務器端返回數據的類型
        var contentType = xhr.getResponseHeader('content-type');
        // 獲取服務器端返回的響應數據
        var responseText = xhr.responseText;
        // 如果服務器端返回的數據是json數據類型
        if (contentType.includes('application/json')) {
            // 將json字符串轉換為json對象
            responseText = JSON.parse(responseText);
        }
        // 如果請求成功
        if (xhr.status == 200) {
            // 調用成功回調函數, 并且將服務器端返回的結果傳遞給成功回調函數
            defaults.success(responseText, xhr);
        } else {
            // 調用失敗回調函數并且將xhr對象傳遞給回調函數
            defaults.error(responseText, xhr);
        } 
    }
    // 當網絡中斷時
    xhr.onerror = function () {
        // 調用失敗回調函數并且將xhr對象傳遞給回調函數
        defaults.error(xhr);
    }
}

2、模板引擎

作用：使用模板引擎提供的模板語法，可以將數據和 HTML 拼接起來。
官方地址： https://aui.github.io/art-template/zh-cn/index.html

使用步驟

1. 下載 art-template 模板引擎庫文件并在 HTML 頁面中引入庫文件

 <script src="./js/template-web.js"></script>

2. 準備 art-template 模板

 <script id="tpl" type="text/html">
     <div class="box"></div>
 </script>

3. 告訴模板引擎將哪一個模板和哪個數據進行拼接

var html = template('tpl', {username: 'zhangsan', age: '20'});

4. 將拼接好的html字符串添加到頁面中

 document.getElementById('container').innerHTML = html;

5. 通過模板語法告訴模板引擎，數據和html字符串要如何拼接

 <script id="tpl" type="text/html">
     <div class="box"> {{ username }} </div>
 </script>

3、jsonp封裝

function jsonp (options) {
    // 動態創建script標簽
    var script = document.createElement('script');
    // 拼接字符串的變量
    var params = '';

    for (var attr in options.data) {
        params += '&' + attr + '=' + options.data[attr];
    }
    
    // myJsonp0124741
    var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
    // 它已經不是一個全局函數了
    // 我們要想辦法將它變成全局函數
    window[fnName] = options.success;
    // 為script標簽添加src屬性
    script.src = options.url + '?callback=' + fnName + params;
    // 將script標簽追加到頁面中
    document.body.appendChild(script);
    // 為script標簽添加onload事件
    script.onload = function () {
        document.body.removeChild(script);
    }
}

4、jQuery中的Ajax

1、發送Ajax請求

  var params = {name: 'hehehe', age: 35};
        $.ajax({
            // 請求方式
            type: 'get',
            // 請求地址
            url: '/user',
            //向服務器端發送的請求參數
            // name=zhangsan&age=100
            // data: {
            //     name: 'hehe',
            //     age: 36
            // },
            // data:'name=zhangsan&age=100',
            data: JSON.stringify(params),
            //指定參數格式類型默認application/x-www-form-urlencoded；
            contentType: 'application/json',
            // 請求成功以后函數被調用
            success: response => {
                console.log(response);
            },
            // 請求失敗以后函數被調用
            error: error => {
                console.log(error)
            }
        });

2、發送jsonp請求

$.ajax({
    url: 'http://www.example.com',
    // 指定當前發送jsonp請求
    dataType: 'jsonp',
    // 修改callback參數名稱
    jsonp: 'cb',
    // 指定函數名稱
    jsonCallback: 'fnName',
    success: function (response) {} 
})

3、serialize方法：將表單中的數據自動拼接成字符串類型的參數

var params = $('#form').serialize();
// name=zhangsan&age=30

 // 將表單中用戶輸入的內容轉換為對象類型
    function serializeObject(obj) {
        // 處理結果對象
        var result = {};
        // [{name: 'username', value: '用戶輸入的內容'}, {name: 'password', value: '123456'}]
        var params = obj.serializeArray();
        // 循環數組 將數組轉換為對象類型
        $.each(params, function (index, value) {
            result[value.name] = value.value;
        })
        // 將處理的結果返回到函數外部
        return result;
    }

4、全局事件

ajaxStart()     // 當請求開始發送時觸發
.ajaxComplete()  // 當請求完成時觸發

// 當頁面中有ajax請求發送時觸發
$(document).on('ajaxStart', function () {
                 NProgress.start() 
            })

// 當頁面中有ajax請求完成時觸發
$(document).on('ajaxComplete', function () {
                NProgress.done() 
            })

5、NProgress

NProgress是頁面跳轉是出現在瀏覽器頂部的進度條
官網：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress

<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>
NProgress.start();  // 進度條開始運動 
NProgress.done();   // 進度條結束運動