一、Ajax是什么？
Ajax是一种异步请求后台数据的web开发技术
二、Ajax原理
因为浏览器提供了XMLHttpRequest对象，使得浏览器可以发出http请求和接收http相应，期间并不影响浏览器做其他的事情，等收到XHR返回来的数据再渲染页面。
1、浏览器让xhr去跟服务器要点数据
2、浏览器接着做其他的事
3、xhr去向服务器请求数据
4、服务器返回数据给xhr
5、xhr通知浏览器数据回来了
6、浏览器收到xhr返回的数据渲染页面
三、使用Ajax
1、创建Ajax核心对象XMLHttpRequest
var xhr = null;
if(window.XMLHttpRequest){
//兼容IE7，firefox, chrome, opera, safari
xhr = new XMLHttpRequest();
}else{
//兼容IE5 ，IE6
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
2、向服务器发送请求
xhr.open(method,url,async)
send(string) //post请求时才使用字符串，否则不用带参数
method:请求的类型，GET/POST
url:文件在服务器位置
async：true(异步)，false(同步)
注意：post请求必须设置请求头的格式内容
xhr.open("POST","test.html",true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencode")
xhr.send("fname = Henry&lname = Ford")
3、服务器相应处理
reponseText 获得字符串形式数据
reponseXML 获得XML形式数据格式
//同步处理
xhr.open("GET","info.txt",false)
xhr.send()
document.getElementById("myDiv").innerHTML = xhr.reponseText
//异步处理
xhr.onreadyState==4&xhr.status == 200;{
if(xhr.readyState == 4 && xhr.status == 4){
document.getElementById("myDiv").innerHTML = xhr.reponseText;
}
}
readyState
readyState是XHRHttpRequest对象的一个属性，代表XHRHttpRequest的状态，共5个数字
0：未初始化--未调用open方法
1：启动--调用了open方法，还没有调用send方法
2：发送--调用了send方法，还没有接到响应
3：接收--已经接受到部分响应数据
4：完成--已经接收到全部相应数据，而且已经在客户端使用了
四、小结
其实这些在实际开发项目基本用不到的，除非一些老祖宗的项目，但也是每一个前端开发者必须掌握的，实际开发中对象框架都有相应的技术，比如jquery自带的ajax，vue中一般用axios等等，还有fetch用的人也很多。