HTTP和AJAX教程 - 2. ajax的前世今生 - 《JavaScript 基础教程》

一、ajax 基础
- 使用 ajax
二、ajax的请求方式
- 常见的请求方式：
三、ajax 的同步和异步
- 为什么会有异步的 ajax？
四、jQ 的 ajax

一、ajax 基础

浏览器的技术
ajax Asynchronous javascript and xml

xml: 是可扩展标记语言，和 html 一样，可以清楚的表示层级。在 ajax 刚刚兴起的时候，为了表达数据的结构和层次，数据结构多是使用 xml；
现在都是 json，json 也可以表达数据结构；

JSON.parse() // json 格式字符串转对象
JSON.stringify() // 对象转 JSON 格式的字符串

现在的前端都是前后端分离的，即前端负责数据的绑定和维护；
服务端渲染和全局刷新

在很久以前，没有 ajax 之前，都是前后端不分离的；前后端不分离是前端写好 html + css 结构，然后把 html 交给后端，然后利用服务端技术从服务器的数据库中把数据查出来，然后绑定到页面中，然后把绑定好数据的页面直接返回给浏览器，就是说浏览器拿的就是绑定好数据的页面 html（服务端渲染 SSR(Server-Side-Rendering)）；
但是这么干有一个问题，如果我这个页面中只有一部分内容是动态绑定的，如果我需要看到这部分内容，就需要刷新整个页面重新获取才行，因为绑定数据只有在服务器上才能进行。这种体验很不好，这种刷新整个页面获取数据的方式称为全局刷新；

前后端分离

后来 ajax 诞生了，ajax 可以直接从服务器获取数据而不用刷新整个页面；发送一个 ajax 请求，等到请求结束后把数据通过前端手段把数据绑定到页面中（动态创建 dom + appendChild 或者字符串拼接 + innerHTML）。这种用 ajax 渲染数据的方式是局部刷新的。

ajax 的实例是可以向服务器发送请求的；

使用 ajax

创建一个 ajax 实例对象

let xhr = new XMLHttpRequest();

可以通过 XMLHttpRequest 原型上的 open 方法打开一个路径

xhr.open('get', 'https://www.easy-mock.com/mock/5d21a1b35b95ef4e9dd1a28c/example/myfirstmock', true);

open 方法的参数：
http-method： GET POST
url
async: true 表示异步，false 表示同步

监听 ajax 实例的 onreadystatechange 事件，当 ajax 发送请求时，会触发这个事件行为

xhr.onreadystatechange = function () {
    // 如果 ajax 是异步执行的，这个函数会执行三次，三次的 readyState 分别为 x
    console.log(xhr.readyState); // 2  3  4
    // 为了确定拿到数据，我们不仅判断 xhr.readyState，还需要根据 xhr.status 来判断，xhr 使用的就是 http status，表示当前请求的状态；
    if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
        // xhr.readyState 为4表示 ajax 请求完成，xhr.status 是一个以2开头的三位数，表示请求成功，所以可以在获取服务端返回的数据
    }
};

发送请求

xhr.send(); // send 方法还可以传递参数

xhr.readyState 表示当前 ajax 实例对象的所处的状态
0: 创建了一个 ajax 实例对象
1: 已经调用 open 方法，打开了路径
2: 客户端已经接收到服务端的信息（如果需要获取头信息中某些内容，可以在 readyState 为2时获取就可以）
1. 客户端正在接收响应主体的数据
1. 客户端已经全部接收服务端的数据

二、ajax的请求方式

let xhr = new XMLHttpRequest();
xhr.open('get', 'aside.json', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify({username: 'mabin', pwd: '1233456'}));

xhr.open() 方法的第一个参数用于指定 http-method，即 http 的请求方式：

一般接口的请求方式由服务端提供，而且会在接口文档中说明

常见的请求方式：

=> GET: 一般用于从服务端获取数据，但是也可以向服务器传递少量的数据；

get 请求方式的特点

