什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX 工作原理
AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest 是 AJAX 的基础。
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=newActiveXObject("Microsoft.XMLHTTP");
为了适应目前主流的浏览器，所以写了一个比较全面的方法，浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var httpTemp;
//判断是否支持XMLHttpRequest对象
if(window.XMLHttpRequest){ //这里省略了 “== true” 这是if判断的简短写法
// IE7+, Firefox,Chrome, Opera, Safari 浏览器执行代码
httpTemp = new XMLHttpRequest();
}else{
//IE6, IE5 浏览器执行代码
httpTemp = new ActiveXObject('Microsoft.XMLHTTP');
}
AJAX - 向服务器发送请求请求
XMLHttpRequest对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
httpTemp.open("GET","ajax_info.txt",true);
httpTemp.send();
open(method,url,async):
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
send(string):
string：仅用于 POST 请求
GET 请求
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
POST 请求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)：
- header: 规定头的名称
- value: 规定头的值
关于更多的setRequestHeader参数可以访问：https://blog.csdn.net/qq_34322905/article/details/79668779
url - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址：
xmlhttp.open("GET","ajax_test.html",true);
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open("GET","ajax_test.html",true);
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
AJAX - 服务器 响应
如需获得来自服务器的响应，请使用XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText | ：获得字符串形式的响应数据。 |
responseXML | ：获得 XML 形式的响应数据。 |
AJAX - onreadystatechange 事件
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange：
存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。
readyState：
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status： 200:"OK"
404: 未找到页面
httpTemp.onreadystatechange=function() {
if (xmlhttp.readyState==4&& xmlhttp.status==200) {
httpDoc = xmlhttp.responseText;
}
}
整体一个请求的代码：
var httpTemp;
var httpDoc;
if(window.XMLHttpRequest){
httpTemp= new XMLHttpRequest();
}else{
httpTemp = new ActiveXObject('Microsoft.XMLHTTP');
}
httpTemp.open('GET','http://192.168.1.88:8005/modules/interface_goods/?c=recommend_goods',true);
httpTemp.send('');
httpTemp.onreadystatechange = function(){
if(httpTemp.readyState== 4 && httpTemp.status == 200){
httpDoc= httpTemp.responseXML|| httpTemp.responseText;
console.log(httpDoc);
}
}
这里是一些请求的状态码：
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版本