学习Ajax的第二天

对Ajax的封装

前言：之前每次发判断请求时，如果请求方式、参数或者url不一样，那么之前的代码将无法复用，我们得重新写一段代码，所以我们迫切的需要一个通用函数，让用户在使用异步对象的时候通过调用一个相同的函数就可以实现相应的需求

总之：为了提升我们的开发效率，我们自已将XMLHttpRequest封装成一个函数。

思路分析

封装函数的关键在于

• 找到操作的共同点

• 找到不同的部分–以后就是参数

简单分析下get方式和post方式两者间的异同点：

通过对上面图片的分析，我们可以得出：

 1. 请求方式不一样
 2. url路径不一样
 3. 请求的参数不一样
 4. 对响应数据的处理函数不一样
 在上述没写到的，还有数据格式，虽然现在大多数的数据都是json格式的，但还是会存在着xml格式的数据，所以这也是个不同点
 5.数据的格式不一样

ajax的简易封装

下面是对ajax的简易封装（只实现部分参数）

// 封装异步操作，兼容get和post请求方式

// 错误写法1：
// function ajax (type, url, data, success) {
// 这种函数定义的缺点
// 1.这种函数是全局定义，会造成全局污染(存放在内存中不释放，会造成内存溢出)，用function定义的函数就是全局函数
// 2.参数顺序固定，用户不方便调用
// 3.参数的数量固定，不方便后期的扩展
// }

// 错误写法2：
// 为了解决上面的问题，我们可以将参数定义为一个对象
// 请求方式：option.type
// 请求url: option.url
// 请求参数：option.data
// 请求成功之后的数据处理函数： option.success
// function ajax (option) {
//   // 但是还是会造成全局污染
// }

// 为了解决全局污染，我们可以将封装函数定义到对象中
// 正确写法
//定义对象，封装ajax方法
const $ = {
    // 定义方法，判断传入的是字符串还是对象
    getParams: function (data) {
        // 判断
        // 如果有传入参数，判断传入的参数的类型
        if (data) {
            // 如果传入的是对象{name:'lala',age:20}  >>需要转为>>  name=lala&age=20
            if (typeof data == 'object') {
                let str = ''
                for (let key in data) {
                    str = str + key + '=' + data[key] + '&'
                }
                // 现在得到的字符串为name=lala&age=20&
                // 最后一个&符号是不需要的，所有需要截掉
                //substr(0, str.length - 1):截取从下标为0开始到倒数第二个字符的字符串
                return str.substr(0, str.length - 1)
            } else {
                // 如果没有传递任何的参数，则直接返回字符串
                return data;
            }
        } else {
            // 否则，直接返回
            return ''
        }
    },

    // 1. ajax方法的参数为一个对象
    // 请求方式：option.type
    // 请求url：option.url
    // 请求参数：option.data
    // 请求数据的格式：option.dataType
    // 请求成功之后的数据处理函数：option.success
    ajax(option) {
        // 1.1 定义请求方式：option.type
        let type = option.type;
        // 1.2 定义请求url：option.url
        let url = option.url;
        // 1.3 定义请求参数：option.data
        // 调用getParams()方法
        let data = this.getParams(option.data);
        // 1.4 定义请求数据格式
        let dataType = option.dataType;
        // 1.4 定义请求成功之后的数据处理函数：option.success
        let success = option.success;

        // 2. 发送请求
        // 2.1 创建异步对象
        let xhr = new XMLHttpRequest();
        // 2.2 请求行
        // 判断请求方式是否为get或者为空（为空就默认是get方式），如果是，则在请求路径url中直接拼接参数；后面发送请求中传入参数为null
        if (type.toLowerCase() == 'get' || '') {
            url = url + '?' + data;
            data = null
        }
        xhr.open(type, url);
        // 2.3 请求头
        // 判断请求方式是否为post，如果是，则添加请求头（get方式无需添加请求头）
        if (type.toLowerCase() == 'post') {
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        }
        // 2.4 发送请求
        xhr.send(data);

        // 3. 响应请求  ----  请求体
        xhr.onload = function () {
            // 接收返回值，并转换为js数据类型
            // let res = JSON.parse(xhr.response);
            // 判断请求数据的格式
            let res = null;
            if (dataType.toLowerCase() == 'json') {
                res = JSON.parse(xhr.response);
            } else if (dataType.toLowerCase() == 'xml') {
                res = xhr.responseXML;
            } else {
                res = xhr.response;
            }
            // 调用回调函数
            success && success(res);
        }
    }
}

调用封装好的ajax

 方法：
 	1、引入js文件 
 	2、输入对应的参数即可

get方式

post方式

jQuery中的Ajax

基本介绍

jQuery为我们提供了更强大的Ajax封装

$.ajax({}) 可配置方式发起Ajax请求

• url： 接口地址 *

• type： 请求方式 *

• timeout： 请求超时 *

• dataType： 服务器返回格式 *

• data： 发送请求数据 *

• beforeSend:function () {} ：请求发起前调用 *

• success：成功响应后调用 *

• error ：错误响应时调用，即请求失败时调用 *

• complete： 响应完成时调用（包括成功和失败） *

$.get(url,data,callback,dataType)： 以GET方式发起Ajax请求

$.post(url,data,callback,dataType)： 以POST方式发起Ajax请求

$(‘form’).serialize()：序列化表单（即格式化key=val&key=val）

// 调用serialize方法
/* 
serialize方法的限制： 
   serialize方法可以获取指定表单中，拥有name属性的 表单元素的
    value值，并生成key=value&key=value这种格式。要求表单元素
    的name一定要参照后台接口文件的说明。
    
 （注：如果不是表单，则无法使用这个方法）
*/

一个简单的实例

调用jQuery的Ajax：

beforeSend:function () {} ：请求发起前调用