AJAX学习手记

下午一直在看jQuery，其中有一部分是对ajax的封装。其实以前也有用过阿贾克斯，只是说都是临时要用采取网上找代码的。但是一直以来都觉得 蛮简单的，所以也没有在意。下午看得时候，发现其实我对AJAX不是很了解，只是印象中有那么个东西，所以下午刚好有空，就顺带看了一下具体内容。下午看 得主要资料还是w3school网站上的教程（http://www.w3school.com.cn/ajax/index.asp），发现我现在越来 越喜欢这个网站了，其实他对内容的整理，条理还是很清晰的，而且例子也做得很好。

***********************************************************************************************************************************************

1、ajax简介

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。
AJAX 是一种在 2005 年由 Google 推广开来的编程模式。他不是一种新的编程语言，而是一种使用现有标准的新方法。通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序。
AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。
通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好。AJAX 是一种独立于 Web 服务器软件的浏览器技术。

AJAX 基于下列 Web 标准：JavaScript XML HTML CSS。在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。

2、ajax基本对象

AJAX 使用 Http 请求

在传统的 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。

3、ajax应用过程

1） AJAX 的要点是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
如需针对不同的浏览器来创建此对象，我们要使用一条 "try and catch" 语句。您可以在我们的 JavaScript 教程中阅读更多有关 try 和 catch 语句 的内容。

一下是创建XMLHttpRequest的代码：

2） XMLHttpRequest 对象的知识

在向服务器发送数据之前，我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。

onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
这是 readyState 属性可能的值：

0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：

responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

向服务器发送一个请求
要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。
open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。
send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录，那么代码是这样的：

4、例子

页面

表单的 HTML 代码：

howHint() 函数是一个位于 HTML 页面 head 部分的很简单的 JavaScript 函数。