ajax初始了解

ajax初步了解

1、简介：?Ajax?是?Asynchronous?JavaScript?and?XML（以及?DHTML?等）的缩写。Ajax?由?HTML、

???????????????????JavaScript??技术、DHTML?和?DOM?组成，这一杰出的方法可以将笨拙的?Web?界面转化成交

?????????? 互性的?Ajax?应用程序。

2、Ajax?应用程序所用到的基本技术

·?HTML?用于建立?Web?表单并确定应用程序其他部分使用的字段。

·?JavaScript?代码是运行?Ajax?应用程序的核心代码，帮助改进与服务器应用程序的通信。

·?DHTML?或?Dynamic?HTML，用于动态更新表单。我们将使用?div、span?和其他动态?HTML?元素来标记?HTML。

·?文档对象模型?DOM?用于（通过?JavaScript?代码）处理?HTML?结构和（某些情况下）服务器返回的?XML。

3、XMLHttpRequest?对象→这是处理所有服务器通信的对象??

?

? 
4、ajax通信与一般web应用程序的比较
<!--EndFragment-->
????? 
?
?????????????? ajax通信????????????????????????????一般web应用程序? 
?
?????????????? ????? 
当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器JavaScript 代码捕获表单数据并向服务器发送请求?同时用户屏幕上的表单也不会闪烁、消失或延迟??
用户填写表单字段并单击?Submit?按钮
<!--EndFragment-->
整个表单发送到服务器
服务器将它转发给处理表单的脚本（通常是?PHP?或?Java，也可能是?CGI?进程或者类似的东西）<!--EndFragment-->脚本执行完成后再发送回全新的页面
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?ajax：JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是
????????? 说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使
?????????? 用应用程序。
?????????? 服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以
?????????? 迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。 
?????????? JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！
?????????? 这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完
?????????? 全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但
?????????? 是背后又拥有互联网的全部强大力量。
一般web应用程序：该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是
?????????? 具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回
?????????? 新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差
?????????? 的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。
?
?
?5、javaScript要完成的任务?? 
?
?
获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM，处理 HTML 表单服务器返回的 XML 数据的结构。
?
?6、获取request对象
?
?????????????? 几年前的那些讨厌的浏览器战争，使得XMLHttpRequest 成了这场战争的牺牲品之一。因此获
?????? 得XMLHttpRequest 对象可能需要采用不同的方法。
??????
?? 在 Microsoft 浏览器上创建 XMLHttpRequest 对象
????? 
???? ?
现在先不管那些注释掉的奇怪符号，如 @cc_on，这是特殊的 JavaScript 编译器命令，将在下一期针对 XMLHttpRequest 的文章中详细讨论。这段代码的核心分为三步：
建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。尝试在 Microsoft 浏览器中创建该对象： 尝试使用 Msxml2.XMLHTTP 对象创建它。如果失败，再尝试 Microsoft.XMLHTTP 对象。如果仍然没有建立 xmlHttp，则以非 Microsoft 的方式创建该对象。
最后，xmlHttp 应该引用一个有效的 XMLHttpRequest 对象，无论运行什么样的浏览器
?
7、?? 有了一个崭新的 XMLHttpRequest 对象，接下来就是在所有 Ajax 应用程序中基本都雷同的流程：?
从 Web 表单中获取需要的数据。建立要连接的 URL。打开到服务器的连接。设置服务器在完成后要运行的函数。发送请求。
8、实例应用
??? 
?
???????? 其中大部分代码意义都很明确。开始的代码使用基本 JavaScript 代码获取几个表单字段的值。然后设置一个 PHP 脚本作为链接的目标。要注意脚本 URL 的指定方式，city 和 state（来自表单）使用简单的 GET 参数附加在 URL 之后。
?????????? 然后打开一个连接，这是您第一次看到使用 XMLHttpRequest。其中指定了连接方法（GET）和要连接的 URL。最后一个参数如果设为 true，那么将请求一个异步连接（这就是 Ajax 的由来）。如果使用 false，那么代码发出请求后将等待服务器返回的响应。如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 方法）。
????? xmlHttp（要记住，这是 XMLHttpRequest 对象实例）的 onreadystatechange 属性可以告诉服务器在运行完成 后（可能要用五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为 updatePage() 的方法将被触发。
??????????? 最后，使用值 null 调用 send()。因为已经在请求 URL 中添加了要发送给服务器的数据（city 和 state），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。
?
9、处理响应
??? 
??? 现在要面对服务器的响应了。现在只要知道两点：
什么也不要做，直到 xmlHttp.readyState 属性的值等于 4。服务器将把响应填充到 xmlHttp.responseText 属性中。
其中的第一点，即就绪状态。第二点，使用 xmlHttp.responseText 属性获得服务器的响应。

?? ?处理服务器响应
?10、连接web表单
?????? 
?????? 一个 JavaScript 方法捕捉用户输入表单的信息并将其发送到服务器，另一个 JavaScript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依赖于调用 第一个 JavaScript 方法，它启动了整个过程。
?? 启动一个 Ajax 过程
onChange="callServer();" /></p> <p>State: <input type="text" name="state" id="state" size="25"        onChange="callServer();" /></p> <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p></form>
?????? 如果感觉这像是一段相当普通的代码，那就对了，正是如此！当用户在 city 或 state 字段中输入新的值时，callServer() 方法就被触发，于是 Ajax 开始运行了。?
?
?
?
?
?
?
?
?
?
?
?
?
<!--EndFragment-->