用jQuery简化Ajax开发实现方法第1/2页_jquery

一些简单的代码简化

下面是一个简单示例,它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务,比方说为页面的某一区域中的每个链接附加一个单击(click)事件,您可以使用纯 JavaScript 代码和 DOM 脚本来实现,如 清单 1 所示。 

清单 1 :没有使用 jQuery 的 DOM 脚本

复制代码 代码如下:

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);
};
}

清单 2 显示了使用 jQuery 实现的相同的功能。
清单 2. 使用了 jQuery 的 DOM 脚本

复制代码 代码如下:

$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});

是不是很神奇? 使用 jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。无需对元素进行循环,click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。首先,我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常,我们都是使用这个函数从文档中选择元素。在本例中,一个包含有一些层叠样式表(Cascading Style Sheet,CSS)语法的字符串被传递给函数,然后 jQuery 尽可能高效地把这些元素找出来。
如果您具备 CSS 选择器的基本知识,那么应该很熟悉这些语法。在 清单 2 中,#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 <a> 元素。用英语说起来非常绕口,甚至在 DOM 脚本中也是这样,但是在 CSS 中这再简单不过了
$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组,但是它附带有大量特殊的 jQuery 函数。比方说,您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。
还可以向 $() 函数传递一个元素或者一个元素数组,该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象,比方说 window 对象。例如,我们通常会像下面这样把函数分配给加载事件:

复制代码 代码如下:

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
});

您可能有所体会,等待窗口加载的过程是非常缓慢而且令人痛苦的,这是因为必须等整个页面加载完所有的内容,包括页面上所有的的图片。有的时候,您希望首先完成图片加载,但是在大多数情况下,您只需加载超文本标志语言(Hypertext Markup Language,HTML)就可以了。通过在文档中创建特殊的 ready 事件,jQuery 解决了这个问题,方法如下:

复制代码 代码如下:

$(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 对象。清单 3 显示的示例在页面中添加了一个段落。
清单 3. 创建和附加一个简单的段落

复制代码 代码如下:

$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");

在前一个例子中您可能已经注意到,jQuery 中的另一个功能强大的特性就是方法链接(method chaining)。每次对 jQuery 对象调用方法时,方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法,那么您不必重新键入选择器就可以实现这一目的:使 Ajax 变得简单

复制代码 代码如下:

$('#message').css('background', 'yellow').html('Hello!').show();

使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用 load() 函数即可。下面是一个用于更新统计信息的示例:

复制代码 代码如下:

$('#stats').load('stats.html');

通常,我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get(),这由所需的方法决定。如果需要的话,您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。
清单 4. 使用 Ajax 向页面发送数据

复制代码 代码如下:

$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});

如果您确实需要编写一些复杂的 Ajax 脚本,那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json,jQuery 将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数,向用户提供更多有关 Ajax 体验的反馈。此外,还有一些其它的参数可供使用,您可以使用它们设置 Ajax 请求的超时,也可以设置页面 “最近一次修改” 的状态。清单 5 显示了一个使用一些我所提到的参数检索 XML 文档的示例。
清单 5. $.ajax() 使 Ajax 由复杂变简单

复制代码 代码如下:

$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
// do something with xml
}
});

当 success 回调函数返回 XML 文档后,您可以使用 jQuery 检索这个 XML 文档,其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易,并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 success 函数的一个扩展,它为 XML 中的每个 <item> 元素都添加了一个列表项到 Web 页面中。
清单 6. 使用 jQuery 处理 XML 文档

复制代码 代码如下:

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

当前1/2页 12下一页阅读全文

时间: 2024-09-12 05:01:27

用jQuery简化Ajax开发实现方法第1/2页_jquery的相关文章

使用 jQuery 简化 Ajax 开发

使用 jQuery 简化 Ajax 开发 看看 Ajax 和 DOM 脚本编程究竟有多简单

使用jQuery简化Ajax开发_AJAX相关

学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery. jQuery 是什么? jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库.无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM)脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了

使用jQuery简化Ajax开发:看看Ajax和DOM脚本编程究竟有多简单

jQuery 是什么? jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库.无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM) 脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊 的重复工作的资深 JavaScript 专家,jQuery 都会是您的首选.

使用jQuery简化Ajax开发 Ajax开发入门_jquery

这篇文章就会带领你见识一下jQuery的哲学,探讨一下他的特性以及功能,并且会做一些ajax的示例,以及如何使用plug- in(插件)来扩展jQuery. 1. 什么是jQuery? jQuery是个很优秀的Javascript库,它诞生于2006年,出自John Resig之手.不管你是一个javascript新手,但是却想尝试一下DOM(Document Object Model)以及Ajax的繁杂,抑或你是个javascript专家级人物,但是已经厌倦了反复的重复那无味的DOM以及Aja

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

4. 让你的html动起来 你可以使用jQuery做一些基本的动画和效果. 动画效果的核心就是函数animate(), 它可以随时改变指定的css样式. 举例来说, 你可以改变高度, 宽度, 透明度或者位置. 你还可以指定动画的速度, 改变速度的时候你可以使用毫秒(milliseconds),或者你也可以使用预定的速度值: 慢速, 正常或者快速(slow, normal, or fast). 下面是个同时改变元素宽和高的动画示例. 注意, 没有初始值,只有最终的值. 初始值可以直接从现有元素取到

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

jQuery是一个可以简化 JavaScript以及AJAX(Asynchronous JavaScript + XML,异步Javascript和XML)编程的Javascript库.不同于其他的Javascript库,jQuery有他自己的哲学,使你可以很简单的编写代码.这篇文章就会带领你见识一下jQuery的哲学,探讨一下他的特性以及功能,并且会做一些ajax的示例,以及如何使用plug-in(插件)来扩展jQuery. 1. 什么是jQuery? jQuery是个很优秀的Javascri

jQuery取消ajax请求的方法

 本文实例讲述了jQuery取消ajax请求的方法.分享给大家供大家参考.具体分析如下: 这里需要注意的是,在ajax请求未响应之前可以用xhr.abort()取消,但如果请求已经到达了服务器端,这样做的结果仅仅是让浏览器不再监听这个请求的响应,但服务器端仍然会进行处理 1 2 3 4 5 6 7 8 9 10 11 var xhr = $.ajax({ type: "POST", url: "test.php", data: "name=test&quo

jQuery中ajax的get()方法用法实例_jquery

本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

jQuery中ajax的load()方法用法实例_jquery

本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素.语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.c