ajax

1、原始 ajax 类型：

 1 /*
 2      method:
 3              请求方式，值为get或者post
 4      url：请求地址
 5      data:没有值需要传入null
 6          有请求数据则传入字符串数据，格式为"a=1&b=2";
 7      deal200:
 8              接受一个带有一个形参的js函数对象，形参接收的实参是ajax引擎对象
 9      deal404：接受一个js函数对象
10      deal500：接受一个js函数对象
11  */
12     function myAjax(method,url,data,deal200,deal404,deal500,async){        
13         //创建ajax引擎对象
14             var ajax=getAjax();
15             //复写onreadystatechange函数
16             ajax.onreadystatechange=function(){
17                 //判断Ajax状态吗
18                 if(ajax.readyState==4){
19                     //判断响应状态吗
20                     if(ajax.status==200){
21                         if(deal200){
22                             deal200(ajax);
23                         }
24                     }else if(ajax.status==404){
25                         if(deal404){
26                             deal404();
27                         }                        
28                     }else if(ajax.status==500){
29                         if(deal500){
30                             deal500();
31                         }
32                     }
33                 }
34             }
35         //发送请求
36         if("get"==method){
37             ajax.open("get",url+(data==null?"":"?"+data),async);
38             ajax.send(null);
39         }else if("post"==method){
40             ajax.open("post",url,async);
41             ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
42             ajax.send(data);
43         }
44         
45     }    
46 /* --------------------------------------------------------------------------- */
47 function getAjax(){
48     var ajax;
49     if(window.XMLHttpRequest){//火狐
50         ajax=new XMLHttpRequest();
51     }else if(window.ActiveXObject){//ie
52         ajax=new ActiveXObject("Msxml2.XMLHTTP");
53     }
54     
55     return ajax;
56 }

2、Jqery 的 ajax：

 1 $.ajax({
 2     url : "user.action",
 3     type : "post",
 4     dataType : "json",
 5     data : {
 6             　　cmd : "login",
 7                 username : uname,
 8                 password : pword,
 9                 verifycode : vcode
10                     },
11     success : function(data){
12               if(data.msgId == 1){
13                      //跳转到主页
14                      window.location.href = "index.jsp";
15               }else if(data.msgId == 2){
16                      $("#passwordlabel").text(data.msgContent)
17               }else if(data.msgId == 3){
18                       $("#verifycodelabel").text(data.msgContent)
19               }
20      }
21 })

3、ajaxForm：

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9 <head>
10 <base href="<%=basePath%>">
11 <title>My JSP 'testajaxform.jsp' starting page</title>
12 </head>
13 <body>
14     <form id="myForm" action="ajaxform" method="post">
15         Name: <input id="uname" type="text" name="name" /> 
16         Comment:<textarea name="comment"></textarea>
17         <input type="submit" value="Submit Comment" />
18     </form>
19     
20     <script src="js/jquery.min.js"></script>
21     <script src="js/jquery.form.js"></script>
22 
23     <script type="text/javascript">
24         $(function(){
25             //ajaxForm中的函数就是success
26             $("#myForm").ajaxForm({
27                 beforeSubmit:function(){
28                     return true;
29                 },
30                 clearForm : true,
31                 dataType:"json",
32                 success:function(){
33                     
34                 }
35             })
36         })
37     </script>
38     
39 </body>
40 </html>