Ajax所包含的技术
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
AJAX 的核心是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的；IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
var xmlHttp=new XMLHttpRequest();
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法用这个：
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求
XMLHttpRequest 对象的三个常用的属性：
1. onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数
xmlHttp.onreadystatechange = function() {
//我们需要在这写一些代码
}
2. readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：
状态 描述
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}
3. responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}
xmlhttprequst的方法
1. open() 方法
open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理(是否异步处理请求，是为true，否为false)。
xmlHttp.open("GET","test.php",true);
2. send() 方法
send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：
xmlHttp.send(null);
具体
一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：
`
//第一步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) { //非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { //IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
//第二步：设置和服务器端交互的相应参数，向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);
//第三步：注册回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误！");
}
}
}
//第四步：设置发送请求的内容和发送报送。然后发送请求
var params = "userName=" + document.getElementsByName("userName")[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value + "&time=" + Math.random(); // 增加time随机参数，防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8"); // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);
原文：https://blog.csdn.net/weixin_37580235/article/details/81459282