ajax
ajax是什么
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，实现局部更新
区别一般http请求与ajax请求
-
ajax请求是一种特别的http请求
-
对服务器端来说，没有任何区别，区别在浏览器端
-
浏览器端发请求：只有XHR或fetch发出的才是ajax请求，其他的所有请求都是非ajax请求
-
浏览器端接收到响应
-
(1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
(2) ajax 请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调 函数并传入响应相关数
ajax同步
一件事做完才能做另一件事
ajax异步
是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。
ajax实现原理
对于浏览器而言， 主要有xmlHttpRequest和fetch两个请求api。使用js获得浏览器内置的ajax引擎（XMLHttpRequest对象），xml是浏览器的原生对象
ajax的对象XMLHttpRequest(简称XML)的相关API
- XMLHttpRequest():创建XHR对象的构造函数
- status: 响应状态码值，比如200，404
- statusText: 响应状态文本
- readyState: 标识请求状态的只读属性
- 0: 初始
- 1: open()之后
- 2: send()之后
- 3: 请求中
- 4: 请求完成
- onreadystatechange: 绑定readyState改变监听
- responseType: 指定相应数据，如果是’json’,得到响应后自动解析响应体数据
- response: 响应体数据，类型取决于responseType的指定
- timeout: 指定请求超时时间，默认为0代表没限制
- ontimeout: 绑定超时的监听
- onerror: 绑定请求网络错误的监听
- open(): 初始化一个请求, 参数为: (method, url[, async])
- send(data): 发送请求
- abort(): 中断请求
- getResponseHeader(name): 获取指定名称的响应头值
- getAllResponseHeaders(): 获取所有响应头组成的字符串16. setRequestHeader(name, value): 设置请求头
GET请求 与 POST请求
- GET请求
GET请求用于获取数据，有时候我们需要获取的数据需要通过“查询参数”进行定位，在这种情况下，我们会将查询参数追加到URL的末尾，令服务器解析。
查询参数是指一个由?号起始，由&符号分割的包含相应键值对的字符串。用来告知浏览器所要查询的特定资源。
const query = "example.php?name=tom&age=24" // "?name=tom&age=24"即是一个查询参数
- POST请求
POST请求用于向服务器发送应该被保存的数据，因此POST请求天然比GET请求多需要一份需要被保存的数据。那么这些数据应该放在何处呢？毕竟，我们的.open()方法接收的三个参数都没有合适的位置。
答案是需要发送的数据会作为.send()方法的参数最终被发往服务器，该数据可以是任意大小，任意类型。
这里需要注意以下两点：
-
.send()方法的参数是不可为空的，也就是说，对于不需要发送任何数据的GET请求，也需要在调用.send()方法时，向其传入null值； - 目前为止，我们知道了两种向服务器发送数据的方式：表单提交以及发送POST请求，要注意服务器对待这两种方式并不一视同仁，这意味着服务器需要有相应的代码专门处理POST请求发送来的原始数据。
但好在我们可以通过POST请求模拟表单提交，只需要简单两步：
- 设置请求头参数：
Content-Type: application/x-www-form-urlencoded（表单提交时的内容类型）； - 将表单数据序列化为查询字符串形式，传入
.send()方法；
为什么ajax要用xml
XHR为向服务端发送请求和解析服务器响应提供了流畅的接口，能够咦异步从服务器获取得更多信息，然后通过DOM将新数据插入到页面中。