xhr与fetch异步编程

1.xhr

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: 请求已完成，且响应已就绪

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);
      //     });
      // }