Ajax深入浅出（总结）

引子

先说一下我的问题，在做维系小屏（一个电信的项目，时间点在2015年）的过程中，我需要通过在Action中的方法请求外部接口，从而获取返回结果集。但是因为业务逻辑问题需要很多的逻辑判断放在其中，所以我把很多的东西放在前台通过Ajax请求的方式去获取相应的结果集。这样子就会根据需要去获取结果集，减少不必要的请求次数以此对服务器和客户端的压力都会相应的减少。但是，项目一上线后出现的几百订单把服务器给搞垮了，所以我觉得有可能是Ajax请求过多（逻辑很多，当时我确实很菜，没想到把逻辑用 java 代码逻辑来处理，勿喷）导致服务器压力过大。于是开始查询一些资料，这便是前提。

Ajax由来：自来水管原理（全网摘抄）

因为一些原因，自来水管要给小区停水，然后推出两种方案：

• 第一种方案是直接停水5小时，5小时后恢复供水；
• 第二种方案是在10小时内间歇性的供水，期间供水只有原来的1/3，10小时后恢复供水。

显而易见大多数人都会选择第二种方案，所以Ajax应运而生。
异步就是通过在客户端请求服务器的时候，服务器不是直接一次性的返回所有的请求数据，而是一部分一部分的返回数据，最终所有数据到达客户端的时候先由Javascript来处理（由Javascript来操作DOM更新页面），然后显示在页面上。可以把服务器响应客户端返回的东西看作是是一个纯文本流，这个纯文本流可以是Xml、也可以是html、javascript代码，也可以是一个字符串。

Ajax定义

Ajax是Asynchronous JavaScript + XML的缩写，是集中了几种技术的组合体，其表现形式是CSS+XHTML，DOM模型来交互和动态显示，是通过XMLHttpRequest和服务器进行异步通信，使用Javascript来绑定和调用（JQuery就很好的封装了它）-----以上摘自度娘。

服务器响应客户端流程

1. 首先是浏览器创建一个XmlHttpRequest对象(不同的浏览器会产生不同的XmlHttpRequest对象)。
2. 然后判断这个对象的自身属性值readyState来判断对象的整体状态，当对象状态值为4的时候，即数据已经发送完毕，然后服务器会根据询问请求状态（status=200）来响应客户端。
     1) 未初始化，此时对象已建立，只是尚未初始化，即尚未调用open方法 ;
     2) 初始化，此时对象已建立，尚未调用send方法 ;
     3) 发送数据，send方法已调用，但是当前状态以及http头未知 ;
     4) 数据传输中，已接收部分数据，因为响应以及http头不全，这时通过responseBody和responseText获取部分数据会出现错误 ;
     5) 完成，数据接收完毕，此时可以通过responseXml和requestText获取完整的回应数据
3. 接下来就是客户端通过responseXml（从服务器进程返回数据的字符串形式）和requestText（从服务器进程返回的DOM兼容的文档数据对象）来读取获取的数据，再通过Javascript操作DOM显示在页面上了。
   其中在创建XmlHttpRequest对象之后，调用open方法获取一些参数(1)、向服务器请求的数据类型，即post还是get ;(2)、请求的url ; (3)、传递的参数 ; (4)、传输的方式，false为同步，true为异步，默认是异步的。然后在这些参数就绪后调用send方法请求服务器，根据服务器返回的结果集不断改变readyState的值，在此期间对象会不断的判断这个值。

Ajax示例

$.ajax({
 		//表示请求是否异步处理。默认是 true,  true  or false
 		async:true,
 		//规定请求的类型（GET 或 POST，大小写都可以）
 		type: 'post',
 		//【必填】规定发送请求的 URL。默认是当前页面。
 		url:"www.baidu.com",
 		//发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"
 		contentType:'application/x-www-form-urlencoded',
 		//规定要发送到服务器的数据
 		data:{userName:'张三',userPwd:'123456'},
 		//预期的服务器响应的数据类型。
		dataType:'application/x-www-form-urlencoded',
		//【必填】当请求成功时运行的函数，result为请求返回的结果集
 		success:function(result){
        $("#div1").html(result);
  		},
  		//如果请求失败要运行的函数，error为异常返回的结果集
  		error:function(error){
  		},
    });

总结

• 单个请求并不会因为用了 Ajax 而给服务器带来更多的压力；
• 如果使用 Ajax 后，后台的应用挂了，那说明你本身的后台代码就存在问题，而不在于 Ajax 本身，因为Ajax 仅仅是做了个请求异步而已。相反因为请求异步，可能会减轻服务器压力；
• Ajax 对客户端可能会产生一些影响，因为异步请求可能导致多个请求返回的数据同时渲染，不过现在客户端的处理能力越来越强大，这部分几乎忽略不计；
• 某些时候，因为业务加载需要，可以将 async 参数值改成 false ，强调顺序 ；
• Ajax最大的作用在于提高用户的体验度，因为它能做到无页面刷新；