[交互]AJAX
- [创建 XMLHttpRequest](#创建 XMLHttpRequest)
- 发送请求
- 服务器响应
-
- [XMLHttpRequest readyState 状态值](#XMLHttpRequest readyState 状态值)
- 响应数据
- 请求状态变更回调函数
- [XMLHttpRequest status 的值](#XMLHttpRequest status 的值)
- 常用状态码设置
AJAX 是技术，不是工具，区别于 axios、fetch、$.ajax 等(封装工具)现有交互工具,是用于改变部分网页的技术
HTTP 超文本传输协议，所以 AJAX 也不是 HTTP , AJAX 是实现 HTTP 的一种技术
数据交互的根本是现代浏览器都支持 XMLHttpRequest 对象！！！！
AJAX：Asynchronous JavaScript and XML
创建 XMLHttpRequest
js
let xmlhttp = null;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome等现代浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}发送请求
js
xmlhttp.open(method, url, async);
xmlhttp.setRequestHeader(header, headerValue); //设置请求头
xmlhttp.send(postStr); //发送请求到服务器- method: 方法类型
- url: 服务器请求文件地址
- async: 同步 false 或异步 true
- postStr: post 方法提交的数据
服务器响应
XMLHttpRequest readyState 状态值
xmlhttp.readyState 的值
| 取值 | 说明 |
|---|---|
| 0 | 请求未初始化(未调用 open)) |
| 1 | 请求已经建立，但是未发送( 未调用 send()) |
| 2 | 请求已发送，正在处理中(通常现在可以从响应中获取内容头) |
| 3 | 请求处理中；响应中部分数据可用，但服务器还未完成响应的生成 |
| 4 | 响应已完成；可以获取并使用服务器的响应了 |
xmlhttp.readyState 的值每次发生改变都会调用 xmlhttp.onreadystatechange
响应数据
js
xmlhttp.responseTxt; //响应为字符串
xmlhttp.responseXML; //响应为XML对象请求状态变更回调函数
js
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
};XMLHttpRequest status 的值
xmlhttp.status 的值及解释：
| 取值 | 说明 |
|---|---|
| 100 | 客户继续发出请求 |
| 101 | 客户要求服务器根据请求转换 HTTP 协议版本 |
| 200 | 交易成功 |
| 201 | 提示知道新文件的 URL |
| 202 | 接受和处理,但处理未完成 |
| 203 | 返回信息不确定或不完整 |
| 204 | 请求收到，但返回信息为空 |
| 205 | 服务器完成了请求，用户代理必须复位当前已经浏览过的文件 |
| 206 | 服务器已经完成了部分用户的 GET 请求 |
| 300 | 请求的资源可在多处得到 |
| 301 | 删除请求数据 |
| 302 | 在其他地址发现了请求数据 |
| 303 | 建议客户访问其他 URL 或访问方式 |
| 304 | 客户端已经执行 GET，但文件未变化 |
| 305 | 请求的资源必须从服务器指定的地址得到 |
| 306 | 前一版本 HTTP 代码，现行版本不再使用 |
| 307 | 申明请求的资源临时性删除 |
| 400 | 错误请求，如语法错误 |
| 401 | 请求授权失败 |
| 402 | 保留有效 ChargeTo 头响应 |
| 403 | 请求不允许 |
| 404 | 没有发现文件、查询或 URl |
| 405 | 用户在 Request-Line 字段定义的方法不允许 |
| 406 | 根据用户发送的 Accept 拖，请求资源不可访问 |
| 407 | 类似 401，用户必须首先在代理服务器上得到授权 |
| 408 | 客户端没有在用户指定的时间内完成请求 |
| 409 | 对当前资源状态，请求不能完成 |
| 410 | 服务器上不再有此资源且无进一步的参考地址 |
| 411 | 服务器拒绝用户定义的 Content-Length 属性请求 |
| 412 | 一个或多个请求头字段在当前请求中错误 |
| 413 | 请求的资源大于服务器允许的大小 |
| 414 | 请求的资源 URL 长于服务器允许的长度 |
| 415 | 请求资源不支持请求项目格式 |
| 416 | 请求中包含 Range 请求头字段，在当前请求资源范围内没有 range 指示值，请求也不包含 If-Range 请求头字段 |
| 417 | 服务器不满足请求 Expect 头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求 |
| 500 | 服务器产生内部错误 |
| 501 | 服务器不支持请求的函数 |
| 502 | 服务器暂时不可用，有时是为了防止发生系统过载 |
| 503 | 服务器过载或暂停维修 |
| 504 | 关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 |
| 505 | 服务器不支持或拒绝请求头中指定的 HTTP 版本 |
| 总结 | 对以上的状态的归总说明 |
| 1xx | 信息响应类，表示接收到请求并且继续处理 |
| 2xx | 处理成功响应类，表示动作被成功接收、理解和接受 |
| 3xx | 重定向响应类，为了完成指定的动作，必须接受进一步处理 |
| 4xx | 客户端错误，客户请求包含语法错误或者是不能正确执行 |
| 5xx | 服务端错误，服务器不能正确执行一个正确的请求 |
xmlhttp.readyState4 && xmlhttp.status200 的解释：请求完成并且成功返回
常用状态码设置
ts
const HTTP_STATUS_CODES = {
100: "Continue",
101: "Switching Protocols",
200: "OK",
201: "Created",
202: "Accepted",
203: "Non-Authoritative Information",
204: "No Content",
205: "Reset Content",
206: "Partial Content",
300: "Multiple Choice",
301: "Moved Permanently",
302: "Found",
303: "See Other",
304: "Not Modified",
305: "Use Proxy",
307: "Temporary Redirect",
400: "Bad Request",
401: "Unauthorized",
402: "Payment Required",
403: "Forbidden",
404: "Not Found",
405: "Method Not Allowed",
406: "Not Acceptable",
407: "Proxy Authentication Required",
408: "Request Timeout",
409: "Conflict",
410: "Gone",
411: "Length Required",
412: "Precondition Failed",
413: "Request Entity Too Large",
414: "Request-URI Too Long",
415: "Unsupported Media Type",
416: "Requested Range Not Satisfiable",
417: "Expectation Failed",
422: "Unprocessable Entity",
500: "Internal Server Error",
501: "Not Implemented",
502: "Bad Gateway",
503: "Service Unavailable",
504: "Gateway Timeout",
505: "HTTP Version Not Supported"
};