Ajax学习笔记
一 历史背景
Ajax是Asynchronous(异步)Javascript+XML和简写.异步请求/ 响应的模式.DHtml,动态Html技术.它能使用开发员通过Javascript来修改已载入页面的任何部分,随着CSS(层叠样式表)的出现,DHTML使用Web开发重现活力,将DHTML和隐藏帧(Frame)技术结合,可以随时根据服务器信息来更新页面的任何部分.实现了Web开发的一次真正的范型改变(paradigm shit).
后来iframe替换了frmae.1997年被作为HTML4.0官方标准被引入.开发人员可以在页面的任何地方放置iframe(通过使用CSS),以完成客户端到服务器端的难.后来IE决定向开发人员提供一个实现客户端-服务端交互的更好的产品--XMLHttp,2001年以Active对象的形式引入.
二 什么是Ajax?
Ajax是一种Web交互方法,这种方法只是在客户端和服务器端传输少量消息,从而给用户提供响应更及时的体验.传统Web应用程序模型中,Browser本身负责初始化向服务器的请求,以及处理来自服务器的响应,而Ajax模型不同,它提供一个中间层(Ajax引擎)来处理这种通信.Ajax engine实现上只是一个Javascript对象或函数,只有当信息必须从服务器上获得的时候才调用它.与传统模型不同的是,它不再需要为其他资源提供连接,而是当需要调度和执行这些请求时,向Ajax引擎发出一个函数调用,这些请求都是异步完成的.意思是不必等收到响应之后就可以继续执行后续的代码.
服务器(传统模型中,提供HTML,图像,CSS或Javascript)将配置为向Ajax engine返回其可用数据(纯文本,XML或需要的任何格式,唯一要求是Ajax engine能够理解和翻译这种数据)
Ajax engine收到服务器响应时将会触发一些操作,如完成数据解析,以及基于其所提供的数据对用户界面做一些修改.由于这个过程中传送的信息比传统模型少得多,所以用户界面的更新速度将更快,用户也就能更快的进行他们的工作.下图展示传统模型和Ajax模型的区别
三 Ajax原则
a 尽量减少通信量:尽量减少B/S间通信流量,确保Ajax应用程序不发送和接收不需要的信息,以增强其可靠性.
b 不意外:Ajax应用程序通常会引入与传统Web应用程序不同的用户交互模式.与Web标准的"点击-等待"模型相反,它会使用拖放,双击等其他用户界面风格,一定要确保用户下一步该如何操作
c 遵循常规:不要在发明用户不熟悉的交互模型上浪费时间
d 无干扰.避免采用不必要的干扰性页面元素.
e 可访问性.考虑用户可能访问的Browser的版本或特殊Browswr是否支持
f 避免下载整个页面,所有与Server通信将由Ajax engine管理.
g 用户第一,以用户为本来设计Ajax应用比其他都重要.不要追求引人注意的效果
四 Ajax所使用的技术
HTML/XHTML 内容标签语言
CSS 为文本格式提供定义
DOM 对已载入的页面进行动态更新
XML 数据交换格式
XSLT(将XML转换为XHTML,用CSS修饰其样式)
XMLHttp:通信代理(Ajax engine)
Javascript:编写Ajax engine的脚本语言
以上这些技术只有三种是必需的:HTML/XHTM,DOM,JavaScript
五 使用Ajax成熟的产品
Google Suggest | Gmail | Google Maps | A9(Amazon.com) |Yahoo!News|Bitflux Blog
六 HTTP基础
HTTP协议:由两部分组成:请求和响应,当Browser输入url时,Browser会根据你的要求创建并发送请求,该请求包含所输入的utl以及一些与Browser本身相关的信息.当服务器收到这样一个请求将返回一个响应,该响应包括与该请求相关的信息以及位于指定url的数据.然后Browser解析返回的数据并显示出网页(或一些文件内容或图片等)为止.
Http请求格式如下所示:
<request-line> 请求行用来说明请求类型,访问的资源及http版本
<headers> 头部文件,说明服务器要使用的附加信息
<blank line> 空行
[<request-body>]添加任意的其他数据,我们称这为主体(body)
在Http中,定义了大量的请求类型,但作为Ajax开发人员来说,我们只关心Get请求和Post请求.Browser键入url,Browser就将基于该url向Server发送一个GET请求以告诉Server获取并返回什么资源.例子如下:
GET /HTTP /1.1 说明是GET请求 /说明请求的是该域名的根目录,后面是说明Http的版本
Host:www.sun.com host是请求的目的地
User-Agent:Mozilla/5.0(Windows;U;Windows NT 5.1;en-US;rv:1.7.6)
Gecho/20080921 Firefox/3.0.1
Connection:Keep-Alive
Ajax是Asynchronous(异步)Javascript+XML和简写.异步请求/ 响应的模式.DHtml,动态Html技术.它能使用开发员通过Javascript来修改已载入页面的任何部分,随着CSS(层叠样式表)的出现,DHTML使用Web开发重现活力,将DHTML和隐藏帧(Frame)技术结合,可以随时根据服务器信息来更新页面的任何部分.实现了Web开发的一次真正的范型改变(paradigm shit).
后来iframe替换了frmae.1997年被作为HTML4.0官方标准被引入.开发人员可以在页面的任何地方放置iframe(通过使用CSS),以完成客户端到服务器端的难.后来IE决定向开发人员提供一个实现客户端-服务端交互的更好的产品--XMLHttp,2001年以Active对象的形式引入.
二 什么是Ajax?
Ajax是一种Web交互方法,这种方法只是在客户端和服务器端传输少量消息,从而给用户提供响应更及时的体验.传统Web应用程序模型中,Browser本身负责初始化向服务器的请求,以及处理来自服务器的响应,而Ajax模型不同,它提供一个中间层(Ajax引擎)来处理这种通信.Ajax engine实现上只是一个Javascript对象或函数,只有当信息必须从服务器上获得的时候才调用它.与传统模型不同的是,它不再需要为其他资源提供连接,而是当需要调度和执行这些请求时,向Ajax引擎发出一个函数调用,这些请求都是异步完成的.意思是不必等收到响应之后就可以继续执行后续的代码.
服务器(传统模型中,提供HTML,图像,CSS或Javascript)将配置为向Ajax engine返回其可用数据(纯文本,XML或需要的任何格式,唯一要求是Ajax engine能够理解和翻译这种数据)
Ajax engine收到服务器响应时将会触发一些操作,如完成数据解析,以及基于其所提供的数据对用户界面做一些修改.由于这个过程中传送的信息比传统模型少得多,所以用户界面的更新速度将更快,用户也就能更快的进行他们的工作.下图展示传统模型和Ajax模型的区别
三 Ajax原则
a 尽量减少通信量:尽量减少B/S间通信流量,确保Ajax应用程序不发送和接收不需要的信息,以增强其可靠性.
b 不意外:Ajax应用程序通常会引入与传统Web应用程序不同的用户交互模式.与Web标准的"点击-等待"模型相反,它会使用拖放,双击等其他用户界面风格,一定要确保用户下一步该如何操作
c 遵循常规:不要在发明用户不熟悉的交互模型上浪费时间
d 无干扰.避免采用不必要的干扰性页面元素.
e 可访问性.考虑用户可能访问的Browser的版本或特殊Browswr是否支持
f 避免下载整个页面,所有与Server通信将由Ajax engine管理.
g 用户第一,以用户为本来设计Ajax应用比其他都重要.不要追求引人注意的效果
四 Ajax所使用的技术
HTML/XHTML 内容标签语言
CSS 为文本格式提供定义
DOM 对已载入的页面进行动态更新
XML 数据交换格式
XSLT(将XML转换为XHTML,用CSS修饰其样式)
XMLHttp:通信代理(Ajax engine)
Javascript:编写Ajax engine的脚本语言
以上这些技术只有三种是必需的:HTML/XHTM,DOM,JavaScript
五 使用Ajax成熟的产品
Google Suggest | Gmail | Google Maps | A9(Amazon.com) |Yahoo!News|Bitflux Blog
六 HTTP基础
HTTP协议:由两部分组成:请求和响应,当Browser输入url时,Browser会根据你的要求创建并发送请求,该请求包含所输入的utl以及一些与Browser本身相关的信息.当服务器收到这样一个请求将返回一个响应,该响应包括与该请求相关的信息以及位于指定url的数据.然后Browser解析返回的数据并显示出网页(或一些文件内容或图片等)为止.
Http请求格式如下所示:
<request-line> 请求行用来说明请求类型,访问的资源及http版本
<headers> 头部文件,说明服务器要使用的附加信息
<blank line> 空行
[<request-body>]添加任意的其他数据,我们称这为主体(body)
在Http中,定义了大量的请求类型,但作为Ajax开发人员来说,我们只关心Get请求和Post请求.Browser键入url,Browser就将基于该url向Server发送一个GET请求以告诉Server获取并返回什么资源.例子如下:
GET /HTTP /1.1 说明是GET请求 /说明请求的是该域名的根目录,后面是说明Http的版本
Host:www.sun.com host是请求的目的地
User-Agent:Mozilla/5.0(Windows;U;Windows NT 5.1;en-US;rv:1.7.6)
Gecho/20080921 Firefox/3.0.1
Connection:Keep-Alive