AJAX教程(一) 认识AJAX
这是我第一次公开讲课,讲的不好,还请大家多多批评和指点.^_^
从今天起,我们将一起学习AJAX(异步的JavaScript 和 XML),它是一种能够实现页面部分刷新,避免每次请求数据而使整个页面重新刷新,提高访问速度的技术.
在正式介绍AJAX之前,我们先来看AJAX的前身,远程脚本访问(Remote Scripting)技术就可以实现无刷新更新当前页面的内容.实现远程脚本的通常做法包括将脚本与一个IFrame(通常设置成不可见,或者将它的width和height属性设置为0)结合,以及由
服务器返回JavaScript,然后再在浏览器中运行这个JavaScript.
下面我们来看一个使用远程脚本的例子,在clint.
html中,我们定义了一个本地函数handleResponse()(请暂时允许我们将属于本页的函数成为本地函数,与此对应的称服务器上返回的函数成为远程函数),在其内部只是先简单的alert出一段
文本.其实,这个函数我们可以写的更加复杂,更加有实际意思和有趣(可以解析服务器返回的数据,并显示在
网页中,在这里不属于我们所要讨论的重点,相关实现已经过期,如果有兴趣的话可以参考:
http://www.ashleyit.com/rs/main.htm).
[code name=远程脚本访问演示]
好了,看完了这个远程脚本,下面我们来重点介绍AJAX.
前面已经提到, AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
AJAX = 异步 JavaScript 及 XML（Asynchronous JavaScript and XML）
通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快，更友好。
AJAX 是一种独立于 Web 服务器软件的浏览器技术
我们来研究下AJAX这么好的一种技术,到底与我们平时用到的哪些技术相关呢?
AJAX 基于下列 Web 标准：JavaScript ,XML ,HTML ,CSS.
当然,要学好AJAX并不是一天两天的事情,需要我们不断的学习,利用先前的知识、自己丰富的想象能力和创造能力，我们会创建出一个更好的AJAX应用来的。
我们学习AJAX为了什么 ？
Web 应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。
通过 AJAX，因特网应用程序可以变得更完善，更友好。
AJAX 如何与服务器进行通信？
在传统的 JavaScript 编程中，假如您希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。
由于每当用户提交输入后服务器都会返回一张新的页面，传统的
web 应用程序变得运行缓慢，且越来越不友好。
通过利用 AJAX，您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。
通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。
什么是XMLHttpRequest 对象？
通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！
在 2005 年 AJAX 被 Google 推广开来（Google Suggest）。
Google 建议使用 XMLHttpRequest 对象来创建一种动态性极强的 web 界面：当您开始在 Google 的搜索框中输入查询时，JavaScript 会向某个服务器发出这些字词，然后服务器会返回一系列的搜索建议。
XMLHttpRequest 对象得到下列浏览器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
下面为大家罗列出来XMLHttpRequest接口的所有属性和方法。
复制内容到剪贴板
代码:
interface XMLHttpRequest {
// 事件处理器
attribute EventListener onreadystatechange;
// 状态
const unsigned short UNSENT = 0; //未发送状态
const unsigned short OPENED = 1; //打开到服务器的连接
const unsigned short HEADERS_RECEIVED = 2; //收到服务器返回的头部信息
const unsigned short LOADING = 3; //加载并处理服务器返回数据
const unsigned short DONE = 4; //处理完毕
readonly attribute unsigned short readyState;//此处定义一个状态变量
// 请求部分
void open(in DOMString method, in DOMString url);
void open(in DOMString method, in DOMString url, in boolean async);
void open(in DOMString method, in DOMString url, in boolean async, in DOMString user);
void open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password);
void setRequestHeader(in DOMString header, in DOMString value);
void send();
void send(in DOMString data);
void send(in Document data);
void abort();
// 响应部分
DOMString getAllResponseHeaders();
DOMString getResponseHeader(in DOMString header);
readonly attribute DOMString responseText;
readonly attribute Document responseXML;
readonly attribute unsigned short status;
readonly attribute DOMString statusText;
};下面我们来分析这个接口，相信大家对其中的一些属性和方法不是很陌生的。
{$对AJAX的属性和方法进行分析部分，待补充}
[code name="远程脚本访问演示"]
复制内容到剪贴板
代码:
<!--@description:clint.html-->
<html>
<head>
<title>远程脚本访问演示--clint.html</title>
<script type=”text/javascript”>
function handleResponse(){
alert(“This function is called by the server.html”);
}
</script>
</head>
<body>
<a href=”server.html” target=”rsFrame”>点击调用服务器端函数</a>
<iframe border=”0” width=”0” height=”0” name=”rsFrame”></iframe>
</body>
</html>
<!--@description:server.html-->
<!--@note:server.html完全可以是服务器上返回的一个JavaScript函数。注意下window.parent的用法，可以藉此发挥。-->
<html>
<head>
<title>远程脚本访问演示--server</title>
<script type=”text/javascript”>
window.parent.handleResponse();
</script>
</head>
<body>
</body>
</html>[
本帖最后由 lnight 于 2008-3-19 16:01 编辑 ]
