[Ajax-相濡以沫,不如相忘于江湖] Ajax初识

丶灬走出姿态 提交于 2019-12-02 22:38:32

    Ajax的全称是 Asynchronous JavaScript And XML,即异步JavaScript和XML。2005年由Jesse James Garrett首先提出。在之后极短的时间内,Ajax被广泛应用到大量B/S结构的应用中,改进了传统的Web应用。

Ajax背景及由来:

    Ajax作用于浏览器/服务器模式的Web应用,即B/S结构。而传统的Web应用中,每个请求对应一个页面,不管客户端以POST还是GET方式提交请求,每次请求后都会丢弃当前页面,等待服务器生成新页面。在等待期间,旧的页面已经丢弃,新的页面还没有完全生成,整个浏览器一片空白,用户什么都做不了,只能等待,对于用户而言,这用不连续的体验,简直糟糕透了!

传统Web应用的优势和缺点概括:

    (1) 独占式的请求。用户在页面中提交了请求后,请求交由服务器处理,这段时间内用户一直在等服务器的响应,而浏览器一片空白。直到服务器返回结果,重定向到其他页面,且浏览器实实在在的将新页面下载后显示,这样用户才可以看到结果。而且如果前一个请求未处理完,则后一个请求不能发送。

    (2) 频繁的页面刷新。传统的Web应用基本采用请求-页面的对应模式,每个请求都需要丢弃当前页年来重新加载新页面。频繁的页面刷新不仅让用户处于不连续的体验中,同时也增加了带宽流量,服务器的负担加重。

    (3) 简陋的页面。传统Web应用因为需要频繁刷新页面,因而不可能制作出具有丰富表现功能的页面。丰富表现功能的页面文件过大,下载速度慢,而且页面频繁刷新,如此系统开销相当大。因而传统Web引用的页面不可能非常出色。

由于传统Web应用带来的种种弊端及缺点,新技术的出现迫在眉睫!就这样一段时间后出现了Ajax,并且Ajax技术从2005年问世以来,已在业界得到迅速推广,到现在已很难找到没有使用Ajax的B/S应用了。

Ajax技术介绍:

Ajax通过在浏览器和服务器之间添加Ajax中间层,允许浏览器异步发送请求,同时允许动态加载服务器响应。用户的请求不再直接向服务器提交,而是使用XMLHttpRequest异步地向服务器发送请求,从而避免了丢弃当前页面。

Ajax的核心是JavaScript对象XMLHttpRequest。该对象在IE 5中首次引入,它提供了发送异步发送请求的能力。整个Ajax应用的工作过程如下:

(1) JavaScript脚本使用XMLHttpRequest对象像服务器发送请求。发送请求时既可以发送GET请求,也可以发送POST请求。

(2) JavaScript脚本使用XMLHttpRequest对象解析服务器响应数据。

(3) JavaScript脚本通过DOM动态更新HTML页面。也可以为服务器响应数据动态增加CSS样式表,在当前网页的某个部分加以显示。

Ajax技术核心: XMLHttpRequest:

Ajax技术的核心是异步发送请求,而XMLHttpRequest则是异步发送请求的对象。如果抛开异步发送请求,Ajax的其他技术将完全失去原有的意义。

关于XMLHttpRequest对象的实例化,不同浏览器对此对象的实例化方式不尽相同,但目前所有浏览器都支持XMLHttpRequest。2012年7月W3C再次发布了XMLHttpRequest Level 2的草案,XMLHttpRequest即将成为规范。实际上,所有的浏览器已支持最新的XMLHttpRequest规范。

Ajax的编程脚本: JavaScript语言

JavaScript是一种跨平台的脚本语言。JavaScript脚本是Ajax技术中另一个重要部分。JavaScript主要完成如下事情:

  • 创建XMLHttpRequest对象。

  • 通过XMLHttpRequest向服务器发送请求。

  • 创建回调函数,监视服务器响应状态,在服务器响应完成后,回调函数启动。

  • 回调函数通过DOM动态更新HTML页面。

HTML页面的DOM模型

DOM也是Ajax的核心技术。没有DOM,JavaScript在获取服务器数据后无法动态更新HTML页面,获得的数据无法显示在用户的当前浏览页面中。事实上,DOM也是JavaScript获取页面数据的方式

HTML页面中DOM模型的主要功能是允许JavaScript动态操作HTML文档。通过DOM可将HTML页面视为一组包含父子关系的节点。JavaScript可以访问每个节点,修改节点内容及其属性,也可以新增节点、删除节点。

Ajax编程的技术难点

Ajax与传统Web应用相同,依然是基于请求/响应的架构,都是先由客户端发送HTTP请求,然后由服务器生成对客户端的响应。

传统Web编程和Ajax编程的区别主要在于以下三点:

(1) 客户端发送请求的方式不同

    传统Web应用发送请求通常有两种方式: 采用提交表单的方式发送GET请求或POST请求;让浏览器直接请求玩过资源发送GET请求。在采用Ajax技术后,应用需要使用XMLHttpRequest对象来发送请求。

(2) 服务器生成的响应不同

    传统Web应用中服务器的响应总是完整的HTML页面,从<html>标签开始,然后是<head>...</head>,然后是<body>...</body>,最后由</html>结束。在采用Ajax技术后,服务器响应不再是完整的HTML页面,而只是必须更新的数据,因此服务器生成的响应可能只是简单的文本(也可能是JSON格式或XLM格式的文本)

(3) 客户端加载相应的方式不同

    传统Web应用具有每个请求对应一个页面的关系,而且服务器响应就是一个完整的HTML页面,所有浏览器可以自动加载并显示服务器响应。在采用Ajax技术后,服务器相应的只是必须更新的数据,股客户端必须通过程序来东台加载服务器响应。

Ajax的特征

(1) 异步发送请求

    异步发送请求是Ajax应用最核心的内容。Ajax给了用户连续体验,用户发送请求后,还可以在当前页面浏览,或者继续发送请求,即使服务器响应还没有完成。而服务器响应完成后,浏览器并不是重新加载整个页面,而是金价在需要更新的部分。

(2) 服务器响应是数据,而不是页面内容

    在Ajax应用中,网络负载主要集中在应用加载期,也就是页面第一次下载时。一旦页面下载成功,则相当于在客户端部署了复杂的应用。而后面的操作将是相当迅速的,客户端的JavaScript负责与服务器通信,从服务器获取必须更新的部分数据,而不是整个页面内容。因此,Ajax的累积网络流量比传统Web应用要小很多。

(3) 浏览器中的是应用,不是简单视图

    可将Ajax看做是Ajax应用,因为Ajax应用初始化时,需加载大量的JavaScript代码。这些代码包含了部分业务逻辑,将在后台默默工作,负责处理部分逻辑,异步提交请求,以及读取服务器相应数据,动态更新页面。









标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!