一文明白ajax请求

ajax是Asynchronous JavaScript & XML（异步JavaScript和XML）的缩写。这并不是一个新的技术，但还有一些前端开发人员不太清楚其中的原理和技术点，我们一起来梳理一下：

一、实现原理

它的实现原理，简单来说，是通过XmlHttpRequest对象向服务器发送异步请求，从服务器获得数据，然后用js操作DOM，实现页面局部更新。
具体来说，ajax是由事件触发，创建一个XMLHttpRequest对象，把HTTP方法 （POST/GET）、目标URL、请求返回后的回调函数，设置到XMLHttpRequest对象，然后通过XMLHttpRequest对象向服务器发送请求，请求发送后继续响应用户的界面交互，等到请求真正从服务器返回时才调用callback()函数，对响应数据进行处理。

二、ajax请求的步骤

1、创建一个XMLHttpRequest对象

var xmlhttprequest = new XMLHttpRequest();

2、调用xhr对象的open方法，接收三个参数method、url、async

xmlhttprequest.open(
    "GET",  // 
    "http://localhost:8080/16_json_ajax/ajaxServlet?action=javaScriptAjax",
    true
)

3、在send方法前，绑定onreadystatechange事件，监听服务器的响应过程，来知道服务器是否正确做出了响应，并处理请求完成后的操作。

xmlhttprequest.onreadystatechange = function(){
    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
        var jsonObj = JSON.parse(xmlhttprequest.responseText);
        // 把响应的数据显示在页面上
        document.getElementById("div01").innerHTML = "姓名：" + jsonObj.name;
    }
}

readyState状态码，主要有：

• 0：请求未初始化
• 1：服务器连接已建立，open已调用
• 2：请求已接收，即已接收到头信息
• 3：请求处理中，即接收到响应主体
• 4：请求已完成，且响应已就绪
  常用的http状态码有：
• 200：（成功）
• 403：（禁止）服务器拒绝请求
• 404：（未找到）服务器找不到请求的页面
• 408：（请求超时）服务器等候请求发生超时
• 500：（服务器内部错误）服务器遇到错误，无法完成请求

4、调用send方法发送请求

xmlhttprequest.send();

三、get和post请求的区别

1、传递方式不同：GET请求将参数跟在URL后，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。
2、get可提交的数据量不能多于1024字节。post可以发送大量数据。
3、安全方面，get请求的数据会被浏览器缓存起来，其他人就可以读取这些数据，所以某种情况下，get安全性较低。

四、优点缺点

优点：
ajax请求最大的优点就是异步请求，局部刷新，不妨碍用户浏览页面或者其他操作。另外，界面与应用分离，有利于分工合作、提高效率；并且可以减少冗余请求和响应对服务器的负担，提升性能。

缺点主要有：
1、干掉back按钮，破坏了浏览器的后退机制。
2、安全方面，容易受到黑客攻击。
3、对搜索引擎支持较弱。
4、不能很好支持移动设备。
5、违背了url和资源定位的初衷。