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>