jQuery 对Ajax 做了大量的封装，我们使用起来也较为方便，不需要去考虑浏览器兼容性。对于封装的方式，jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过这层封装了第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON()方法。
1 .load()方法可以参数三个参数：url(必须，请求html 文件的url 地址，参数类型为String)、data(可选，发送的key/value 数据，参数类型为Object)、callback(可选，成功或失败的回调函数，参数类型为函数Function)。
如果想让Ajax 异步载入一段HTML 内容，我们只需要一个HTML 请求的url 即可。
//HTML <input type="button" value="异步获取数据" /> <div id="box"></div> //jQuery $('input').click(function () { $('#box').load('test.html'); });
如果想对载入的HTML 进行筛选，那么只要在url 参数后面跟着一个选择器即可。
//带选择器的url $('input').click(function () { $('#box').load('test.html .my'); });
如果是服务器文件，比如.php。一般不仅需要载入数据，还需要向服务器提交数据，那
么我们就可以使用第二个可选参数data。向服务器提交数据有两种方式：get 和post。
//不传递data，则默认get 方式 $('input').click(function () { $('#box').load('test.php?url=ycku'); });
//get 方式接受的PHP <?php if ($_GET['url'] == 'ycku') { echo '瓢城Web 俱乐部官网'; } else { echo '其他网站';
}
?>
//传递data，则为post 方式 $('input').click(function () { $('#box').load('test.php', { url : 'ycku' }); });
//post 方式接受的PHP <?php if ($_POST['url'] == 'ycku') { echo '瓢城Web 俱乐部官网'; } else { echo '其他网站'; } ?>
回调参数。对于必须加载完成之后才能继续的操作，load()方法提供了回调函数（callback）
$(function(){ $("#send").click(function(){ $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){ alert( $(this).html() ); //在这里this指向的是当前的DOM对象，即 $("#iptText")[0] alert(responseText); //请求返回的内容 alert(textStatus); //请求状态：success，error alert(XMLHttpRequest); //XMLHttpRequest对象 }); }) })
2. $.get()和$.post()方法
load（）方法通常用来从web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用 $.get()和$.post()方法或者$.ajax()方法。
.load()方法是局部方法，因为他需要一个包含元素的jQuery 对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp 和text。第一个参数为必选参数，后面三个为可选参数。
//使用$.get()异步返回html 类型 $('input').click(function () { $.get('test.php', { url : 'ycku' }, function (response, status, xhr) { if (status == 'success') { $('#box').html(response); } }) //type 自动转为html });
$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的
不同，在用户使用上体现不出。具体区别如下：
1.GET 请求是通过URL 提交的，而POST 请求则是HTTP 消息实体提交的；
2.GET 提交有大小限制（2KB），而POST 方式不受限制；
3.GET 方式会被缓存下来，可能有安全性问题，而POST 没有这个问题；
4.GET 方式通过$_GET[]获取，POST 方式通过$_POST[]获取。
//使用$.post()异步返回html $.post('test.php', { url : 'ycku' }, function (response, status, xhr) { $('#box').html(response); });
$.ajax()
$.ajax()是所有ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数，传递一个各个功能键值对的对象。
//$.ajax 使用 $('input').click(function () { $.ajax({ type : 'POST', url : 'test.php', data : { url : 'ycku' }, success : function (response, stutas, xhr) { $('#box').html(response); } }); });
注意：对于data 属性，如果是GET 模式，可以使用三种之前说所的三种形式。如果是POST 模式可以使用之前的两种形式。
一个聊天室的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0;} body { font-size:12px;} .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;} .comment h6 { font-weight:700; font-size:14px;} .para { margin-top:5px; text-indent:2em;background:#DDD;} </style> <!-- 引入jQuery --> <script src="../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#send').click(function() { $.ajax({ type: "GET", url: "test.js", dataType: "script" }); }); }) //]]> </script> </head> <body> <br/> <p> <input type="button" id="send" value="加载"/> </p> <div class="comment">已有评论：</div> <div id="resText" > </div> </body> </html>
test.js
var comments = [ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]; var html = ''; $.each( comments , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html);
$(function(){ $('#send').click(function() { $.ajax({ type: "GET", url: "test.json", dataType: "json", success : function(data){ $('#resText').empty(); var html = ''; $.each( data , function(commentIndex, comment) { html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>'; }) $('#resText').html(html); } }); }); })
test.json
[ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." } ]