关于Ajax的总结

Ajax

什么是Ajax

Ajax = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.

(AJAX代表异步JavaScript和XML。它是一组用于异步显示数据的相关技术。换句话说，它在不重新加载网页的情况下发送和检索数据。)

为什么要用ajax：

Ajax应用程序的优势在于：

• 通过异步模式，提升了用户体验

• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

• Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

AJAX最大的特点是什么。

Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

ajax的优点

Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：

• 无刷新更新数据。
  AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

• 异步与服务器通信。
  AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

• 前端和后端负载平衡。
  AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

• 基于标准被广泛支持。
  AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

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

---

AJAX的缺点

• AJAX干掉了Back和History功能，即对浏览器机制的破坏。**
  在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

• AJAX的安全问题。**
  AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

• 对搜索引擎支持较弱。**
  对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

• 破坏程序的异常处理机制。**
  至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

• 违背URL和资源定位的初衷。**
  例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

• AJAX不能很好支持移动设备**。
  一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

• 客户端过肥，太多客户端代码造成开发上的成本。**
  编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

ajax几种请求方式？他们的优缺点？

常用的post,get,delete。不常用copy、head、link等等。

区别：

(1)post比get安全 (因为post参数在请求体中。get参数在url上面)

(2)get传输速度比post快 根据传参决定的。(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)

(3)post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右

(4)get获取数据 post上传数据(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

AJAX有哪些安全问题？

• AJAX源代码是可读的
• 攻击者可以将脚本插入系统

ajax兼容写法

function createXHR(){
  if(typeof XMLHttpRequest != "undefined"){
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject != "undefined"){
    var version = [
      "MSXML2.XMLHttp.6.0",
      "MSXML2.XMLHttp.2.0",
      "MSXML2.XMLHttp"
    ];
    for(var i = 0;i<3;i++){
      /*return new ActiveXObject(version[i]);*/
      //使用try{}catch{}防止在创建对象时出错
      try{
        return new ActiveXObject(version[i]);
      }catch(e){
        //TODO handle the exception
      }
    }
  }else{
    //如果都不支持，则抛出异常
    throw new Error("您老的浏览器实在是不行了")
    //alert("您老的浏览器实在是不行了");
  }
}

简述 ajax 的过程

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 使用JavaScript和DOM实现局部刷新
   .get /.getJson() /().load()

跨域问题

同源策略限制 不同源会造成跨域。以下任意一种情况不同，都是不同源。

（同源：协议 域名 端口号全部相同 只要有一个不相同就是非同源策略）

跨域解决方案有哪些

CORS：跨域资源共享

原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求

限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上

需要后台设置
Access-Control-Allow-Origin: *              //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com   //只允许所有域名访问

反向代理