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>