jQuery中Ajax相干方法 _Ajax

jQuery中Ajax相关方法

Ajax相关方法，两个工具方法（serialize(),serializeArray()）

<body>
		<form id="test">
			用户名：
			<input id="user" name="user" type="text" />
			<br />
			个人介绍：
			<textarea id="desc" name="desc"></textarea>
			<br />
			喜欢的图书：
			<select id="book" name="book">
				<option value="java">
					Java
				</option>
				<option value="javaee">
					Java EE
				</option>
				<option value="ajax">
					Ajax
				</option>
			</select>
		</form>
		<button id="bn1">
			查询字符串
		</button>
		<button id="bn2">
			查询JSON对象
		</button>
		<hr />
		<span id="show"></span>
		<script type="text/javascript">
			//为id为bn1的按钮绑定事件处理函数
			$("#bn1").click(function() {
				//将id为test1的表单转换为查询字符串
					$("#show").html($("#test").serialize());
				});
			//为id为bn2的按钮绑定事件处理函数
			$("#bn2").click(function() {
				//将所有输入元素转换为数组
					var arr = $(":input").serializeArray();
					$("#show").empty();
					//遍历arr数组
					for ( var index in arr) {
						$("#show").append(
								"第" + index + "表单控件名为：" + arr[index].name + ",值为："
										+ arr[index].value + "<br />");
					}
				});
		</script>
	</body>

?Ajax相关方法,load()方法的使用

<body>
	<center>
		<h3>使用load来发送Ajax请求很简便，开发者不需要考虑XMLHttpRequest的细节，</h3>
		<h3>要是开发者想要管理Ajax请求的细节，则可以考虑jQuery.ajax(options)的方法</h3>
	</center>
		<h3>
			请输入你的信息：
		</h3>
		<form id="user">
			用户名:
			<input type="text" name="user" />
			<br />
			喜欢的图书:
			<select multiple="multiple" name="books">
				<option value="java">
					Java
				</option>
				<option value="javaee">
					Java EE
				</option>
				<option value="ajax">
					Ajax
				</option>
				<option value="xml">
					XML
				</option>
			</select>
			<br />
			<input id="load" type="button" value="Load" />
		</form>
		<hr />
		<div id="show"></div>
		<script type="text/javascript">
			//为id为load的按钮绑定事件处理函数
			$("#load").click(function() {
				//向pro.jsp发送Ajax请求，并自动加载服务器响应
					$("#show").load("LoadServlet", $("#user").serializeArray());
				});
		</script>
	</body>

?Ajax相关方法,使用get/post方法请求（下面是script.jsp代码）

<body>
		<h3>
			请输入你的信息：
		</h3>
		<form id="user">
			用户名:
			<input type="text" name="user" />
			<br />
			喜欢的图书:
			<select multiple="multiple" name="books">
				<option value="java">
					Java
				</option>
				<option value="javaee">
					Java EE
				</option>
				<option value="ajax">
					Ajax
				</option>
				<option value="xml">
					XML
				</option>
			</select>
			<br />
			<input id="load" type="button" value="发送异步GET请求" />
		</form>
		<hr />
		<div id="show"></div>
		<script type="text/javascript">
			//为id为load的按钮绑定事件处理函数
			$("#load").click(function() {
					//指定向pro.jsp发送请求，以id为user表单里各表单空间作为请求参数
					$.get("LoadServlet", $("#user").serializeArray(),
					//指定回调函数
							function(data, statusText) {
								$("#show").empty();
								$("#show").append("服务器响应状态为：" + statusText + "<br />");
								$("#show").append(data);
							},
							//指定服务器响应为html
							"html");
				});
		</script>
	</body>

?使用jQuery的getScript方法

<body>
		<ul style="display: none">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<input id="get" type="button" value="getScript" />
		<div id="show"></div>
		
		<script type="text/javascript">
			//为id为get的按钮绑定事件处理函数
			$("#get").click(function() {
				$.getScript("script.jsp");
			});
		</script>
	</body>

<!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>
		<title>使用jQuery的getScript方法</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
	</head>
	<body>
		<ul style="display: none">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<input id="get" type="button" value="getScript" />
		<div id="show"></div>
		
		<script type="text/javascript">
			//为id为get的按钮绑定事件处理函数
			$("#get").click(function() {
				$.getScript("script.jsp");
			});
		</script>
	</body>
</html>

上面所有的请求都是LoadServlet

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 LoadServlet 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 {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		String user = request.getParameter("user");
		String[] books = request.getParameterValues("books");
		
		out.println(user + ",你好，现在时间是：" + new java.util.Date());
		out.println("<br>你喜欢的图书如下：");
		out.println("<ol>");
		for (int i = 0; i < books.length; i++) {
			out.println("<li>" + books[i] + "</li>");
		}
		out.println("</ol>");
	}

}