AJAX工作原理及其优缺点

1、什么是AJAX？

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
使用XHTML+CSS来标准化呈现；
使用XML和XSLT进行数据交换及相关操作；
使用XMLHttpRequest对象与Web服务器进行异步数据通信；
使用Javascript操作Document Object Model进行动态显示及交互；
使用JavaScript绑定和处理所有数据。
这些能提供富用户体验。完全的 AJAX应用给人以桌面应用的感觉。

2、为什么要使用Ajax?

它可以在不刷新整个页面的情况下与服务器通信保持原有页面状态。

3、AJAX的工作原理

Ajax工作原理其实就是在一个页面的指定位置可以加载另一个页面中所有的输出内容。这样就实现了一个静态页面获取到数据库中所返回的数据信息了。根据这样的原理所以Ajax实现了静态页面在不刷新整个页面的情况下与服务器通信。

4、AJAX 工作原理

Ajax通过XmlHttpRequest对象来向服务器发出异步请求，从服务器获得数据，然后用Javascript来操作DOM而更新页面。
①创建Ajax对象(XmlHttpRequest)

var xhr = new XMLHttpRequest();

②判断数据的传输方式（get/post）

/**type  请求方式* url  请求路径* data 传递的参数  要求 : 必须是key=value 如果是多个参数 key1=value1&key2=value2*/
function ajax(type,url, data) {var xhr = new XMLHttpRequest();// 判断type是get还是post  // data1.php?name=jack&age=12if(type == "get") {url += "?" + data;}xhr.open(type, url);// 判断是否为post  如果是post请求 传参使用send方法传参 并且加请求头if(type  == "get") {xhr.send();} else {// 传参需要设置请求头xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// 发送请求xhr.send(data);}// 不传参数时  get和post请求一样xhr.onreadystatechange = function() {if(xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}}

③设置请求头

       // 判断是否为post  如果是post请求 传参使用send方法传参 并且加请求头if(type  == "get") {xhr.send();} else {// 传参需要设置请求头xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// 发送请求xhr.send(data);}

④发送请求如果是post请求并且需要向数据库传递数据那么就在send方法里面进行传递

 /***type  请求方式* url  请求路径* data 传递的参数  要求 : 必须是key=value 如果是多个参数 key1=value1&key2=value2* success  接收一个函数 当响应体拿到之后 调用这格回到函数* dataType 传输一个数据类型(数据格式) 我们可以根据这个参数进行判断 做对应的处理*/function ajax(type,url, data, success, dataType) {var xhr = new XMLHttpRequest();// 判断type是get还是post  // data1.php?name=jack&age=12if(type == "get") {url += "?" + data;}xhr.open(type, url);// 判断是否为post  如果是post请求 传参使用send方法传参 并且加请求头if(type  == "get") {xhr.send();} else {// 传参需要设置请求头xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// 发送请求xhr.send(data);}// 不传参数时  get和post请求一样

⑤监听响应完成事件

document.getElementById("btn1").onclick = function() {xhr.onreadystatechange = function() {if(xhr.readyState == 4 && xhr.status == 200) {// 不管什么时候 都是把响应体打印// console.log(xhr.responseText);// 说明你想对响应体做什么   通过这个函数传进来  然后在这里调用运行// success(xhr.responseText);// 先拿到响应体var res = xhr.responseText;if(params.dataType == "json") {res = JSON.parse(res);} else if(params.dataType == "XML") {// 对XML数据进行转换// 创建转换对象var parser = new DOMParser();res = parser.parseFromString(res, "text/xml");} else {res = xhr.responseText;}params.success(res);}}}

检测XMLHttpRequest对象的readyState属性，该属性表示请求/响应过程的当前活动阶段
0：未初始化。尚未调用open()方法

1：启动。已经调用open()方法，但尚未调用send()方法

2：发送。已经调用send()方法，但尚未接收到响应

3：接收。已经接收到部分响应数据

4: 完成。已经接收到全部响应数据。

5、AJAX的优点

①提高了性能和速度减少客户端和服务器之间的流量传输，同时减少了双方响应的时间，响应更快，因此提高了性能和速度。
②交互性能好可以开发更快，更具交互性的Web应用程序。
③异步调用意味着客户端浏览器在开始渲染之前避免等待所有数据到达。
④使用XMLHttpRequest XMLHttpRequest在Ajax Web开发技术中起着重要作用。XMLHttpRequest是由Microsoft设计的特殊JavaScript对象。XMLHttpRequest对象调用作为异步HTTP请求到服务器以传输数据。它用于向非Ajax页面发出请求。
⑤拥有开源JavaScript库： JQuery，Prototype，Scriptaculous等。
⑥AJAX通过HTTP协议进行通信

6、AJAX的缺点

①增加了设计和开发时间
②比构建经典Web应用程序更复杂
③AJAX应用程序中的安全性较低，因为所有文件都是在客户端下载的。
④可能出现网络延迟问题
⑤禁用JavaScript的浏览器无法使用该应用程序。
⑥由于安全限制，只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息，则无法在AJAX中显示。