向服务器传递数据的方式：通过向接口末尾添加问号传参的方式传递，如: aside.json?name=mabinpwd=123456
由于浏览器的 url 地址是有长度限制的，IE 的 url 一般不超过 2k，谷歌的一般在 8k，超过的部分会自动被截掉，所以 get 请求传递的数据很小
参数直接暴露在 url 中，安全性低；
get 请求容易产生缓存，为了防止缓存，一般在 url 末尾拼接一个随机数或者时间戳，因为浏览器发现 url 变化了，就会重新请求而不是使用之前已经缓存的数据；

=> POST 一般用于把数据传递给服务器或者传递大量的数据时

post 把需要传递给服务器的数据放在请求体中传递给服务器
由于 post 数据放在请求体中，大小没有限制
post 传递数据时把数据放在请求体中的，相对于 get 而言比较安全
post 请求不会默认走缓存

其他请求方式

DELETE: 删除数据
HEAD: 获取响应头，不需要响应体
PUT: 修改某些内容
OPTIONS: 查询服务器的支持的http请求方式
TRACE: 回显服务器收到的请求，一般用于测试
….

三、ajax 的同步和异步

js 是单线程的：每次只能执行一个任务
浏览器是多线程的，可以同时执行多个任务；

let data = null;
let xhr = new XMLHttpRequest();
xhr.open('get', 'aside.json', true);
xhr.onreadystatechange = function () {
    console.log(xhr.readyState); // false 时只输出 4
    console.log(xhr.readyState); // true 时输出2 3 4
    data = xhr.responseText;
};
xhr.send();
function bindHTML(data) {
    // 绑定 html 的方法
}

为什么会有异步的 ajax？

如果页面中有5个请求

// 1. 1s
// 2. 2s
// 3. 3s
// 4. 4s
// 5. 5s

如果使用同步的，同步任务都是阻塞的，上一个执行不完下一个不能开始，如果这些接口没有必然关系，用户需要 15s 才能看到，这个用户体验很不好。
如果使用异步的，第一个发出后随即就开始第二个，然后第三个，因为异步不是阻塞的，后面的不用等待前面的完成（这样子看起来很像同时发送了5个请求），这样一来用时5s就可以了

所以一般情况下 ajax 使用异步的；

但是使用异步的也有一个问题，如果这5个接口是互相依赖的，比如第二个依赖第一个返回的数据，第三个依赖第二个返回的数据这种情况使用异步，顺序是无法保证的，因为异步任务是谁先到达执行条件谁先执行；

四、jQ 的 ajax

使用原生的 ajax 把用户名和密码使用 post 的请求发方式发送到 aside.json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section>
    <label for="uName">用户名：</label>
    <input type="text" id="uName">
</section>
<section>
    <label for="pwd">密码：</label>
    <input type="text" id="pwd">
</section>
<section>
    <button id="submit">登录</button>
</section>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/4-jq的ajax.js"></script>
</body>
</html>

原生js代码：

获取元素

let uName = document.getElementById('uName');
let pwd = document.getElementById('pwd');
let uNameValue = uName.value;
let pwdValue = pwd.value;
let btn = document.getElementById('submit');

原生js

btn.onclick = function () {
    let xhr = new XMLHttpRequest();
    xhr.open('post', 'aside.json', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('oh yeach');
        }
    };
    // 注意 post 请求只能发送字符串类型的数据，一边情况下会使用 json 格式的字符串
    xhr.send(JSON.stringify({
        username: uNameValue,
        pwd: pwdValue
    }));
};

使用jq的ajax

$.ajax({
    url: 'aside.json',
    type: 'post',
    dataType: 'json',
    cache: false,
    async: true,
    data: {
        username: uNameValue,
        pwd: pwdValue
    },
    error(err) {
        console.log(err)
    },
    success (data) {
        console.log(data)
    }
});

参数详解
url: 请求路径
type: 请求方式
dataType: 数据类型 json
async: true 默认异步
cache: false 禁用缓存
error: 请求失败时执行的回调，参数是具体的报错信息
success: 请求成功执行的回调，参数是服务端返回的数据

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】