ajax练习题 _Ajax

ajax练习
<%@ page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>ajax测试</title>
  </head>
<body>
<input id="btn" type="button" value="测试"/>
<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form>
<div id="msg"></div>
<script type="text/javascript" language="javascript" src="../js/jquery.js"></script>
<script language="javascript">
	
	var SC_FORBIDDEN = 403;

	$(document).ready(function(){
		$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );
		$("#btn").bind("click",function(){
			sendMsg();
		});
	});
	
	$("#msg").ajaxStart(function(){
	   $(this).append("<li>请求开始时</li>");
	});
	
	$("#msg").ajaxSend(function(evt, request, settings){
	  	 $(this).append("<li>开始请求: " + settings.url + "</li>");
	});	
	
	$("#msg").ajaxStop(function(){
	   $(this).append("<li>请求结束时</li>");
	});
	
	$("#msg").ajaxComplete(function(event,request, settings){
  		 $(this).append("<li>请求完成.</li>");
 	});
 	
 	$("#msg").ajaxError(function(event,request, settings){
     	 $(this).append("<li>出错页面:" + settings.url + "</li>");
     	 if (SC_FORBIDDEN==request.status){
     	 	alert ("请先登录");
     	 }
	});
	
	$("#msg").ajaxSuccess(function(evt, request, settings){
	     $(this).append("<li>请求成功!</li>");
	});
	
	function sendMsg(){
		$.ajax({
		   async: true,
		   type: "POST",
		   url: "ajax.jspx",
		   //timeout: 20,
		   username: "samkee",
		   password: "samkee",
		   data: $("form").serialize()+"&op=ajax",
		   dataFilter: function(data,text){alert ("hello");return data;},
		   dataType: "text",
		});
	}
</script>
</body>
</html>