AJAX详解

AJAX

Asynchronous Javascript AndXML = 异步 JavaScript 和 XML

通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

零、回顾一下发请求有哪几种方式

	请求类型	缺点
form	all	会刷新当前或新开的页面
a	GET	会刷新当前或新开的页面
img	GET	只能以图片的形式展示
link	GET	只能以CSS、favicon的形式展示
script	GET	只能以脚本的形式运行

（注：通过设置属性src的请求方式都可以跨域）

有什么请求方式可以实现以下条件

各种请求方式都支持
不一定要以特定方式展示或运行

同步和异步请求的区别

同步方式发送请求：发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会一直处于等待过程中。
异步方式发送请求：发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

一、AJAX原理

AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求：
- 使用JavaScript获取浏览器内置的AJAX引擎（XMLHttpRequest对象）
- 使用js确定请求路径和请求参数
AJAX引擎对象根据请求路径和请求参数进行发送请求，服务器接收到Ajax引擎的请求进行处理：
- 服务器获得请求参数数据
- 服务器处理请求业务（调用业务层代码）
- 服务器响应数据给Ajax引擎
Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面的具体位置：
- 通过设置给Ajax引擎的回调函数获取服务器响应的数据
- 使用JavaScript在指定的位置，显示响应的数据，从而局部修改页面的数据，达到局部刷新的目的。

二、AJAX实现

1）原生JS实现（面试考的居多）

创建Ajax引擎对象
为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
绑定提交地址
发送请求
监听里面处理响应数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX</title>
</head>
<body>
	<button>click</button>
  <script>
    //1.创建Ajax引擎对象
    let request = new XMLHttpRequest()
    //2.为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
    request.onreadystatechange = function () {
      //5.监听里面处理响应数据
      //这个回调函数什么调用呢？是ajax引擎对象与服务器通信状态码改变的时候调用
      /*ajax引擎对象与服务器通信状态码xmlHttp.readystate，范围0~4
      0 请求未初始化
      1 服务器连接已建立
      2 请求已接收
      3 请求处理中
      4 请求已完成，且响应已就绪
      * 这个回调函数一共被调用4次，但只有状态码4的时候才代表服务器响应完成数据完成。
      * ajax引擎通信转态码为4和http通信转态码为200
      */
      if (request.readyState === 4 && request.status === 200) {
        console.log(request.responseText)
      }
    }
    //3.绑定提交地址
    /**
    * xmlHttp.open(method,url)
    * method,请求方法，get或post请求
    * url：请求路径
    */
    request.open('GET', '/xxx')
    //4.发送请求
    request.send()
  </script>
</body>
</html>

2）Ajax引擎连接状态readyState值0~4变化过程

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

值	状态	描述
0	UNSET（未打开）	open()方法还未被调用
1	OPENED（未发送）	send()方法还未被调用
2	HEADERS_RECEIVED（已获取响应头）	send()方法已经被调用，响应头和响应状态已经返回
3	LOADING（争在下载响应体）	响应体下载中；requestText中已获取部分数据
4	DONE（请求完成）	整个请求过程已经完毕

这里状态值4只能说明接收到了服务器的响应服务器处理ajax请求结束，但是不能代表正确的获取了服务器的响应，需要配合http状态码200两个条件就可以说明正确的获取了服务器响应。只有这两个条件满足，request.responseText才可以获取到正确的响应数据。

3）从后端接收到的数据的处理

从后端接收到的数据格式一般都是JSON的，（简单来讲就是一对大括号里面放一些键值对，其中键和值都是用双引号包裹的）
用window.JSON.parse(string)（string是接收到的数据）来将其转化为JS对象

三、如何解决同源策略带来的问题

CORS——跨域资源共享标准（ cross-origin sharing standard ）

跨域资源共享（ CORS）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 XMLHttpRequest或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。

四、Ajax中与HTTP请求响应对应的部分

1）Ajax可以设置HTTP请求中任意一部分

请求行：open('method', 'url')
请求头：request.setRequestHeader('': "")
请求体：request.send('自己要设置的请求头')

2）Ajax可以获取HTTP响应中任意一部分

状态码：request.status，状态说明（OK）：request.statusText
响应头：request.getResponseHeader('要获取的键名')，或者request.getAllResponseHeader()
响应内容：request.responseText