如何用强大的jQuery来进行Ajax操作

> 此文为以后的 AJAX 文章作为铺垫,并不深入。举例介绍 Load 函数与页面载入完成后执行的方法。
> 然后提供了最新的 jQuery 库在各个 CDN 的托管地址,最后是 Low-Level-Ajax 方法的简单介绍。

一. jQuery 的准备工作:

> 首选的当然是谷歌的CDN,谷歌服务器的强大是毫无疑问的,嘿嘿,而且速度也不差,毕竟是CDN呢。

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

> 当然啰,如果碰巧有微软控,那就加上这个吧 ╮(╯▽╰)╭。同时表示,童鞋,你木有的救了,信春哥吧。

1
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

> 官网代码库,也有不少人载入呢,好像某次把官网服务器拖垮过,不过后来他们换了更强的服务器。

1
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

二. 页面载入完成才执行:

> jQuery 代码一般都写在这里面,这里面的代码是在页面载入完整之后才运行的,这样才正常嘛。
> 不然如果载入木有完成就要操作元素,那你叫 jquery 到哪里去找 ╮(╯▽╰)╭,估计它会疯掉,嘎嘎。

> 不过一定要注意自己的页面是否能够在用户能够容忍的时间内载入,否则你碰到的杯具就大了 (╯o╰)。

1
2
3
$(document).ready(function(){
//代码,这里需要强大的代码,哇卡卡卡卡卡
});

三. Ajax - jQuery 的 Load 函数:

> jQuery 的 load 函数是一种简单的但是灰常强大的 AJAX 函数。它的语法如下 -

1
$(selector).load(url,data,callback);

> 下面是一个例子,首先是事件触发,触发的条件则是点击 ID 为 loadstart 的元素,这里是个按键。
> 然后将 ID 为 cont 的元素其中的内容替换为 test.txt 文件里面的内容。嘿嘿,JQ 就是简单。

1
2
3
4
5
$(document).ready(function(){
	$("#loadstart").click(function(){
		$('#cont').load('test.txt');
	});
});

> 演示传送门 - http://www.evlos.org/ev-box/demo/ajax_002/
> 当然啰,这个是 Test.txt 文件的地址 - http://www.evlos.org/ev-box/demo/ajax_002/test.txt

四. Low Level Ajax 方法:

> 嘿嘿,先简单介绍一下,文章太长不好。如果想要详细实例与解说,请听下回分解 o(* ̄▽ ̄*)ゞ。

1
2
3
4
5
6
7
8
9
10
11
12
13
$(selector).load(url,data,callback)	//把远程数据加载到被选的元素中
$.ajax(options)	//把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)	//使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)	//使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)	//使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)	//加载并执行远程的 JavaScript 文件
 
(selector) //jQuery 元素选择器语法
(url) //被加载的数据的 URL(地址)
(data) //发送到服务器的数据的键/值对象
(callback) //当数据被加载时,所执行的函数
(type) //被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) //完整 AJAX 请求的所有键/值对选项

五. 附言:

> @lucifierya: 啧啧 围观菊花 @rericy: 于是怎样!!! @lucifierya: @rericy 你这个头像 。。。
> 嘿嘿,又是推上的事儿。睡觉前看到的,话说这可怜的家伙,╮(╯▽╰)╭。头像硬是给人当成菊花了。

Leave a comment

48 Comments.

  1. dudo 坐沙发!#1

    JQuery俺也没有研究过……

  2. FORECE 坐板凳!#2

    没明白

  3. 久酷 躺地板!#3

    JQuery 确实很强大……很好玩

  4. 久酷 天花板!#4

    文章可以写得更长些,哈哈

  5. mice 下水道!#5

    下次再来看.. :redface:

  6. 我用.load来实现首页的无限分页,还没咋明白呢,还有一部分没写吧
    .ajax的方法

    • @winy , 恩,来不及写 .ajax 方法鸟,昨天有点儿迟 ~
      而且以前文章写得太长,结果评论都变成 “路过” 了 ~
      担心要杯具鸟,所以就先这样,吊吊胃口,囧 ~
      所以下一篇文章着重说明这个东东,嘿嘿 ~

  7. 每当看到小邪这样的文章我就头大,小白不懂啊不懂啊不懂啊……囧囧地飘过

  8. :rolleyes: nice,期待下一篇详解~~~虽然手上有一本《锋利的JQuery》

  9. ajax这一块真的很有潜力啊~

  10. jQ接触很少,以后向小邪学习啦。 :mrgreen:

  11. loading一个PHP语句 怎么弄啊

  12. :wink: 载入时间很快

  13. 方法不错,呵呵,期待详细实例与解说

  14. 你居然说google速度差。。。打掉一个字吧?

  15. 小邪向jQ进军,看来很快会产出好代码让我等CP

  16. 个人认为《锋利的jQuery》间接的推动了jQuery的发展,jQuery的优美确实让人陶醉 :idea:

  17. 远程加josn曾恶心我数日~~~~ :mad:

  18. 文章很长 今天太晚了 不看了 睡觉了先 呵呵

  19. 学习了谢谢分享

  20. 不知为什么我上传的博客程序不能用啊

  21. 太牛了,貌似发现很多东西了

  22. 嗯 一直在用这个 相当方便啊

Leave a Reply

:evil: :razz: :wink: :rolleyes: :redface: :cry: :biggrin: :lol: :idea: :mrgreen: :mad: :exclaim: more »

[ Ctrl + Enter ]