什么是ajax？
Ajax是与服务器交换数据，作用就是在不用重新加载整个页面的情况下更新部分网页。
其实我们都知道前端与服务端交互数据有两种方式Ajax与form表单,在早些年前后端分离的还没有那么明显时，前后端交互数据都是靠form表单来实现，为什么现在基本上Ajax已经代替了form表单呢？
就像开头说的Ajax的作用好处就是更新网页内容的时候不用重新加载整个页面，而form表单必须重新加载整个页面，这就导致了用户的体验极差，并且工作人员在编写代码的时候工作量也是极大的，代码繁琐且混乱，所以现在的Ajax的使用领域相比于form表单更多，更广。
提到数据传输就不得不提到HTTP请求的两种方式了，GET和POST
那么这两者有何区别呢？
- GET/POST请求的的提交位置不同
如果是GET请求会将提交的数据拼接到URL后面，例如：
如果是POST请求就会将提交的数据放在请求体中。
- GET/POST请求的应用场景
GET请求用于提交非敏感数据和小数据 POST请求用于提交敏感数据和大数据
AJAX实现的五个步骤
- 创建XMLHttpRequest对象
- 设置请求方式和请求地址
- 发送请求
- 监听状态的变化
- 处理返回的结果
看起来复杂其实五个步骤实现起来并不难，就像套模板一样。
- 创建一个XMLHttpRequest对象
var xml=new XMLHttpRequest();
但一般这一步必须要做兼容性处理，看window地下是否含有XMLHttpRequest对象
所以这一步就变成了
var xml = null;
if(window.XMLHttpRequest){
xml = new XMLHttpRequest()
}else{
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
- 设置请求方式和请求地址
xml.open("GET", "XXX.php", true);
上面的open方法有三个参数，分别按顺序是：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
注：因为ajax是异步，所以第三个参数async就是true
- 发送请求
xml.send()
- 监听状态的变化
xml.onreadystatechange = function(){
if(xml.readyState == 4){ //ajax请求已经完成
if(xml.status == 200){ //这是一个成功的请求
console.log(xml.responseText) //服务端的返回值
responseText(xml.responseText)
}
}
}
注：上面的xml.readyState 有五个 状态分别对应0，1，2，3，4
0：请求未初始化，还没有调用 open()。
1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了。
上面的xml.status也对应极多的值，常见的大于等于两百且小于三百一般就是收到了请求，常见的几个就是：
200——请求成功
304——客户端已经执行了GET，但文件未变化
403——请求不允许
404——没有发现文件、查询或URl
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
- 处理返回的结果
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState === 4){
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
}else{
console.log("没有接收到服务器返回的数据");
}
}
}
总结：ajax就是这几步就可以，方便是方便但是存在的隐患也是极多，诸如：Ajax的安全问题Ajax对于移动终端设备的支持不是很好、Ajax对搜索引擎的支持较弱等等问题需要在以后的技术更新与换代上一步步的消弱它。
