[交互]AJAX

AJAX 是技术，不是工具，区别于 axios、fetch、$.ajax 等(封装工具)现有交互工具,是用于改变部分网页的技术

HTTP 超文本传输协议，所以 AJAX 也不是 HTTP , AJAX 是实现 HTTP 的一种技术

数据交互的根本是现代浏览器都支持 XMLHttpRequest 对象！！！！

AJAX：Asynchronous JavaScript and XML

创建 XMLHttpRequest

let xmlhttp = null;
if (window.XMLHttpRequest) {
  //  IE7+, Firefox, Chrome等现代浏览器执行代码
  xmlhttp = new XMLHttpRequest();
} else {
  // IE6, IE5 浏览器执行代码
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
1
2
3
4
5
6
7
8

发送请求

xmlhttp.open(method, url, async);
xmlhttp.setRequestHeader(header, headerValue); //设置请求头
xmlhttp.send(postStr); //发送请求到服务器
1
2
3

• method: 方法类型
• url: 服务器请求文件地址
• async: 同步 false 或异步 true
• postStr: post 方法提交的数据

服务器响应

XMLHttpRequest readyState 状态值

xmlhttp.readyState 的值

xmlhttp.readyState 的值每次发生改变都会调用 xmlhttp.onreadystatechange

响应数据

xmlhttp.responseTxt; //响应为字符串
xmlhttp.responseXML; //响应为XML对象
1
2

请求状态变更回调函数

xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
  }
};
1
2
3
4
5

XMLHttpRequest status 的值

xmlhttp.status 的值及解释：

xmlhttp.readyState4 && xmlhttp.status200 的解释：请求完成并且成功返回

常用状态码设置

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"
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43