[Ajax-相濡以沫,不如相忘于江湖] Ajax初识
2016-01-26 09:42
435 查看
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代码。这些代码包含了部分业务逻辑，将在后台默默工作，负责处理部分逻辑，异步提交请求，以及读取服务器相应数据，动态更新页面。
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代码。这些代码包含了部分业务逻辑，将在后台默默工作，负责处理部分逻辑，异步提交请求，以及读取服务器相应数据，动态更新页面。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 深入电子商务发展 四核服务器力揽狂澜
- 再谈Jquery Ajax方法传递到action(补充)
- Dom在ajax技术中的作用说明
- 使用Ajax实时检测"用户名、邮箱等"是否已经存在
- 探讨Ajax中同步与异步之间的区别
- ajax中data传参的两种方式分析
- 原生AJAX写法实例分析
- 探秘ajax跨域请求
- JQuery ajax返回JSON时的处理方式 (三种方式)
- Ajax中浏览器和服务器交互详解
- ajax实现点击不同的链接让返回的内容显示在特定div里
- ajax 动态传递jsp等页面使用id辨识传递对象
- ajax与传统web开发的异同点
- AJAX简单应用实例-弹出层
- AJAX初级教程之初识AJAX
- Ajax无刷新分页的性能优化方法
- jquery对ajax的支持介绍
- jQuery基于ajax实现星星评论代码
- Ajax 说的比较清楚的一篇文章