如何用jQuery来进行Ajax操作
以下内容恢复自 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 请求的所有键/值对选项