现在的位置: 首页 > 综合 > 正文

《锋利的jQuery》之jQuery与Ajax

2013年10月08日 ⁄ 综合 ⁄ 共 2528字 ⁄ 字号 评论关闭
jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()、$.post()方法,第3层是$.getScript()和$.getJSON()方法。
1. load()
载入远程HTML代码并插入DOM中。
无参数传递则是GET方式
$("#send").click(function() {
     $("#resText").load("test.html");
}
有参数则是POST方式
$("#resText").load("test.php", {name: "rain", age: "22"}, function() {
     // ...
});
回调函数:
load()方法中,无论Ajax请求是否成功,只要当请求完成,回调函数就被触发。
对应$.ajax()方法中的complete回调函数。
$("#resText").load("test.html",
     functiion(responseText,      // 请求返回的内容
          textStatus,                // 请求状态:success, error, notmodified, timeout
          XMLHttpRequest          // XMLHttpRequest对象
     ) {
     // ...
});
load()通常用来从Web服务器上获取静态的数据文件,如果需要传递一些参数给服务器中的页面,可以使用$.get()或者$.post()。这两个是全局函数。load()是jQuery对象的方法。
2. $.get()
callback函数只在返回成功时执行
$("#send”).click(function() {
     $.get("get1.php", {
          username: $("#username").val(),
          content: $("#content").val()
     }, function(data, textStatus) {
          $("resText").html(data);
     }
);
处理JSON消息
$.get("get3.php", {
          username: $("#username").val(),
          content: $("#content").val()
     }, function(data, textStatus) {
          var username = data.username;
          var content = data.content;
          var txtHtml = "<div class='comment'><h6>"+
                              username+":</h6><p class='para'>"+
                              content+"</p></div>";
          $("#resText").html(txtHtml);
     }, "json");
3. $.post()
$("#send").click(function() {
     $.post("post1.php", {
          username: $("#username").val(),
          content: $("#content").val()
     }, function(data, textStatus) {
          $("#resText").append(data);
     });
});
4. $.getScript()
在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。
$('#send').click(function() {
     $.getScript('test.js');
});
$.getScript()直接加载.js文件,并且JavaScript文件会自动执行。
5. $.getJSON()
JSONP(JSON with Padding):是一种可以绕过同源策略的方法,即通过使用JSON与<script>标记相结合的方法,从服务器端直接返回可执行的JavaScript函数调用或者JavaScript对象。
$('#send').click(function() {
     $.getJSON("http://api.flickr.com/...",
     function(data) {
          $.each(data.items, function(i, items) {
               $("<img class='para'/>").attr("src", item.media.m).appendTo("#resText");
               if (i == 3) {
                    return false;
               }
          }
     }
});
6. $.ajax()
$.ajax()是jQuery最底层的Ajax实现。
7. serialize()
serialize()方法用于一个jQuery对象,能够将DOM元素内容序列化为字符串,用于Ajax请求。
$.get("get1.php", $("#form1").serialize(), function(data, textStatus) {
     $("resText").html(data);
});
$(":checkbox, :radio").serialize(); 还会自动编码
serializeArray
8. Ajax和jQuery的聊天室小例子
8.1 客户端处理
(1)POST方式向服务器发送请求,解析服务器端返回的XML格式响应消息。
(2)浏览器每隔一定时间更新数据
HTML页面:
       <h3>及时消息</h3>

<div id="wrapper">

<p id="messagewindow">

<span id="loading">加载中...</span>

</p>

<form id="chatform">

<input type="text" id="msg" size="50"/><br/>

<input type="submit" value="发送"/><br/>

</form>

</div>

抱歉!评论已关闭.