使用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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js控制input框只读实现示例
Jan 20 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
迟到检讨书900字
2014/01/14 职场文书
好人好事事迹材料
2014/02/12 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2019年工作总结范文
2019/05/21 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
Android中View.post和Handler.post的关系
2022/06/05 Java/Android
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL