什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
使用 AJAX 请求来改变 div 元素的文本:
定义和用法
load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。
语法
load(url,data,function(response,status,xhr))
参数 | 描述 |
---|---|
url | 规定要将请求发送到哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function(response,status,xhr) | 可选。规定当请求完成时运行的函数。 额外的参数:
|
详细说明
该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单:
Index.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AjaxDemo</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$("#number").blur(function() {
var number = $("#number").val();
$("#myDiv").load("server.jsp", "number=" + number);
});
});
</script>
</head>
<body>
<h3>验证数字是否为0~10之间?</h3>
<input type="text" id="number" />
<div id="myDiv" style="color: red; display: inline;"></div>
</body>
</html>
server.jsp:
<%
int num = Integer.parseInt(request.getParameter("number"));
if (num >= 0 && num < 10) {
out.print("Yes");
} else {
out.print("No");
}
%>
测试: