使用jQuery简化Ajax开发——Ajax开发入门[1]

登录注册全部 文章 小组 译者 作者


发现，翻译，阅读中文之外的互联网精华
阅读发现评论小组译消息翻译自己帮助
技术与创业科学与医疗生活与人文环游世界在线视频精华文章热点标签

您还没有在译言注册
加入我们吧！
译言用户请从这里登陆
本文的相关阅读
与Web2.0有关的其他译文
Top 100 web2.0网站 最热门的100个网站VC新年新展望怎样为你的WEB2.0创业进行营销利用web2.0创造真正的商业价值阻碍市场接受的十大昏招
热点标签
Web2.0 (44)  Web (15)  AJAX (8)  jquery (5)
历史最佳文章
SWOT分析法 (55868)《长尾(The Long Tail)》的完整中译版 (24025)译言:把中文博客文章翻译成英文 (23291)MySpace 起步揭密（一） (23166)高级SWOT分析法 (21887)
本周最佳文章
哈利波特7情节梗概 (2700)十大最佳极客言论 (1666)这不是不治之症－－简介淋巴癌 (7303)大众化的旅游目的地（美国人环球旅行的价格） (272)摩根斯坦利CEO约翰·麦克谈中国 (1197)
参与发现和翻译
知道其它好文章？请推荐给jQuery小组翻译小组：推荐我发现的好文
收藏与传播本文
Del.icio.us收藏到QQ书签添加到雅虎收藏+
推荐给朋友
阅读>技术与创业>jQuery小组> 使用jQuery简化Ajax开发——Ajax开发入门[1]
 45个读者
