1.AJAX 简介
1.1同步和异步
* (一): 同步与异步
* 1. 同步: 顺序执行, 优点: 静态预判结果可控, 缺点: 耗时任务阻塞执行
* 2. 异步: 乱序执行, 优点: 不会阻塞代码,体验好, 缺点: 顺序不可控
*
* 以银行排队办业务为例
* 1. 同步: 默认排队叫号, 依次办理
* 2. 异步: 耗时任务(如修改密码忘带身份证)则离开队列, 后面任务继续
* 3. 任务队列: 取了身份证回来了, 就待在"任务队列"中等待再次叫号
*
* 哪些是异步任务(耗时)?
* 1. 定时任务: setTimeout, setInterval
* 2. 事件监听: addEventListener
* 3. 网络请求: ajax, promise,fetch
* 4. 文件读写等涉及IO的操作
1.2 什么是JSON
// 1. json是通用的,轻量化的 "数据交互格式",用于 "前后端数据通信"
// 2. json独立于编程语言,本质是一个格式化字符串
// 3. json借用了js对象字面量的语法,简洁高效,已替代了传统的xml格式
// 4. json不是js对象, 但它可以与js对象之间相互转换
// 数据类型:
// 1. 简单类型: number, string, boolean, null
// 2. 数组: [...]
// 3. 对象: {...}, 这是关注的重点
// 不支持 undefined ,没意义的
// json: 本质就是js对象的序列化, 字符串表示
// 1. js对象 -> json -> 后端php/java
1.3 什么是AJAX
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
总结：
AJAX就是传递数据的工具，JSON就是传递数据的格式，html先渲染页面，内部细节由AJAX从服务器获得，数据通过JSON传递
2.AJAX创建对象
xmlhttp = new XMLHttpRequest()
XMLHttpRequest 对象用于和服务器交换数据。类似于工具
3.AJAX 向服务器发送请求
基本步骤：
创建工具xml = new XMLHttpRequest() -> 建立联系xmlhttp.open("GET","ajax_info.txt",true);
-> 发送请求xmlhttp.send();
| 方法 |
描述 |
| open(method,URL,flag,name,password); |
1. method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。2 URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。- flag：该参数为可选，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步，默认为true。- name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。- password：该参数为可选，用于输入密码。若服务器需要验证，则必须使用该参数 |
| send(string) |
string：仅用于 POST 请求 |
4.AJAX服务器响应
| 属性 |
描述 |
| responseText |
获得字符串形式的响应数据。 |
| responseXML |
获得 XML 形式的响应数据。 |
5.AJAX - onreadystatechange 事件
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 |
描述 |
| onreadystatechange |
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
|
| status |
200: "OK"
404: 未找到页面 |
6. fetch也可以发起ajax请求
fetch()方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比较XMLHttpRequest更加的简洁。
Promise:
Promise是进行异步操作的一种解决方案，比传统的处理方法(回调函数/处理事件)更加合理，ES6将其写入了语言标准,统一了语法，原生提供了Promise。 Promise可以想象成一个装有各种结果的容器，里面装有某个时间返回来的结果，你可以在需要的时候拿取它并进行一些事件处理。
方法
/**
* fetch(url)
* .then(res)
* .then(...)
* .catch(err)
*/
// function getUser2(btn) {
// let url = 'http://website.io/users.php';
// // fetch的所有操作都是异步的,但是通过then使用顺序可控
// fetch(url)
// .then(function (response) {
// // console.log(response,response.json());
// return response.json();
// })
// .then(function (json) {
// // 控制台
// console.log(json);
// // 将数组渲染到页面中
// render(json, btn);
// });
// }
