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 中的全局函数
方法的返回值: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");
}
}
<!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>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格式，标志是{},[{},{}]
backData：以HTML字符串的形式服务端返回的数据
textStatus：服务端返回的信息“success/error/notmodify/timeout”
*xhr：通过他，可以取得xhr.responseXML/xhr.responseText/xhr.readyState/...
返回值是jQuery对象
回调函数有二个方法
backData：以HTML字符串的形式服务端返回的数据
textStatus：服务端返回的信息“success/error/notmodify/timeout”
返回值是XMLHttpRequest对象
回调函数有二个方法
backData：以HTML字符串的形式服务端返回的数据
textStatus：服务端返回的信息“success/error/notmodify/timeout”
返回值是XMLHttpRequest对象
var sendData = $("#formID").serialize();
6)使用jQuery的插件
a)将插包导入工程的WebRoot/WebContent目录下
b)写一个html或jsp页面，导入jquery核心包，导入插件相关的js和css文件
c)在页面加载时触发事件$(document).ready(function)({....}
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
