jQuery的ajax实现

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

login.jsp 代码

 

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

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

js 代码

 

1. var userName;  
2. var password;  
3. var result;  
4.   
5.   
6. $(document).ready(function(){  
7.     $("#load").hide();  
8.     $("#success").hide();  
9.     $("#error").hide();  
10. });  
11.   
12. $(document).ready(function(){  
13.     $("#button").click(function(){  
14.         $("#error").hide();  
15.         $("#load").show("slow");  
16.         userName = $("#userName").val();  
17.         password = $("#password").val();  
18.         $.ajax({type: "post",  
19.             url: "login.jsp",  
20.             dataType: "html",  
21.             data: "userName="+userName+"&password="+password,  
22.             success: function(result){  
23.                         var res = String($.trim(result));  
24.                         if(res=="OK"){  
25.                             $("#myTable").hide("slow");  
26.                             $("#success").show("slow");  
27.                         }else if(res=="error"){  
28.                         $("#error").show("slow");  
29.                         $("#load").hide("slow");  
30.                         }else{  
31.                             alert("返回异常");}  
32.                         }  
33.             });  
34.           
35.     });  
36.   
37. });  

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

login.xml 代码

 

1. xml version="1.0" encoding="UTF-8" ?>  
2. <root>  
3.     <status>  
4.         <flag>001flag>  
5.         <reason>登录成功  
6.         reason>  
7.         <status_temp>  
8.             import javax.servlet.http.HttpServletRequest;import  
9.             javax.servlet.http.HttpServletResponse;import  
10.             org.apache.struts.action.ActionForm;import  
11.             org.apache.struts.action.ActionForward;import  
12.             org.apache.struts.action.ActionMapping;  
13.         status_temp>  
14.     status>  
15.     <data>  
16.         <count>0count>  
17.     data>  
18. root>  

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

js 代码

 

1. var userName;  
2. var password;  
3. var result;  
4.   
5.   
6. $(document).ready(function(){  
7.     $("#load").hide();  
8.     $("#success").hide();  
9.     $("#error").hide();  
10. });  
11.   
12.   
13. $(document).ready(function(){  
14.     $("#button").click(function(){  
15.         $("#error").hide();  
16.         $("#load").show("slow");  
17.         UserName = $("#userName").val();  
18.         PassWord = $("#password").val();  
19.         $.ajax({  
20.             type: "post",  
21.             url: "login.xml",  
22.             dataType: "xml", 
    
23.             data: "yhdh="+UserName+"&password="+PassWord,
    
24.             success: function(result){  
25.                 var statusObject = $("status",result);  
26.                 var flagObject= $("flag",status);  
27.                 var temp = flagObject.text();  
28.                 var flagText= $.trim(temp );  
29.                 if(flagText=="001"){  
30.                     $("#myTable").hide("slow");  
31.                     $("#success").show("slow");  
32.                 }else if(flagText=="100"){  
33.                     $("#error").show("slow");  
34.                     $("#load").hide("slow");  
35.                 }else{  
36.                     alert("请求异常");  
37.                 }  
38.               
39.             }  
40.               
41.         });  
42.     });  
43.   
44. });  

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

js 代码

 

1. var userName;  
2. var password;  
3. var result;  
4.   
5.   
6. $(document).ready(function(){  
7.     $("#load").hide();  
8.     $("#success").hide();  
9.     $("#error").hide();  
10. });  
11.   
12.   
13. $(document).ready(function(){  
14.     $("#button").click(function(){  
15.         $("#error").hide();  
16.         $("#load").show("slow");  
17.         UserName = $("#userName").val();  
18.         PassWord = $("#password").val();  
19.         $.ajax({  
20.             type: "post",  
21.             url: "login.xml",  
22.             dataType: "xml",
    
23.             data: "yhdh="+UserName+"&password="+PassWord,
24.             success: function(result){  
25.                 var yourStatus = result.getElementsByTagName("flag")[0].firstChild.nodeValue;  
26.                 if(yourStatus=="001"){  
27.                     $("#myTable").hide("slow");  
28.                     $("#success").show("slow");  
29.                 }else if(yourStatus=="100"){  
30.                     $("#error").show("slow");  
31.                     $("#load").hide("slow");  
32.                 }else{  
33.                     alert("请求异常");  
34.                 }  
35.               
36.             }  
37.               
38.         });  
39.     });  
40.   
41. });