对http，ajax和json的理解，手写ajax的封装

HTTP

1、HTTP – 超文本传输协议

1.1 HTTP三个点：

• 无连接: 限制每次连接至处理一个请求
• 独立的: 客户端以及服务器指定传输的 MIME-type 类型，任何数据类型都可以通过 HTTP 发送 【content-type.pdf里就是mime-type类型】
• 无状态: 指协议对于事物处理没有记忆能力。缺少状态信息，意味着后面数据必须重传【如果后续操作需要前面的信息，就必须重新传递】

1.2 请求方式：

• GET: 相对不安全，数据传递量小【地址传输】，一般用于向服务器请求资源
• POST: 相对安全，数据传输量较大，可以用于向服务器存储/更新/传递敏感信息
• PUT: 一般用于更新资源
• DELETE: 用于信息删除

1.3 HTTP 状态码

• 401：无登录 没登录 无权限
• 408：请求超时
• 200：成功
• 304：利用缓存 与200差不多，成功

AJAX
2.1 概念：

异步 JavaScript 和 XML 。是一种创建交互式网页应用的开发技术，是多个技术的组合。
【不用刷新整个页面就能更新当前页面的数据】

2.2 特点：不用刷新整个页面，就可以完成数据的更新【局部更新】

2.3 可用来做什么

• 登录/注册用户名验证【是否存在可用】
• 登录失败不跳转页面
• 省市区的联动【三级联动】
• 年月日的联动【三级联动】
• 图片的延时加载

2.4 异步 与 同步

• JS 的执行环境 - 单线程：只有一个线程，也就只能做一件事情，如果多个任务，就必须排队，如果前面的任务完成后，再执行下一个操作
• 为解决这个问题：JS 将任务分为了同步与异步 提出了异步模式
• 同步任务： 程序的执行顺序 与 代码顺序 有关
• 异步任务： 每一个任务有一个或多个回调函数，前一个任务结束后，不是执行后一个任务而是执行回调函数，后一个任务也不会等待前一个任务完成，所以程序的执行顺序与排列顺序无关，哪一个任务先执行完毕是无法确认的。

接触到的异步操作

• 计时器
• 事件监听
• 读写文件 js 内置模块
• AJAX
• 大多数的回调函数

2.5 AJAX 原理（步骤）：

//第一步： 获取 HTTP【AJAX】 对象
const http;
if(window.XMLHttpRequest) { // chrome 为代表的现代浏览器
    //new 在实例化
    http = new XMLHttpRequest();
} else if(window.ActiveXObject) {   // IE 浏览器
    http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    console.log("当前浏览器不支持!");
};

   //第二步： 监听状态的改变
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200 && http.status <= 300 || http.status == 304) {
        // 请求成功
    } else {
        console.log("请求失败！");
    }
}

//改进
http.onreadystatechange = function() {
    if(http.readyState == 4) {
        if(http.status == 200) {
            // 请求成功
        } else if(http.status == 401) {
            // 没有权限
        } else if(http.status == 404) {
            // 资源不存在
        } else if(http.status == 500) {
            // 服务器出错
        }
    } else {
        console.log("请求失败");
    }
}
 /*
 readyState 变化的步骤：
0：未初始化，即没有调用open()       --AJAX对象创建完毕
1：已经调用 open(),但是还没有调用 send()        --数据发送成功
2：已经调用 send()，但是还未收到响应        --原始数据接收
3：所有响应头都已经收到，但是响应体正在接收中；     --解析数据
4：完成，已经接受全部响应数据。     --解析完毕（代表真正解析完毕，调试完毕了）
 */


//第三步： 请求类型
http.open(请求类型,请求地址,同步或者异步);


//第四步： 发送请求
http.send(携带的请求的数据);
//例：http.send(data);

3、jQuery AJAX

/*
$.ajax({
    url: 请求地址,
    method:请求方式，1.9.0 版本之前用的 type,
    data: 发送给服务器的数据，键值对、字符串、对象,
    dataType: 预计服务器返回的数据类型(json,html文件,txt文件),【可以在此指定】
    contentType: 默认 application/x-www-form-urlencoded     --表单数据格式
    跨域的....相关设置
});

$.get();
$.post();

$(元素).load(); 请求一个 html 片段回来
*/

