Js 深入理解Ajax

作者: 十___ | 来源:发表于2018-05-23 23:09 被阅读41次

ajax的工作原理:

ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎) ,使用 户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,只有确定需要从服务器读取新数据时再由ajax引擎代为向服务器提交请求。


ajax的核心:

有javascript, XMLHT TPRequest, DOM对象组成,通过XMLHTTPRequest对象来向服务器异步请求,从服务器获得数据,然后用javascript来操作DOM来更新页面,这其中最关键的一步就是从服务器获得请求数据。


XMLHTTPRequest对象:

AJAX的最大特点是无需刷新页面便可向服务器传输或读写数据,这一特点主要得益于XMLHTTP组件的XMLHTTPRequest对象。


创建AJAX的过程:

XMLHttpRequest是AJAX的基础, 用于在后台与服务器交换数据,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

1、创建XMLHTTPRequest对象: (兼容处理)
var xhr = null;
//前面必须添加window否则报错(不能拿一个不存在的对象作为判断条件)
if(window.XMLHttpRequest) { 
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}


2、建立对服务器的调用
xhr.open(method, url, async);
method: 请求数据类型(get, post, options, head, put, delete, trace, connect) 

get请求: 
xhr.send()

post请求:
xhr.setRequestHeader("Content type", "application/x-www-form-urlencoded"); 
//向请求添加HTTP头
xhr.send("fname=Bill&lname=Gates");

GET 还是POST?

与POST相比,GET更简单也更快,并且在大部分情况下都能用。


然而,在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • b.向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST比GET更稳定也更可靠
  • url:文件在服务器上的位置
  • async: true (异步)或false (同步)
  • 同步:指发出数据后,等接收到响应以后再发送下一个数据包
  • 阐述:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事情; 当前只能做一件事情,其它事情必须等当前的事情完成,才能继续后面的事
  • 异步:指发出数据后,不用等待接收到响应,接着发送下一个数据包
  • 阐述:提交请求->等待服务器处理(这时浏览器仍然可以做其他事情) ->处理完毕;三心二意,同时可以做多件事情

XMLHttpRequest对象有 三个重要的属性:

  1. onreadystatechange 状态改变的事件触发器,每个状态改变时都会触发这个事件处理器
  2. readyState从0到4发生变化
  • 0 =未初始化
  • 1 =正在加载/服务器连接已建立
  • 2 =已加载/请求已接收
  • 3 =交互中/请求处理中
  • 4 =请求完成
  1. status服务器的HT TP状态码:
  • 1字头: 消息。这一类型的状态码,代表请求已被接受,需要继续处理。
  • 2字头:成功。 这一类型的状态码, 代表请求已成功被服务器接收、 理解、并接受。( 200:'OK')
  • 3字头:重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。( 304:'Not Modified' )
  • 4字头:请求错误。这类的状态码代表了客户端看起来可能发生了错误,妨碍了服务器的处理
  • 5、6字头: 服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

Ajax的优点

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

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

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

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

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


Ajax的缺点

  1. AJAX干掉了history功能, 即是对浏览器机制的破坏:
    在动态更新页面的情况下, 用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;
    用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中, 这将无法实现。
    用过Gmail的知道,Gmail 下面采用的Ajax技术解决了这个问题,在Gmail' 下面是可以后退的,
    但是,它也并不能改变Ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,
    通过创建或使用一个隐藏的IFRAME来重现页面.上的变更。一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断标识符(通 常被称为锚点,即URL中#后面的部分)来保持跟踪,
    允许用户回到指定的某个应用程序状态。 (许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论

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

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

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

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

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


相关文章

  • Js 深入理解Ajax

    ajax的工作原理: ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎) ,使用 户操作与服...

  • JS深入(Ajax)

    Ajax的完整请求过程 1. 创建Ajax对象 2.连接到服务器 3.发送请求 4.接收返回值 read.html...

  • 深入理解ajax

    深入理解Ajax ajax的工作原理: ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),...

  • 深入理解Ajax

    ajax的工作原理: ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),使用户操作与服务器...

  • 深入理解Ajax技术

    Ajax get和post请求区别 post请求: xmlHttp.setRequestHeader("Conte...

  • 深入理解Ajax原理

    概念 ajax 的全称是AsynchronousJavaScript and XML,其中,Asynchronou...

  • Ajax

    Ajax的基本理解 Ajax从定义上来讲,它并不是一门新的技术,它是由html,css,js,xml等技术...

  • 深入理解js

    延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前...

  • 深入理解JS

    说明 这篇文章将包含如下的几个内容: 对象的理解 函数的理解 封装与继承 常见的问题 一. 对象的理解 字面量通过...

  • js new 运行机制

    js手札--js中new到底做了些啥JS核心系列:理解 new 的运行机制深入理解 Javascript 运行机制及原型

网友评论

    本文标题:Js 深入理解Ajax

    本文链接:https://www.haomeiwen.com/subject/kywdjftx.html