jQuery 中的 Ajax：
JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()
load() 方法：
load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])
$.get() (或$.post()) 方法
$.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);
$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种. 方法的返回值:XMLHttpRequest对象 $.get() 和 $.post() 方法是 jQuery 中的全局函数
get.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>get.html</title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
<input id="btu" type="button" value="基于jQuery的Ajax体验[get]" />
<hr />
<span></span>
<script type="text/javascript">
//alert("aa");
$("input").first().click(function() {
//alert("aa");
//var url = "servlet/LoadServlet?time=" + new Data().getTime();
var url="servlet/LoadServlet?time="+new Date().getTime();
//alert("aa");
var sendData = { username: "jack", gender: "male" };
//alert("aa");
var xhr = $.get(url, sendData, function(backData, textStatus) {
//window.alert(backData + ":" + textStatus);
var msg = xhr.responseText;
$("span").first().html("<b>" + msg + "</b>");
});
});
</script>
</body>
</html>
LoadServlet.java
package servlet;
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 {
System.out.println("ajaxservlet:doget");
String username = request.getParameter("username");
String gender = request.getParameter("gender");
System.out.println("用户名：" + username);
System.out.println("性别：" + gender);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("<font color='red'>"+username+"</font>");
response.getWriter().write("success");
response.getWriter().write("success");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("ajaxservlet:doget");
String username = request.getParameter("username");
String gender = request.getParameter("gender");
System.out.println("用户名：" + username);
System.out.println("性别：" + gender);
response.getWriter().write("success");
}
}
post.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load.html</title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
</head>
<body>
用户名：<input type="text" id="usernameID" /><br />
密码：<input type="password" id="passwordID"/><br />
<input type="button" value="基于jQuery的ajax请求[post]" /><br />
<hr />
<span></span>
<script type="text/javascript">
//alert("aa");
$("input").last().click(function() {
var url = "servlet/LoadServlet?time=" + new Date().getTime();
//alert("aa");
//var sendData = { username: $("input").first().val() };
var sendData = { username:$("#usernameID").val(),password:$("#passwordID").val()};
/*
var xhr = $.post(url, sendData, function() {
var jsonString = xhr.responseText;
var json = eval("(" + jsonString + ")");
$("span").first().html(json.username);
});
*/
var xhr = $.post(url, sendData, function() {
var xmlDocument=xhr.responseXML;
//alert($(xmlDocument).find("res").text());
$("span").first().html($(xmlDocument).find("res").text());
});
});
</script>
</body>
</html>LoadServlet.java
package servlet;
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 {
System.out.println("ajaxservlet:doget");
String username = request.getParameter("username");
String gender = request.getParameter("gender");
System.out.println("用户名：" + username);
System.out.println("性别：" + gender);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("<font color='red'>"+username+"</font>");
response.getWriter().write("success");
response.getWriter().write("success");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("ajaxservlet:doget");
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("用户名：" + username);
System.out.println("密 码：" + password);
String tip=null;
if("jack".equals(username)&&"123".equals(password))
{
tip="success";
}
else
{
tip="fail";
}
response.setContentType("text/xml;charset=UTF-8");
PrintWriter pw=response.getWriter();
pw.write("<root>");
pw.write("<res>");
pw.write("<tip>");
pw.write("<res>");
pw.write("<root>");
}
}
基于jQuery的Ajax操作
1)load(url/sendData/回调函数) 如果没有发送参数到服务端，load()方法默认以GET方式发达， 如果有发送参数到服务端，load()方法默认以POST方式发达，
注意，发送的参数一定要符合json格式，标志是{},[{},{}]
2)回调函数有三个方法 backData：以HTML字符串的形式服务端返回的数据 textStatus：服务端返回的信息“success/error/notmodify/timeout” *xhr：通过他，可以取得xhr.responseXML/xhr.responseText/xhr.readyState/...
返回值是jQuery对象
3)$.get(url,sendData,回调方法,回传的类型) 回调函数有二个方法 backData：以HTML字符串的形式服务端返回的数据 textStatus：服务端返回的信息“success/error/notmodify/timeout”
返回值是XMLHttpRequest对象
4)$.post(url,sendData,回调方法,回传的类型) 回调函数有二个方法 backData：以HTML字符串的形式服务端返回的数据 textStatus：服务端返回的信息“success/error/notmodify/timeout”
返回值是XMLHttpRequest对象
5)使用serialize()能将jQuery对象中的参数自动转成Json格式的字符串参数，注意要为表单元素取一个name属性 var sendData = $("#formID").serialize(); 6)使用jQuery的插件 a)将插包导入工程的WebRoot/WebContent目录下 b)写一个html或jsp页面，导入jquery核心包，导入插件相关的js和css文件 c)在页面加载时触发事件$(document).ready(function)({....}
