前端在与后端的交互中，ajax 起着重要作用，这篇主要是从ajax的原理、优缺点以及实现原理来进行阐述。
ajax的优点：- 无刷新更新数据。页面无刷新，在页面内与服务器通信，用户体验好。
- 异步与服务器通信。使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
- 界面与应用分离。数据与呈现分离，有利于分工合作。
- 被广泛支持。不需要下载浏览器插件或小程序，但需要允许JS在浏览器上运行。
ajax的缺点：
- ajax干掉了后退功能。在动态更新页面的情况下，用户无法回到前一个页面的状态，因为浏览器仅能记忆静态页面的变化。用户通常希望在点击后退按钮之后能够取得前一次操作。但在ajax应用程序中，这是无法实现的。
- 安全问题。会暴露比以前更多的服务器逻辑，可能会收到更多的攻击，如跨站脚本攻击、SQL注入攻击。
- 如果使用不当，ajax会增大网络数据流量，降低整个系统的性能。
ajax的原理：
ajax相当于在用户与服务器之间加了一个中间层，使用操作与服务器响应异步化，并不是所有用户请求都会提交给服务器。只有确定需要从服务器读取新数据时再由ajax引擎代向服务器提交请求。 它的原理简单来说就是通过XMLHTTPRequest对象向服务器发送异步请求，从服务器获得数据，然后用JS操作DOM来更新页面。ajax的实现：
function ajax(obj){ var xhr = new XMLHTTPRequest(); obj.data = params(obj.data); //序列化数据 if(obj.type.toLowercase() === 'get'){ //如果是get方法，则改造url obj.url += obj.url.indexOf('?') === -1 ? '?' + obj.data : '&' + obj.data; } if(obj.async){ //如果是异步方式，则监听readyState的变化 xhr.onreadyStateChange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ obj.success(xhr.responseText); } } } } xhr.open(obj.type, obj.url, obj.async); if(obj.type.toLowercase() === 'get'){ //get方法不发送数据 xhr.send(null); } else{ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(obj.data); } if(!obj.async){ if(obj.status === 200){ obj.success(xhr.respnseText); } }}function params(data){ var s = []; for(var name in data){ s.push(URIComponentEncode(name)+'='+URIComponentEncode(data[name])); } return s.join('&');}复制代码