JSON

1、JSON 数据格式：---- 轻量化的数据交换格式。是 js 对象语法的子集。

2、语法格式

1. 整个 JSON 使用大括号{}包裹
2. 数据存储在键值对中,【注意：属性名必须加双引号】
3. 值可以是任意值，null 字符串【必须加双引号】 布尔值 数字 数组 对象
4. 键值对之间通过逗号分割
5. JSON 绝对【没有注释】
6. JSON 后缀名为 .json
   3、方法：

• JSON.parse(jsonString); 将 json 字符串转为 json 对象
• JSON.stringify(obj); 将 json 对象转为 json 字符串

const users = {
    "username": "jack",
    "userpass": "123456"
}
//转为字符串
const userStr = JSON.stringify(users);
console.log(typeof userStr);
console.log(userStr);
// 转为 JSON 对象
const userObj = JSON.parse(userStr);
console.log(userObj)

下方是一个封装好的AJAX调用方法(GET或POST)，

/**
 * 
 * @param {封装的AJAX调用方法} options 
 * options {
 *  method:"POST", - GET或POST传输方式
    url:"http://xx.xx.xx.xx:8888/pub.getLogin", - 指向的url地址
    data:{identity:"MANAGER",account:"fairy",password:"123456"}, - 所需要传递的参数
 * }
 * @returns 
 */
function ajax (options) {
    //url表示接口地址，这里是完整地址，如果要动态拼接，前面地址一样后面地址不同也可以采用 如："http://xx.xx.xx.xx:8888/" + options.url  这样的形式拼接地址
    let url = options.url
    const method = options.method.toLocaleLowerCase() || 'get'
    const async = options.async != false // default is true
    const data = options.data;
    const xhr = new XMLHttpRequest()
    if (options.timeout && options.timeout > 0) {
        xhr.timeout = options.timeout
    }
    return new Promise ( (resolve, reject) => {
        xhr.ontimeout = () => reject && reject('请求超时') //为什么前面没有显示出来 ？ 
        // xhr.ontimeout = () => console.log('请求超时');//可以打印出来
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    // 接口连接成功时对数据的处理
                    // 先将返回的字符串转换为json格式
                    let result = JSON.parse(xhr.responseText)
                    // 如果接口返回有错误信息error则打印出error（对错误信息做处理，可以是提示，这里用的打印）
                    if(result.error) {
                        console.log(result.error)
                    } else {
                        // 如果接口返回没有错误提示而是返回正确数据时，则调用回调函数，返回正确信息，返回的信息也需要
                        resolve && resolve(result)
                    }
                } else {
                    // 接口连接失败时
                    reject && reject('请求失败')
                    console.log("接口连接失败")
                }
            }
        }
        xhr.onerror = err => reject && reject(err)
        let paramArr = []
        //如果为GET传输方式的时候 需要将数据拼接到url地址后
        if (method === 'get') {
            let encodeData
            if (data instanceof Object) {
                for (let key in data) {
                    // 参数拼接需要通过 encodeURIComponent 进行编码
                    paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) )
                }
                encodeData = paramArr.join('&')
            }
                 // 检测 url 中是否已存在 ? 及其位置
                const index = url.indexOf('?')
                if (index === -1) url += '?'
                else if (index !== url.length -1) url += '&'
                  // 拼接 url
                url += encodeData
        }
        xhr.open(method, url, async)
        // 判断传输方式为get还是post ，如果是get则send数据为null,如果为post则将数据转为json字符串传输，其中get的数据已经在上面做了处理
        if (method === 'get') xhr.send(null)
        else {
            // post 方式需要设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
            xhr.send(JSON.stringify(data))
        }
    } )
}

使用方法

//例子:调用ajax的方式
var option={
        method:"POST",//数据传输方式 GET/POST
        url:"http://xx.xx.xx.xx:8888/pub.getLogin",//接口地址
        data:{identity:"MANAGER",account:"fairy",password:"1234"},//传输参数
}
ajax(option).then((result) => {
        // 成功后的处理
        console.log("成功",result);
});