jquery中的ajax

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": "地板."
  }
]