jQuery的ajax实现

         XMLHTTPRequest主要有两种服务器返回响应消息的格式responseText和responseXML，下面分别针对这两种返回方式使用jQuery实现ajax异步响应。我们以最简单的用户登录来举例。
          第一种responseText格式：
         

login.jsp 代码

<%@ page language="java" pageEncoding="gb2312"%>
<%
String userName = request.getParameter("userName");
String password = request.getParameter("password");
if(password.equals("longleg")&&userName.equals("thy")){
    out.print("OK");
}else{out.print("error");}
%>

         
          上面的代码省略了数据库的调用，这里主要是要体现前台的调用。login.jsp返回的类型为text形式，正确时是“OK”，错误时是
“error”。

js 代码

var userName;
var password;
var result;


$(document).ready(function(){
    $("#load").hide();
    $("#success").hide();
    $("#error").hide();
});

$(document).ready(function(){
    $("#button").click(function(){
        $("#error").hide();
        $("#load").show("slow");
        userName = $("#userName").val();
        password = $("#password").val();
        $.ajax({type: "post",
            url: "login.jsp",
            dataType: "html",
            data: "userName="+userName+"&password="+password,
            success: function(result){
                        var res = String($.trim(result));
                        if(res=="OK"){
                            $("#myTable").hide("slow");
                            $("#success").show("slow");
                        }else if(res=="error"){
                        $("#error").show("slow");
                        $("#load").hide("slow");
                        }else{
                            alert("返回异常");}
                        }
            });

    });

});

         第二种responseXML格式：
        在实际应用中返回的xml都是用servlet生成的，这里直接访问了已存在的xml。

login.xml 代码

xml version="1.0" encoding="UTF-8" ?>
<root>
    <status>
        <flag>001<!---->flag>
        <reason>登录成功
        <!---->reason>
        <status_temp>
            import javax.servlet.http.HttpServletRequest;import
            javax.servlet.http.HttpServletResponse;import
            org.apache.struts.action.ActionForm;import
            org.apache.struts.action.ActionForward;import
            org.apache.struts.action.ActionMapping;
        <!---->status_temp>
    <!---->status>
    <data>
        <count>0<!---->count>
    <!---->data>
<!---->root>

响应是否成功主要是读取flag标签中的文本100为未成功，001为成功。

js 代码

var userName;
var password;
var result;


$(document).ready(function(){
    $("#load").hide();
    $("#success").hide();
    $("#error").hide();
});


$(document).ready(function(){
    $("#button").click(function(){
        $("#error").hide();
        $("#load").show("slow");
        UserName = $("#userName").val();
        PassWord = $("#password").val();
        $.ajax({
            type: "post",
            url: "login.xml",
            dataType: "xml",
            data: "yhdh="+UserName+"&password="+PassWord,
            success: function(result){
                var statusObject = $("status",result);
                var flagObject= $("flag",status);
                var temp = flagObject.text();
                var flagText= $.trim(temp );
                if(flagText=="001"){
                    $("#myTable").hide("slow");
                    $("#success").show("slow");
                }else if(flagText=="100"){
                    $("#error").show("slow");
                    $("#load").hide("slow");
                }else{
                    alert("请求异常");
                }

            }

        });
    });

});

上面对于xml解析使用的是jQuery的遍历对应匹配，在里面也可以使用常用的dom解析方式：

js 代码

var userName;
var password;
var result;


$(document).ready(function(){
    $("#load").hide();
    $("#success").hide();
    $("#error").hide();
});


$(document).ready(function(){
    $("#button").click(function(){
        $("#error").hide();
        $("#load").show("slow");
        UserName = $("#userName").val();
        PassWord = $("#password").val();
        $.ajax({
            type: "post",
            url: "login.xml",
            dataType: "xml",
            data: "yhdh="+UserName+"&password="+PassWord,
            success: function(result){
                var yourStatus = result.getElementsByTagName("flag")[0].firstChild.nodeValue;
                if(yourStatus=="001"){
                    $("#myTable").hide("slow");
                    $("#success").show("slow");
                }else if(yourStatus=="100"){
                    $("#error").show("slow");
                    $("#load").hide("slow");
                }else{
                    alert("请求异常");
                }

            }

        });
    });

});