AJAX

Posted 2020-10-03

一、Ajax的定义
浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。
Ajax全称Asynchronous javascript and XML，即异步的JavaScript和XML。
Ajax可以是同步请求，也可以是异步请求。但是，大多数情况下，特指异步请求。因为同步的Ajax请求，对浏览器有“堵塞效应”。

二、Ajax的请求过程
1、创建XMLHttpRequest对象；
2、浏览器与服务器建立连接open；
3、设置超时，回调函数；
4、浏览器向服务器发送请求send；
5、服务器向浏览器响应请求，客户端获取异步调用返回的数据；
6、实现局部刷新。

三、实现简单的get请求和post请求

/**
 * [getXHR 返回XMLHttpRequest对象实例]
 * 公用方法，get请求和post请求都可以用
 */
function getXHR() {
    var xhr = null;
    if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    return xhr;
}

//实现一个get请求
function getRequest(url){ 
    var xhr = getXHR(); 
    xhr.open("GET",url); 
    xhr.onreadystatechange = function() { 
        if ((xhr.readyState == 4) && (xhr.status == 200)) { 
            console.log(xhr.responseText);
        } else { 
            console.error(xhr.statusText);
        } 
    }
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(null);  
}

//实现一个post请求
function postRequest(url,data){ 
    var xhr = getXHR(); 
    xhr.open("POST",url); 
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    
    xhr.onreadystatechange = function() { 
        if ((xhr.readyState == 4) && (xhr.status == 200)) { 
            console.log(xhr.responseText);
        } else { 
            console.error(xhr.statusText);
        } 
    } 
    xhr.onerror = function (e) {
      console.error(xhr.statusText);
    };
    xhr.send(data); 
}

四、Ajax异步的原理
1、浏览器有4种线程

GUI渲染线程
Javascript引擎线程
浏览器事件触发线程
HTTP请求线程

2、线程间的协作
对于一个Ajax请求，Javascript引擎首先生成XMLHttpRequest实例对象，open过后再调用send方法。至此，所有的语句都是同步执行，但从send方法内部开始，浏览器为将要发生的网络请求创建了新的HTTP请求线程，这个线程独立于Javascript引擎线程，于是网络请求异步被发送出去了。另一方面，Javascript引擎并不会等待Ajax发起的HTTP请求收到结果，而是直接顺序往下执行。

当HTTP请求收到response后，浏览器事件触发线程捕获到了Ajax的回调事件，该回调事件并不会立即被执行，而是以先进先出的方式添加到任务队列的末尾，等到Javascript引擎空闲时，任务队列中排队的任务将会依次被执行，循环读取事件。这些事件回调包括setTimeout，setInterval，click，ajax异步请求。
在回调事件内部，有可能对dom进行操作。此时浏览器便会挂起Javascript引擎线程，转而执行GUI渲染线程，进行UI重绘(repaint)或者回流(reflow)。当Javascript引擎重新执行时，GUI渲染线程又会被挂起，GUI更新将被保存起来，等到Javascript引擎空闲时立即被执行。

GUI渲染线程和Javascript引擎线程是互斥的。其他线程相互之间，都是可以并行执行的，Ajax并没有破坏Javascript的单线程机制。

五、Ajax的优缺点
1、优点
   A、无刷新更新数据
Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据，这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
   B、异步与服务器通信
Ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
   C、前端和后端负载平衡
Ajax可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
   D、基于标准被广泛支持
Ajax基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
   E、界面与应用分离
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
2、缺点
   A、Ajax干掉了Back和加入收藏书签功能，即对浏览器机制的破坏。
对应用Ajax最主要的批评就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，比如创建或使用一个隐藏的IFRAME来重现页面上的变更。当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。
比如使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持追踪，允许用户回到指定的某个应用程序状态。许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。
比如html5的pajax技术，ajax+history.pushState以后可以直接操作浏览历史，并以字符串形式存储网页状态，将网页加入网页收藏夹或书签时状态会被隐形地保留。
   B、Ajax的安全问题
Ajax技术带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚本攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
   C、因为网络延迟需要给用户提供必要提示
进行Ajax开发时，网络延迟，会让用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。