ajax初探

老丁 — Tue, 02 Dec 2008 12:20:00 GMT

最近研究了下ajax，贴出来分享下

AJAX (异步 javascript 和 XML) 是个新产生的术语，专为描述javascript的两项强大性能，这两项强大性能是：
1.无需重新装载整个页面便能向服务器发送请求.
　　2.对XML文档的解析和处理．

发送HTTP请求：

首先创造一个类实例

    try{
                     request  =   new  XMLHttpRequest();
                   }catch(trymicrosoft) {
                      try{
                           request = new  ActiveXObject("Msxml2.XMLHTTP");
                     }catch(othermicrosoft){
                        try{
                             request  =   new  ActiveXObject("Microsoft.XMLHTTP");
                           }catch  (failed) {
                             request  =   false ;
                           }
                     }
                   }

得到响应后就用这句：
request.onreadystatechange = loginCallBack;

这里指出要用那个JS函执行，这里是loginCallBack函数，这里的函数无需括号也无需参数。

在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：

request.open("get",url,true);
request.send(null);

open()的第一个参数是HTTP请求方式 - GET，POST，HEAD 或任何服务器所支持的您想调用的方式。这个参数最好大写，某些浏览器(如Firefox)可能无法处理请求。
　　第二个参数是请求页面的URL.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用出错。
　　第三个参数设置请求是否为异步模式。如果是TRUE, javascript函数将继续执行，而不等待服务器响应。
如果第一个参数是post，send方法可以传递参数格式跟我们WEB开发是浏览器地址一回事，多个可以用&连接：？？=？？&？？=？？（用问号表示下）。

function  loginCallBack(){
                if(request.readyState  ==   4 )
                    if  (request.status  ==   200 ){
                          var  mess  =  request.responseText;
                    }
           }

这里首先函数检查请求的状态，如果是4，就意味着一个完整的服务器响应已经收到了，可以处理该响应。

　readyState的值如下:
　　0 (未初始化)
　　1 (正在装载)
　　2 (装载完毕)
　　3 (交互中)
　　4 (完成)

然后，函数会检查HTTP服务器响应的状态值，是200表示状态完整。
当这两个当满足后就可以处理数据了，取得数据的方式有两种：

request.responseText
request.responseXML

第一种是以文本字符串的方式返回服务器的响应；
第二种是以XMLDocument对象方式返回响应。

下面来看例子：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
  <head>
    <title>My JSP 'index.jsp' starting pagetitle>
  head>

  <body>
    <script type="text/javascript" language="javascript">
function gotoSubmit(){
            getRequest();//获得请求
                if(!request){
                    alert("该浏览器不支持XMLHttpRequest!");
                    return false;
                }
                request.onreadystatechange = loginCallBack;
                var url = "index.jsp";
                 request.open("post",url,false);
                 //request.open("get",url,true);
                 request.send(null);
        }

        function getRequest(){
                try{
                     request  =   new  XMLHttpRequest();
                   }catch(trymicrosoft) {
                      try{
                           request = new  ActiveXObject("Msxml2.XMLHTTP");
                     }catch(othermicrosoft){
                        try{
                             request  =   new  ActiveXObject("Microsoft.XMLHTTP");
                           }catch  (failed) {
                             request  =   false ;
                           }
                     }
                   }
            }
            function  loginCallBack(){
                if(request.readyState  ==   4 )
                    if  (request.status  ==   200 ){
                          var  mess  =  request.responseText;
                    }
           }

script>
<span
    style="cursor: pointer; text-decoration: underline"
    onclick="gotoSubmit()">
        gotoSubmit
span>

  body>
html>

跑起工程后在这个页面上点击gotoSubmit，会弹出index.jsp页面的所有内容。

来看看处理xml文件，处理的xml文件如下：

xml version="1.0" ?>
<name>
laoding
name>

上面代码要改的地方有两个，第一把url换成这个xml文件的路径，第二个地方是弹出信息的地方：
var mess=request.responseText;
alert(mess);
把这两句换成：

var xmldoc = request.responseXML;
var root_node = xmldoc.getElementsByTagName('name').item(0);
alert(root_node.firstChild.data);

再执行程序就会看到效果了，好了，到此结束了，眼睛痛回去休息。

老丁 2008-12-02 20:20 发表评论

BlogJava-laoding-文章分类-ajax

ajax初探