使用jQuery简化Ajax开发——Ajax开发入门[1]
原作者:Jesse Skinner    译者:令狐葱    发表时间：2小时21分钟前   原文链接
删除:
把眉批拖到这里
添加眉批
正常显示
显示眉批
jQuery是一个可以简化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，异步Javascript和XML）编程的Javascript库。不同于其他的Javascript库，jQuery有他自己的哲学，使你可以很简单的编写代码。这篇文章就会带领你见识一下jQuery的哲学，探讨一下他的特性以及功能，并且会做一些ajax的示例，以及如何使用plug-in （插件）来扩展jQuery。
1. 什么是jQuery？
jQuery 是个很优秀的Javascript库，它诞生于2006年，出自John Resig之手。不管你是一个javascript新手，但是却想尝试一下DOM（Document Object Model）以及Ajax的繁杂，抑或你是个javascript专家级人物，但是已经厌倦了反复的重复那无味的DOM以及Ajax脚本，jQuery都将是你的不二选择。
jQuery会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本，使用jQuery，你将很快找到关键点，并且可以以最少的代码表达你的思想。
jQuery的哲学其实很单一：简单、可重用。当你理解并且认同这种思想的时候，你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了！
2. 一些简单概念
这里是个简单的例子，向你展示jQuery如何影响你编写的代码。做的事情其实很简单，比如对页面上某一区域内的所有链接都添加一个click响应事件，你可以使用一般的Javascript以及DOM来写，代码见Listing1：
var external_links = document.getElementById(‘external_links‘);
var links = external_links.getElementsByTagName(‘a‘);
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm(‘You are going to visit: ‘ + this.href);
};
}
如果使用jQuery的话实现如下：
$(‘#external_links a‘).click(function() {
return confirm(‘You are going to visit: ‘ + this.href);
});
很惊讶，是吧？使用jQuery的话，你可以很快找到关键点，并且只需要表达你需要表达的，
而不需要罗里罗嗦。不需要对这些元素进行循环，click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码，
你需要的仅仅是使用很少的字符定义你要找的那个元素。
来看一下这段代码是如何工作的，有点小技巧。首先，看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,
你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(Cascading Style Sheets,CSS)
语法的字符串,jQuery可以很方便的找到这个元素.
如果你懂一点基本的CSS选择符的只是,我想这个语法应该看起来相当熟悉.在Listing2中,#external_links用来寻找带有id为
external_links的元素.接下来的空格表示jQuery要找到在#external_links元素内的所有的元素.用口语开表达的话有点费劲--
用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.$()函数返回一个包含与css选择符匹配的所有元素的一个jQuery对象. jQuery对象的概念就像是数组,但是它可能含有许多jQuery函数. 举例来说,你可以调用click函数来绑定一个click事件响应到jQuery对象中的每个元素上.
你还可以向$()函数传递一个元素或者是元素的数组,它将把所有的元素打包成一个jQuery对象.你可能想要把这一特性应用到象窗口对象上面.举例来说, 你有可能使用此函数来加载事件,像这样:
window.onload = function() {
// do this stuff when the page is done loading
};如果使用jQuery的话,你可以这样写:
$(window).load(function() {
// run this when the whole page has been downloaded
});
如你所知,等待一个窗口的加载是异常痛苦的,因为必须加载整个页面,包括页面上所有的图片. 某些情况下,你需要首先加载图片,
但是大部分时候,你可能只需要看到一下超文本的标记(HTML).jQuery通过在文档上创建一个很特殊的事件ready来解决这个问题,
使用方法如下:
$(document).ready(function() {
// do this stuff when the HTML is all ready
});
这段代码创建一个document元素的jQuery对象, 然后当html DOM文档准备完毕后调用此实例. 你可以无限次的调用这个函数. 另外,
在真正的jQuery风格代码中,这个函数还有一个缩写形式.简单的传递一个函数给$()函数:
$(function() {
// run this when the HTML is done downloading
});到现在位置,我已经向你展示了三种不同的使用$()函数的方法.第四种方式, 你可以使用一个字符串创建一个元素. 结果是一个包含此元素的jQuery对象. Listing3展示了一个增加一段到页面上的例子:
$(‘

‘)
.html(‘Hey World!‘)
.css(‘background‘, ‘yellow‘)
.appendTo("body");
正如你从上面的例子中看到的一样,jQuery还有一个很强大的功能就是方法链(), 每次你对一个jQuery对象调用一个方法,这个方法将同样返回一个jQuery对象. 这就是说如果你需要对一个jQuery对象调用多个方法的话, 你可以不必重复写css选择符,可以像这样:
$(‘#message‘).css(‘background‘, ‘yellow‘).html(‘Hello!‘).show();
3.jQuery让Ajax变得异常简单
使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能
的简单.
Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信息.
$(‘#stats‘).load(‘stats.html‘);通常,你可能需要向服务器端的页面传递一些参数. 你可能猜到了, 使用jQuery来实现的话会十分简单. 你可以选择使用$.post()或者$.get(), 当然要根据你的具体需要. 如果需要, 你可以传递一个可选的数据对象和一个回调函数. Listing4是一个发送数据以及使用回调函数的简单例子:
$.post(‘save.cgi‘, {
text: ‘my string‘,
number: 23
}, function() {
alert(‘Your data has been saved.‘);
});
如果你真的想要一些复杂的Ajax代码,那就是用$.ajax()函数. 你可以指定数据类型为xml, html, script或者json, jQuery 会为你自动准备好结果一遍你的回调函数能够立即使用这些数据. 你还可以设定 beforeSend, error, success, 以及 complete 回调函数来给用户一些ajax体验的更多提示信息. 另外,还有一些参数,可以让你设置ajax请求的超时时间,或者一个页面的"最后更改"状态. Listing5展示了一个获取xml文档并使用我上面提到的一些参数的简单例子:
$.ajax({
url: ‘document.xml‘,
type: ‘GET‘,
dataType: ‘xml‘,
timeout: 1000,
error: function(){
alert(‘Error loading XML document‘);
},
success: function(xml){
// do something with xml
}
});
当你成功的获得xml反馈的时候, 你可以使用jQuery来遍历xml文档,就像你操作html的方式一样. 这使操作一个xml文件以及整合内容到页面上变得十分的简单. Listing6 扩展了success函数, 根据xml文档里的每个在页面上增加一个了list(列表)条目.
success: function(xml){
$(xml).find(‘item‘).each(function(){
var item_text = $(this).text();
$(‘

‘)
.html(item_text)
.appendTo(‘ol‘);
});
}
本文所属的小组包含更多精彩文章：
jQuery小组
本文由译言网的令狐葱翻译。译者的其他文章有：
12步让你的web1.0变成web2.0Easy Ajax with jQuery[中文版3]Easy Ajax with jQuery[中文版2]
进入译言，欣赏更多中文以外的技术、科学、人文精华。
内容有问题？请与我们联络。
Currently 0.00/512345
0.0  |  0 个评分
本文所属的小组包含更多精彩文章：
jQuery小组
添加评论
如果您已经注册过，请点击这里开始评论。 选一个名号  (限制最多16个字符)
密码  (限制最多16个字符)
您的电子邮件

评论不能是空白啊!
提交


译言 © 2006 | 关于译言 | 译言网志  { English 译言}
翻译别人的发现开始翻译提交新发现全体译者
我的空间我的信箱个人合集更新个人信息
联系我们投稿译言网志
请稍等。。。