$.fn.load
$.fn.load 方法是 jQuery 所有 Ajax 方法中唯一在选择器结果集上调用的方法。$.fn.load 方法从给定的 URL 上获取信息,然后填充到选择器结果集包含的元素中。另外,在 URL 后面还可以附加一些选择器,jQuery 最终只会把跟选择器相匹配的内容填充到对应的 HTML 元素中。
下面是示例:
$('#newContent').load('/foo.html');// 或
$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
alert('加载完毕!');
});
Ajax 和 表单
在跟表单打交道方面,jQuery 的 Ajax 更显神威。最为有用的两个方法就是 $.fn.serialize 和 $.fn.serializeArray,下面是它们的用法:
// 将表单中数据转化为查询字符串
$('#myForm').serialize();$('#myForm').serializeArray();
// 将表单中数据转化为对象数组,如:
[
{ name : 'field1', value : 123 },
{ name : 'field2', value : 'hello world' }
]
使用 JSONP
JSON 的本质其实是一种跨站点脚本注入。现在有很多比较好的网站都提供了 JSONP 服务,允许我们用他们预先定义好的 API 获取他们的数据。下面是一个示例,来源于 http://www.giantflyingsaucer.com/blog/?p=2682
服务端代码:
<?php
header("content-type: text/javascript"); if(isset($_GET['name']) && isset($_GET['callback'])) {
$obj->name = $_GET['name'];
$obj->message = "Hello " . $obj->name;
echo $_GET['callback']. '(' . json_encode($obj) . ');';
}
?>
客户端代码:
$.ajax({
url: 'http://otherDomail.com:8080/JSONP/jsonp-demo.php',
data: {name: 'Super man'},
dataType: 'jsonp',
jsonp: 'callback',
success: function( response ) {
console.log( response.message );
}
});jQuery 把 JSONP 的实现细节隐藏在幕后,我们要做的就是告诉 jQuery 服务端定义好的函数名以及我们请求的数据类型是 JSONP,其它方面和普通的 Ajax 请求没什么区别。
Ajax 事件
很多时候我们都需要在 Ajax 请求开始或结束时做一些操作,例如显示或隐藏一个 loading… 图片。这些工作本可以在每个 Ajax 请求中各自实现,但是 jQuery 提供了更好的方法,你可以像绑定普通事件一样绑定 Ajax 事件。若要参阅全部事件列表,可访问 http://docs.jquery.com/Ajax_Events。下面是简单示例:
$('#loading_indicator')
.ajaxStart(function() { $(this).show(); })
.ajaxStop(function() { $(this).hide(); });










