jquery与ajax

Allen_Oscar

浏览: 24245 次
性别:
来自: 北京

最近访客更多访客>>

mhx1535

robinjim

defineconst

Joe192

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jquery与AJAX

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：

$.ajax({

type : "GET",

contentType: "application/x-www-form-urlencoded; charset=utf-8",

url : "ServiceServlet",

data : "username="+username+"&password="+password,

dataType : "xml",

success : callback,

error:callbackErr

});

下面是jQuery官方给出的完整的Ajax事件列表：

·ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

· beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)

· ajaxSend (Global Event)
This global event is also triggered before the request is run.

· success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data).

· ajaxSuccess (Global Event)
This event is also only called if the request was successful.

· error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).

· ajaxError (Global Event)
This global event behaves the same as the local error event.

· complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.

· ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

·ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.

具体的全局事件请参考API文档。

完整代码示例：前段

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript"  src="jquery-1.8.3.js"></script>
	<script>
	
    function doConfig(){
	   
	 //  var username = document.getElementById("username").value;
	 //  var password = document.getElementById("password").value;
	   var username = $("#username").val();
	   var password = $("#password").val();
	   $.ajax({
		        type : "GET",
		        contentType: "application/x-www-form-urlencoded; charset=utf-8",
		        url : "ServiceServlet",
		        data : "username="+username+"&password="+password,
		        dataType : "xml",
		        success : callback,
		        error:callbackErr
		    }); 
	   
	   }
	   function callback(data){
	  
	    var  name ="";
	     $(data).find('service').each(function(i){
	        name=$(this).find('info').text();
	      });
 		  alert(name);
	   }
	  function callbackErr(data){
	   
	   alert("error");
	   }
	</script>
	
	
  </head>
  
  <body>
    <table>
         <tr>
            <td>用户名：</td>
            <td><input id="username" /></td>
         </tr>
         <tr>
            <td>密码：</td>
            <td><input id="password" /></td>
         </tr>
         <tr>
            <td></td>
            <td><input type="submit" onclick="doConfig()" /></td>
         </tr>
    </table>
  </body>
</html>

后台代码：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class ServiceServlet extends HttpServlet {

 
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		 doPost(request,response);
	}
 
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		   String username = request.getParameter("username");
		   String password = request.getParameter("password");
		   
		   System.out.println("用户名："+username+"密码："+password);
		   response.setContentType("text/xml");
		   response.setCharacterEncoding("utf-8");
		   response.getWriter().write("<?xml version=\"1.0\" encoding=\"utf-8\"?><service><info>success</info></service>");
		   
	}

	 
	public void init() throws ServletException {
	}

}

分享到：