Ajax实现原理及步骤

Ajax实现原理及步骤

Ajax有别于传统web开发服务器请求的区别所在：
Ajax是异步请求数据。（我当时面试商汤科技竟然没有想到这点，害)

ajax所包含的技术
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。(最重要)
4.使用javascript来绑定和调用。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
（Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。）
XMLHttpRequest是ajax的核心机制,是一种支持异步请求的技术，简单的说，也就是JavaScript可以及时向服务器提出请求和处理相应，而不阻塞页面，达到无刷新的效果。
步骤：

1. 创建XMLHttpRequest对象
2. 配置Ajax请求地址（通过open创建Http请求）
3. 向服务器发送Http请求（send()方法）
4. 判断和服务器端的交互是否完成，判断服务器端是否返回正确的数据（监听请求，接受响应）

原生Ajax实现

//1：创建Ajax对象
var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);
//3：发送请求
xhr.send(null); // 严谨写法
//4:监听请求，接受响应
xhr.onreadysatechange=function(){
     if(xhr.readySate==4&&xhr.status==200 || xhr.status==304 )
         console.log(xhr.responsetXML)
}

Ajax的优点

- 无刷新更新数据
使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
- 异步与服务器通信
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
- 前端和后端负载平衡
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

总结：减轻服务器的负担,按需取数据,最大程度的减少冗余请求，局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。

- 基于标准被广泛支持
不需要下载浏览器插件和小程序

- 界面和应用分离
数据与呈现分离，有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

AJax缺点：

• 对搜索引擎支持较弱。（如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。）
• Ajax并不能很好的支持移动设备
• Ajax的安全问题（诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。）
• 在动态更新页面的情况下，无法回到前一个页面状态。
• Ajax存在网络延迟（即用户发出请求到服务器发出响应之间的间隔）

总结：AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性。

部分参考：https://blog.csdn.net/chenjuan1993/article/details/81626487