本来是一个示例来试试jQuery中的几个方法，通过实验来学习使用jQuery提供的便捷的Ajax,例子有点长，为了日后查阅代码贴上去了，一篇文字有点长，故此分开写。
不过内容还是比较独立，上一篇参见：http://aiilive.blog.51cto.com/1925756/1304319
1.jQuery的load()方法，远程载入HTML插入到DOM中：
|
1
2
3
4
5
|
<
div
>
页面：<
input
type
=
"text"
id
=
"url"
name
=
"url"
/>
<
input
type
=
"button"
id
=
"get"
value
=
"加载"
/>
<
div
id
=
"urlcontent"
></
div
>
</
div
>
|
Ajax实现：
|
1
2
3
4
5
6
7
8
9
10
11
|
function
getURL() {
var
v_url = $(
"#url"
).val();
if
(v_url ==
""
) {
alert(
"请输入网址!"
);
return
;
}
//这里的URL不能跨域
$(
"#urlcontent"
).load(v_url,
null
,
function
(data) {
$(
"#urlcontent"
).show();
})
}
|
页面变化：
说明：index.html是当前页面，因此将当前页面加载到div中，所以出现如上图相同的信息。
注意：远程HTML是不能跨域进行，如果要跨域就要绕过同源策略限制，使用JSONP（JSON with Padding）来实现。参见IBM的一篇文章：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
2.jQuery的getJSON()方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function
getJSON() {
//这是来自http://flickr.com站点的JSON数据
$
.getJSON(
"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
,
function
(data) {
$(
"#imageDiv"
).html(
""
);
$.each(data[
'items'
],
function
(i, v) {
//处理数据获取图片
$(
"<img class='para'/>"
).attr(
"src"
, v.media.m)
.appendTo(
"#imageDiv"
);
if
(i == 5) {
return
false
;
}
})
})
}
$(
"#loadMsg"
).ajaxStart(
function
() {
$(
this
).show();
});
$(
"#loadMsg"
).ajaxStop(
function
() {
$(
this
).hide();
})
|
|
1
2
3
4
5
|
<
div
>
<
input
id
=
"wether"
type
=
"button"
value
=
"获取JSON数据"
/>
<
div
id
=
"loadMsg"
>请稍等，数据正在加载...</
div
>
<
div
id
=
"imageDiv"
></
div
>
</
div
>
|
说明：
ajaxStart()和ajaxStop()方法属于jQuery自定义的全局函数，能够为各种与Ajax相关的事件注册回调函数，ajaxStart()在Ajax请求开始时触发，ajaxStop()在Ajax请求结束的时候触发。
关于jQuery的Ajax实现基本功能实验就做了这些，实际应用中，灵活使用，比如加载JSON数据，XML数据，get,post请求操作等。
本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/1304356，如需转载请自行联系原作者
