天马行空

There Can Be Miracles WHEN YOU BELIEVE

统计

最新评论

我的第一个Ajax例程

一、Ajax并不是像Java或Dot Net一样是一项具体的新的技术，它是以下几种技术的综合应用：
1.       JavaScript:我们一期学的那些JavaScript还不足以应付Ajax的应用。所以应该多找一些JavaScript的高级教程来看看。
2.       Dom：二年学的如果理解得好的话，够用了
3.       Css：如果向界面好看滴话，这个相当重要！
4.       XMLHttpRequest对象：相当于一个新的类。熟悉api的话很简单的。
5.       XML：和王老师讲的一样，既可以做数据存储，又可以做数据传输用。（我一般都是用作数据传输）

二、应用Ajax程序的执行流程
        通常的情况：在我们编写基于MVC模式的程序时，过程往往是：客户端输入信息，提交一个表单到控制器，控制器执行相应的操作，把结果写到响应里，返回给客户端。
在完成这一整套流程之前，用户是不能进行其他操作的。用户必须等待服务器正确地返回了响应之后，才能进行别的操作。
        而使用Ajax设计的情况是：客户端输入信息，在后台通过javascript异步的把请求提交到控制器。在控制器处理这个请求时，客户端依然可以执行其他的操作。并不需要等待上一次的请求得到响应。
        那么为什么可以异步的提交请求呢？这就是XMLHttpRequest这个对象所提供的功能。Ajax的核心对象。（XHR对象早在1999年就随着IE出现了，从这一点就可以看出，Ajax不是什么了不起的东西）。下面我们来看看这个神奇的东东。

三、XMLHttpRequest！！！
这三个感叹号不是随便打的，用红色显示也不是一时兴起。原因只有一个：XMLHttpRequest（简写成：XHR）是整个Ajax技术的最核心的一个对象。客户端与服务器的交互都是通过这个对象来进行的。不过不要因此觉得他很难。他和我们学过的千千万万个类一样。我们只要熟悉他的API，就可以灵活的运用它了。

众所周知，类是由属性和方法组成的。下边就是XHR的属性：
readystate:请求的状态
0：未初始化
1：正在加载
2：加载完成
3：正在交互（发送请求成功，正在接收响应数据）
4：结束（数据已经成功接收）

status：Http状态码

statusText：Http状态码所对应的文字
常见的状态码和文字：
200：成功
202：接受成功，但处理未完成
400：错误的请求
404：未找到请求的文件
500：服务器内部错误

responseXML：响应的内容，表现为XML格式
Web程序是基于请求-响应模式的，响应是由服务器发送给客户端的一些数据，这个属性中存储了响应的数据

onreadystatechange：事件
当XHR的状态改变时触发的事件。最常用的情况是：当我们向服务器发送了某个请求，服务器正确响应后。我们可以设置一个函数来处理这次响应。
以上是XHR最常用的几个属性。一会再例子里还会见到他们。下边是常用方法：

open(method,url,asyschronous,user,password);
这是open方法，调用这个方法後，readystate会从0变为1；
如果仔细看这个方法的参数列表的话，可能会发现一个问题：参数缺少数据类型。如果你够聪明的话，一定会想到，这是一个在javascript中执行的方法。js的变量是不区分数据类型的。

method ：请求的类型，get或post

url ：请求的地址，可以是相对路径或绝对路径。可以写成：test.jsp?user=dodo&pass=123456这种类型的带查询字符串的格式。

asyschronous ：是否异步调用。true为异步，false为同步。
user，password：如果路径是需要用户名和密码的加密路径，在这两个参数中提供。一般来说没什么用。
---------------------------------------------------------------------------------------------------------
send(databody);
向服务器发送数据
databody：要发送的数据
如果不需要发送数据的话直接写：null
abort();
取消当前请求
以上就是XHR常用的属性和方法了。大家可以记记个大概。在例子中我会继续提到他们的。

四、例子的说明
这是一个很小的例子。只是说明了Ajax程序的工作流程。我们要做的是把xml中的内容显示在网页上。

首先，和java一样，要使用对象，就要先实例化它。
在这，我们使用javascript语言来实现。

function createXHR(){
  if(window.ActiveXObject){
    XHR = new ActiveXObject("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest){
    XHR = new XMLHttpRequest();
  }
}

       window.ActiveXObject用来检测当前页面是不是支持ActiveX技术，如果支持的话那么客户端就是IE。
       window.XMLHttpRequest用来检测浏览器能不能直接创建XHR对象。如果能的话，就直接new出来。
这么做的原因是：虽然web遵循的是同一套接口和标准，但是生产浏览器的厂家实现的方式却不一样。比如IE和FireFox等。
在IE中XHR是通过ActiveX控件的形式提供的。而其他浏览器则罢XHR作为了内置对象来实现。因此在不同的浏览器中，实例化XHR的方式也不一样。

现在我们得到了一个XHR对象。那么他现在的readystate是为0的。下面，我们来调用它的open方法。

       XHR.open("get","someURL",true);

调用open方法的后，readystate会变成1。向服务器发送请求的准备工作都做好了

XHR.send(null);

调用send方法，发送请求。

发送请求后，就等着服务器传回响应了。那么我们怎么知道服务器有没有响应呢？

//处理响应的函数
function handleChange(){
  //当Http状态为200并且readystate为4时，才正确的返回了响应。
  if(XHR.readystate==4){
    if(XHR.status==200){
      //获取XHR返回的XML格式的响应信息
      xmldoc = XHR.responseXML;

      //解析XML文档取得用户名和密码
      var un = xmldoc.getElementsByTagName("name")[0].text;
      var pass = xmldoc.getElementsByTagName("pass")[0].text;

      //验证用户名和密码
      if(document.getElementById("username").value == un){
        if(document.getElementById("password").value == pass){
          //用innerHTML属性来实现无状态刷新
          document.body.innerHTML = "验证成功！";
        }
      }
    }
  }
}

请注意一开始的两个if判断。通过这两个判断的组合，我们就能确定服务器已经正确的响应了我们的请求了。
然后就可以开始处理响应信息。

到这里，整个Ajax请求和获取效应的流程就结束了。至于如何处理响应信息就要看实际情况了。

posted on 2007-12-02 02:49 Fenris 阅读(647) 评论(0)  编辑  收藏 所属分类: 有关前台


只有注册用户登录后才能发表评论。
网站导航: