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 //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
//传递data，则为post 方式$('input').click(function () { $('#box').load('test.php', { url : 'ycku' });}); //post 方式接受的PHP 回调参数。对于必须加载完成之后才能继续的操作，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 模式可以使用之前的两种形式。
一个聊天室的例子
已有评论：
test.js
var comments = [ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." }]; var html = ''; $.each( comments , function(commentIndex, comment) { html += ' ' + comment['username'] + ':
' + comment['content'] + '
'; }) $('#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 += ' ' + comment['username'] + ':
' + comment['content'] + '
'; }) $('#resText').html(html); } }); }); }) test.json
[ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": "王五", "content": "地板." }]