ajax初步学习

    最近网上提的很多的一个新概念就是 AJAX 了, 那么, AJAX 是什么呢? 以下内容引用网上资料:
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术：

Ajax（Asynchronous JavaScript + XML）的定义

    * 基于 web标准（standards-based presentation）XHTML+CSS的表示；
    * 使用 DOM（Document Object Model）进行动态显示及交互；
    * 使用 XML 和 XSLT 进行数据交换及相关操作；
    * 使用 XMLHttpRequest 进行异步数据查询、检索；
    * 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文

类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。
与传统的web应用比较

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

    关于 AJAX 提出者文档的翻译见这里: Ajax: A New Approach to Web Applications(中英对照) . 您可能想看看到底有什么很酷很炫的 Web 站点用到了 AJAX, 可以看这里: Google Suggest, Google Maps, 还有我个人做的一个小小的例子: AJAX Test.

    AJAX 是一个新出现的名词, 但是引用的这几项技术都是老的存在了很久的技术, 甚至, 最大为推崇的 XMLHttpRequest 也不是 W3C 规范的一部分, 而是浏览器很早就内置的一个 JavaScript 对象. 这里的这几个概念中, 目前所见到的最多的应用就是 异步更新页面内容这个所说的亮点了. 其他的几个概念: XHTML + CSS, DOM, XML + XSLT, 都是做 WEB 表示层用的很熟很熟的几个技术了(当然, 用 JavaScript 解析 XML 可能用的人不多).

    那么, 我就直奔主题: 怎么来用 AJAX 来解决实际的问题了. 现在依然不行, 因为关键的东西还不够. 如前所述, 异步操作的魔法就是 XMLHttpRequest 对象了, 这个对象怎样实现异步?? 那么首先让我们了解一下 XMLHttpRequest(see also The XMLHttpRequest Object).

    首先 XMLHttpRequest 对象并非一个 W3C 标准, 它只是主要浏览器都支持的可以通过 JavaScript 在客户端访问其他 URL 内容的一个对象. 所以很不幸的您创建它的时候必须根据不同的浏览器来创建它(所谓的跨平台脚本编写):

在 Mozilla, Firefox, Safari, 和 Netscape 中:
var xmlhttp=new XMLHttpRequest()

在 Internet Explorer 中:
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

那么接下来最常用到的代码就像下面这样:

<script >
if (xmlhttp)
    {
    xmlhttp.onreadystatechange=xmlhttpChange;
    xmlhttp.open("GET","http://www.somehost.com/test.htm",true);
    xmlhttp.send();
    }
}

function xmlhttpChange()
{
  // if xmlhttp shows "loaded"
  if (xmlhttp.readyState==4)
  {
  // if "OK"
  if (xmlhttp.status==200)
    {
    // ...some code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

注意: 上面例子中一个很重要的属性就是 onreadystatechange, 可以讲这个就是异步处理的关键. 这个属性是一个事件处理器, 当网络请求的每次状态改变时这个方法都被触发. 状态码从 0 (uninitialized, 未初始化) 到 4 (complete, 完成). 通过在方法 xmlhttpChange() 中我们检查状态改变, 我们可以告诉什么时候连接完成并且只在 HTTP 操作成功(返回代码为 200)的时候来进行必要的处理.

为什么我们要在例子中使用异步操作?

所有的例子中我们都使用异步(async)模式 (open() 的第三个参数设置为 true). 异步模式参数指定请求时被异步处理与否. true 表示脚本将会在 send() 方法被调用后继续执行, 不需要等待服务器的返回; false 则表示脚本必须等到服务器返回一个请求后才能继续执行, 这时候将会有问题发生, 因为如果此时有网络或者服务器故障发生, 或者请求需要花费很长时间完成, 这时候浏览器窗口将会没有任何反应(常说的界面死掉), 甚至会出现"服务器没有返回"这样的错误, 所以为了更好的用户体验, 尽量使用异步模式来设计您的代码. open() 方法的第二个参数是 URL 地址,

好了, 说了这么多, 您可能迫不及待的想运行一个真实的例子, 请试试这个例子: 在线读取 TXT 文本并且显示在当前页面 ajax1.htm, 所用到的文本文件 textfile1.txt.

源码查看页面源代码就可以得到了.

最后, 您可能希望熟悉一下 XMLHttpRequest 对象来为以后更好的利用它打下基础:
The XMLHttpRequest Object Reference XMLHttpRequest 对象参考
Methods 方法
Method 方法 Description 描述
abort() Cancels the current request
取消当前请求
getAllResponseHeaders() Returns the complete set of http headers as a string
将完整的 HTTP 头部做为一个字符串返回
getResponseHeader("headername") Returns the value of the specified http header
返回给定的 HTTP 头的值
open("method","URL",async,"uname","pswd") Specifies the method, URL, and other optional attributes of a request

The method parameter can have a value of "GET", "POST", or "PUT" (use "GET" when requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes.

The URL parameter may be either a relative or complete URL.

The async parameter specifies whether the request should be handled asynchronously or not. true means that script processing carries on after the send() method, without waiting for a response. false means that the script waits for a response before continuing script processing
指定表单提交方法, URL, 以及请求的可选属性

method 参数可以是"GET", "POST" 或者  "PUT" 这些值中之一(使用"GET"来请求数据, 特别的, 当发送的数据长度大于512字节时使用 "POST").

URL 参数可以为相对的和完整的 URL.

async 参数指定请求是否为异步方式处理. true 意味着调用 send() 方法后脚本继续向下执行, 不需要等待响应. false 意味着脚本将等待响应之后才能继续执行
send(content) Sends the request
发送请求
setRequestHeader("label","value") Adds a label/value pair to the http header to be sent
在要发送的 HTTP 头中添加 标签/取值
Properties 属性
Property 属性 Description 描述
onreadystatechange An event handler for an event that fires at every state change
每次状态改变时除非的事件处理器
readyState Returns the state of the object:

0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
返回对象的状态

0 = 未初始化
1 = 载入中
2 = 已载入
3 = 交互
4 = 完成
responseText Returns the response as a string
将响应做为字符串返回
responseXML Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties
将响应做为XML返回. 这个属性返回一个 XML 文档对象, 可以用 W3C 的 DOM 节点树方法和属性进行检索分析
status Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")
将状态做为数字返回(例如 404 为"Not Found" 或者 200 为 "OK")
statusText Returns the status as a string (e.g. "Not Found" or "OK")
将状态做为字符串返回(例如 "Not Found" 或者 "OK")
　

What's the next?

AJAX Follow Me - (2) GET 和 POST 配合表单

AJAX Follow Me - (3) 整合 XML 和 DOM

AJAX Follow Me - (4) 一个完整的实用例子