.load()
.load( url [, data ] [, complete ] )
描述：从服务器上载入数据，并把返回的HTML放置到匹配的元素内。
注意，事件处理函数中也有一个方法，名为.load()。jQuery会根据传递给它的参数的设置来确定要引发哪种方法。
这种方法是从服务器端取回数据的最简单的方法。它大致等同于$.get(url, data, success)，除了它是一个方法，而不是一个全局函数，而且它有隐式的回调函数。当检测到一个成功的响应时（亦即，当textStatus是"success"或者"notmodified"时），.load()会把匹配的元素的HTML内容设置为返回的数据。这意味着这个方法的大多数用法可能相当简单：
$( "#result" ).load( "ajax/test.html" );
如果没有元素匹配该选择器——在这个案例中，如果document中不包含一个id="result"的元素——则不会发送Ajax请求。
回调函数
如果提供了一个“成功的”回调函数，在完成预处理并实施了HTML插入之后，会执行它们。会针对jQuery集合中的每个元素引发回调函数，而且this被设置为当前正在处理的DOM元素
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
在上面的两个示例中，如果当前的文档没有包含一个"id=result"的元素，则不会执行.load()方法。
请求方法
如果以对象的形式提供数据，就可以使用POST请求方式；否则，就用GET请求方式。
载入网页片段
.load()方法与$.get()方法不同，它允许我们指定要插入的远端document的一个部分。这可以通过url参数的特殊句法来实现。如果字符串中包含了一个或更多的空格字符，字符串中跟在第一个空格后面的部分，会被假定为一个jQuery的选择器，决定要载入的内容。
我们可以修改上面的示例，只使用取回的document的一部分：
$( "#result" ).load( "ajax/test.html #container" );
在执行方法的时候，它会检索ajax/test.html的内容，但是然后jQuery会解析返回的document，以找到id="container"的元素。这个元素，以及它的内容，被插入到id="result"的元素内，而获取到的document的其余内容就被丢弃了。
jQuery使用浏览器的.innerHTML属性以解析检索到的document，并把它插入到当前的document中。在这个处理过程中，浏览器经常筛选来自document的元素，比如说<html>、<title>或<head>元素。作为结果，由.load()方法获得的元素，与从浏览器中直接获取到的document内容，可能是并不是精确相同的。
脚本执行
当调用.load()方法，使用一个不带后缀的选择器表达式的URL时，在脚本被删除之前，内容就传递给.html()了。在丢弃脚本块之前会执行脚本块。然而，如果调用.load()时，选择器表达式追加到URL上，在DOM被更新之前，脚本会被剥离，不会执行脚本。在下面可以看到两种情况的示例：
在这里，任何载入到#a中的JavaScript脚本会将会作为document的一部分而被执行。
$( "#a" ).load( "article.html" );
然而，在下面的情况中，加载到#b的document中会剥离掉脚本块，因此不会执行脚本块：
$( "#b" ).load( "article.html #target" );
其它说明
- 因为浏览器的安全限制，大多数Ajax请求要遵守同源策略；请求不能成功地从不同的域名、不同的子域名、不同的端口或者不同的协议检索到数据。
示例
把另一个网页的列表项目载入到一个有序列表中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Projects:</b>
<ol id="new-projects"></ol>
<script>
$( "#new-projects" ).load( "sources/load.html #projects li" );
</script>
</body>
</html>
演示结果
如果Ajax请求遇到了一个错误，就显示一条提醒。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
</script>
</body>
</html>
演示结果
把feeds.html文件载入到id为feeds的div中。
$( "#feeds" ).load( "feeds.html" );
演示结果
<div id="feeds"><b>45</b> feeds found.</div>
向服务器传递数据的数组。
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );
和上面一样，但是将用POST方水运向服务器发送额外的参数，在服务器完成响应时，执行一个回调函数。
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
alert( "The last 25 entries in the feed have been loaded" );
});