Ajax使用

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

使用步骤

下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件

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

准备 art-template 模板

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

告诉模板引擎将哪一个模板和哪个数据进行拼接

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

将拼接好的html字符串添加到页面中

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

通过模板语法告诉模板引擎，数据和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();   // 进度条结束运动