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


Posted in Javascript onOctober 14, 2009

这篇文章就会带领你见识一下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:

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选择符,可以像这样:

$('#message').css('background', 'yellow').html('Hello!').show();3.jQuery让Ajax变得异常简单
使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能
的简单.
Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信息.
$('#stats').load('stats.html');

通 常,你可能需要向服务器端的页面传递一些参数. 你可能猜到了, 使用jQuery来实现的话会十分简单. 你可以选择使用$.post()或者$.get(), 当然要根据你的具体需要. 如果需要, 你可以传递一个可选的数据对象和一个回调函数. Listing4是一个发送数据以及使用回调函数的简单例子:

Listing 4. Sending data to a page with Ajax

$.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文档并使用我上面提到的一些参数的简单例子:

Listing 5. Complex Ajax made simple with $.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
  }
});

当 你成功的获得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');
  });
}
Javascript 相关文章推荐
javascript延时加载之defer测试
Dec 28 Javascript
js单例模式的两种方案
Oct 22 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 #Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 #Javascript
jquery 常用操作整理 基础入门篇
Oct 14 #Javascript
一些技巧性实用js代码小结
Oct 14 #Javascript
Jquery 学习笔记(一)
Oct 13 #Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 #Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 #Javascript
You might like
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php实现Mysql简易操作类
2015/10/11 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
Javascript Math对象
2009/08/13 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
学习python的前途 python挣钱
2019/02/27 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
工程售后服务方案
2014/06/08 职场文书
连锁超市项目计划书
2014/09/15 职场文书
高中生毕业评语
2014/12/30 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Python安装使用Scrapy框架
2022/04/12 Python