JQuery中的Ajax
jQuery 对 Ajax 操作进行了封装,
在 jQuery 中最底层的方法是 $.ajax(),
第二层是 load(), $.get() 和 $.post(), （常用）
第三层是 $.getScript() 和 $.getJSON()
更详尽的介绍请参见API
什么是回调函数：
这里先引用知乎网友对回调的生动形容，后续概念不再赘述回调函数概念
你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，
过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。
在这个例子里，你的电话号码就叫回调函数，
你把电话留给店员就叫登记回调函数，
店里后来有货了叫做触发了回调关联的事件，
店员给你打电话叫做调用回调函数，
你到店里去取货叫做响应回调事件。
链接：https://www.zhihu.com/question/19801131/answer/13005983
相对正式专业的回答参见：http://www.jb51.net/article/54750.htm
load()方法
load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中.
它的结构是: load(url[, data][,callback])
程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
testload.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ‘index.jsp‘ starting page</title>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//使用load方法处理ajax
var url=this.href;
var args={"time":new Date()};
$("#content").load(url,args);
return false;
});
});
</script>
</head>
<body>
<a href="helloAjax.txt">hello ajax</a>
<div id="content"></div>
</body>
</html>
任何一个HTML结点都可以使用load()方法来加载ajax，结点直接插入到html中
$.get() 和 $.post()方法
$.get() 方法使用 GET 方式来进行异步请求.
它的结构是: $.get(url[, data][, callback][, type]);
$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;
textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
$.get() 和 $.post() 方法时 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
两个方法类同，不再赘述
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ‘index.jsp‘ starting page</title>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
$.get(url,args,function(data){
var name=$(data).find("name").text();
var email=$(data).find("email").text();
var website=$(data).find("website").text();
$("#details").empty()
.append("<h2><a href=‘mailto:"+email+"‘>"+name+"</a></h2>")
.append("<a href=‘"+website+"‘>"+website+"</a>");
});
return false;
});
})
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="files/andy.xml">Andy</a></li>
<li><a href="files/richard.xml">Richard</a></li>
<li><a href="files/jeremy.xml">Jeremy</a></li>
</ul>
<div id="details"></div>
</body>
</html>
//其中的function是回调函数，当响应结束时，回调函数被触发，响应结果在data中
testgetJSON 测试JSON数据格式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ‘index.jsp‘ starting page</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
//url:ajax请求的目标url
//args:传递的参数：json类型
//data:ajax响应成功后的数据，可能是xml,html,json
$(function(){
$("a").click(function(){
var url=this.href;
var args={"time":new Date()};
$.getJSON(url,args,function(data){
var name=data.person.name;
var email=data.person.eamil;
var website=data.person.website;
$("#details").empty()
.append("<h2><a href=‘mailto:"+email+"‘>"+name+"</a></h2>")
.append("<a href=‘"+website+"‘>"+website+"</a>");
});
return false;
});
})
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="files/andy.js">Andy</a></li>
<li><a href="files/richard.js">Richard</a></li>
<li><a href="files/jeremy.js">Jeremy</a></li>
</ul>
<div id="details"></div>
</body>
</html>
//其中的getJSON也可以简写为get，在get()最后一个参数使用type参数“JSON”