如何用jQuery来进行Ajax操作

Jul 23, 2010
以下内容恢复自 Wordpress 时期的数据库备份,内容已经严重过期,仅留作纪念。

此文为以后的 AJAX 文章作为铺垫,并不深入。举例介绍 Load 函数与页面载入完成后执行的方法。

提供了最新的 jQuery 库在各个 CDN 的托管地址,最后是 Low-Level-Ajax 方法的简单介绍。

一. jQuery 的准备工作:

首选的当然是谷歌的CDN,速度也不差。

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

要用微软的就加上这个吧。

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

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

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

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

jQuery 代码一般都写在这里面,这里面的代码是在页面载入完整之后才运行的。

不然如果载入没有完成就要操作元素,那你叫 jquery 到哪里去找。

不过一定要注意自己的页面是否能够在用户能够容忍的时间内载入。

$(document).ready(function(){
//代码
});

三. Ajax - jQuery 的 Load 函数:

jQuery 的 load 函数语法如下

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

下面是一个例子,首先是事件触发,触发的条件则是点击 ID 为 loadstart 的元素,是个按键。

然后将 ID 为 test 的元素其中的内容替换为 test.txt 文件里面的内容。

$(document).ready(function(){
	$(\"#loadstart\").click(function(){
		$(\'#test\').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 方法:

先简单介绍一下,如果想要详细实例与解说,请听下回分解。

$(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 请求的所有键/值对选项

[back]