AJAX学习之AJAX基础教程

天涯路远 http://www.flysblog.com

这两天开始学习AJAX.感觉太神奇了。昨天忍不住先试了一下一个有趣的功能就是定时无刷新的随机显示数据库中的一条数据和按下按钮来显示数据库中的一条数据。这两个小例子里包括了好多的AJAX应用。所以是个练习的好例子.昨天开始为以后的站点选择AJAX框架.所以这个例子用了好几个框架写成.以便分析各种框架的应用特点。HOHO...下面我们就开始激动的AJAX之旅...以后还将有更多的体验.这里主要讲讲AJAX的基础知识.万事开头难嘛.HOHO 当然要先解决基础知识了。

Ajax这个概念的最早提出者Jesse James Garrett认为: Ajax是Asynchronous javascript and XML的缩写。

　　Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:

　　·使用XHTML和CSS标准化呈现;
　　·使用DOM实现动态显示和交互;
　　·使用XML和XSLT进行数据交换与处理;
　　·使用XMLHttpRequest进行异步数据读取;
　　·最后用javascript绑定和处理所有数据;

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

1、XMLHTTPRequest

　　Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。

XMLHttpRequest 对象方法:
 方法  描述 
 abort()  停止当前请求 
 getAllResponseHeaders()  作为字符串返问完整的headers 
 getResponseHeader("headerLabel")  作为字符串返问单个的header标签 
 open("method","URL"[,asyncFlag[,"userName"[, "password"]]])  设置未决的请求的目标 URL, 方法, 和其他参数 
 send(content)  发送请求 
 setRequestHeader("label", "value")  设置header并和请求一起发送 

XMLHttpRequest 对象属性

 属性  描述 
 onreadystatechange  状态改变的事件触发器 
 readyState  对象状态(integer):0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成
 responseText  服务器进程返回数据的文本版本 
 responseXML  服务器进程返回数据的兼容DOM的XML文档对象 
 status  服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功" 
 statusText  服务器返回的状态文本信息 

2、javascript

　　javascript是一在浏览器中大量使用的编程语言，，他以前一直被贬低为一门糟糕的语言(他确实在使用上比较枯燥)，以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是，他是一门真正的编程语言，有着自已的标准并在各种浏览器中被广泛支持。

3、DOM

　　Document Object Model。

　　DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述，让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。

4、XML

　　可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。

5、综合

　　Jesse James Garrett提到的Ajax引擎，实际上是一个比较复杂的javascript应用程序，用来处理用户请求，读写服务器和更改DOM内容。

　　javascript的Ajax引擎读取信息，并且互动地重写DOM，这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，这是我们一直在通过javascript和DOM在广泛使用的方法，但要使网页真正动态起来，不仅要内部的互动，还需要从外部获取数据，在以前，我们是让用户来输入数据并通过DOM来改变网页内容的，但现在，XMLHTTPRequest，可以让我们在不重载页面的情况下读写服务器上的数据，使用户的输入达到最少。


这就是AJAX.它在背后为我们异步完成局部的页面刷新,使用户基本上感觉不到页面的刷新。更好的用户体验.

AJAX的应用:
1.级联菜单的处理(动态加载列表框)
2.用户的输入验证
3.创建工具提示
4.显示进度条
5.自动刷新页面