《锋利的jQuery》之jQuery与Ajax
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>
<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>
