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

jQuery会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本，使用jQuery，你将很快找到关键点，并且可以以最少的代码表达你的思想。

jQuery的哲学其实很单一：简单、可重用。当你理解并且认同这种思想的时候，你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了！

2. 一些简单概念

这里是个简单的例子，向你展示jQuery如何影响你编写的代码。做的事情其实很简单，比如对页面上某一区域内的所有链接都添加一个click响应事件，你可以使用一般的Javascript以及DOM来写，代码见Listing1：

Listing 1. DOM scripting without jQuery

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的话实现如下：Listing 2. DOM scripting with 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元素内的所有的<a>元素.用口语开表达的话有点费劲--用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展示了一个增加一段到页面上的例子:

Listing 3. Creating and appending a simple paragraph

$('<p></p>').html('Hey World!').css('background', 'yellow').appendTo("body");正如你从上面的例子中看到的一样,jQuery还有一个很强大的功能就是方法链(method chaining), 每次你对一个jQuery对象调用一个方法,这个方法将同样返回一个jQuery对象. 这就是说如果你需要对一个jQuery对象调用多个方法的话, 你可以不必重复写css选择符,可以像这样:

$.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文档里的每个<item>在页面上增加一个了list(列表)条目.

Listing 6. Working with XML using jQuery

success: function(xml){$(xml).find('item').each(function(){var item_text = $(this).text();$('<li></li>').html(item_text).appendTo('ol');});}