学而时习之<<初识AJAX

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成构建一种类似桌面应用程序的功能和交互性,与不断更新的 Web 应用程序之间的桥梁

在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本，,

脚本执行完成后再发送回全新的页面。

Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript

代码而不是直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟

。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用

户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程

序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全

不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。

结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。
比起普通的Web界面 Web 2.0（在很大程度上）消除了看得见的往复交互

在学习AJAX 之前先让我们看一个简单的实例 (后面有详细的解析)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>ajax实例1</title>
   <script type="text/javascript">

     //当事件发生的时候我们就开始了AJAX
     function startHTTP()
     {
       //创建对象
        createHTTP();

        //获取XML文件的数据
        xmlhttp.open("GET","XMLFile.xml",true);

        //状态变化与事件挂钩
        xmlhttp.onreadystatechange=StateDO;

        //不带任何参数
        xmlhttp.send(null);
     }

      var xmlhttp;
     function createHTTP()
     {
       //根据不同的浏览器创建XMLHttpRequest
        if(window.ActiveXObject)
        {
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest)
        {
           xmlhttp=new XMLHttpRequest();
        }
     }

id="mytext">这是旧数据</div>
<input type="button" value="更新DIV" onclick="startHTTP()" />
</body>
</html>

当事件发生的时候我们就开始了AJAX
1、JS 需要和后台交互所以我们需要一个XMLHttpRequest
XMLHttpRequest 简介
XMLHttpRequest是处理所有服务器通信的对象该对象实际上仅仅是一个跨越所有 Ajax 应用程序的公共线程通过 XMLHttpRequest 对象与服

务器进行对话的是 JavaScript 技术。这不是一般的应用程序流，这恰恰是 Ajax 的强大功能的来源
open()：建立到服务器的新请求。
send()：向服务器发送请求。
abort()：退出当前请求。
readyState：提供当前 HTML 的就绪状态。
responseText：服务器返回的请求响应文本。

2、获取所需要的数据 open()有三个参数
a、采用什么方式： get 、post
b、获取参数的地方
c、是否调用异步 ture false

3、因为本实例是异步我们需要把事件委托给后台处理
HTTP 就绪状态
HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确

定读取服务器提供的响应文本或数据是否安全。
在 Ajax 应用程序中需要了解五种就绪状态：(与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致)
0：请求没有发出（在调用 open() 之前）。
1：请求已经建立但还没有发出（调用 send() 之前）。
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
4：响应已完成，可以访问服务器响应并使用它。
HTTP 状态码
因此除了就绪状态外，还需要检查 HTTP 状态。我们期望的状态码是 200，它表示一切顺利
读取响应文本
现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后我们可以处理服务器返回的数据了。返回

的数据保存在 XMLHttpRequest 对象的 responseText 属性中。

4、参数的传递

关于安全性的一点说明
现在浏览器允许用户提高他们的安全等级，关闭 JavaScript 技术，禁用浏览器中的任何选项。在这种情况下，代码无论如何都不会工作。此

时必须适当地处理问题.

posted on 2007-09-24 12:38 执著阅读(177) 评论(0) 收藏举报