jQuery 中的 Ajax：
在 jQuery 中，$.Ajax() 办法属于最底层的办法，第 2 层是 load()，$.get()，和 $.post()，第 3 层是 $.getScript() 和 $.getJSON() 办法。
1. load() 办法
构造：load(url , [data] , [callback] )
案例 1：load(url)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script src="myjQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//load 办法加载 html
$("#box").load("test.html");
});
</script>test.html 文件
hello world；
后果：将 url 返回的内容当做该元素的 innerHTML。
案例 2：页面头部反复援用
load.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
header {
height: 100px;
background: yellow;
}
header ul {
height: 100px;
width: 800px;
position: relative;
margin: 0 auto;
opacity: 0.5;
}
header ul li {
list-style: none;
width: 150px;
background: red;
text-align: center;
line-height: 100px;
border: 1px solid black;
float: left;
}
section {
height: 300px;
background: green;
opacity: 0.3;
}
footer {
height: 300px;
background: blue;
opacity: 0.3;
}
</style>
</head>
<body>
<header>
</header>
<section>
</section>
<footer>
</footer>
</body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
$('header').load("head.html",function(){$("li").click(function(){console.log($(this).html());
});
});
</script>head.html 文件 (间接是代码，不须要写 html head body 等那些构造)
<ul>
<li> 主题 1 </li>
<li> 主题 2 </li>
<li> 主题 3 </li>
<li> 主题 4 </li>
<li> 主题 5 </li>
</ul>