使用jQuery简化Ajax开发Ajax开发入门
1.什么是jQuery?
jQuery是个很优秀的Javascript库,它诞生于2006年,出自JohnResig之手。不管你是一个
jQuery会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本,使用jQuery,你将很快找到关键点,并且可以以最少的代码表达你的思想。
jQuery的哲学其实很单一:简单、可重用。当你理解并且认同这种思想的时候,你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了!
2.一些简单概念
这里是个简单的例子,向你展示jQuery如何影响你编写的代码。做的事情其实很简单,比如对页面上某一区域内的所有链接都添加一个click响应事件,你可以使用一般的Javascript以及DOM来写,代码见Listing1:
Listing1.DOMscriptingwithoutjQuery
varlinks=external_links.getElementsByTagName("a");
for(vari=0;i<links.length;i++){
varlink=links.item(i);
link.onclick=function(){
returnconfirm("Youaregoingtovisit:"+this.href);
};
}
如果使用jQuery的话实现如下:
Listing2.DOMscriptingwithjQuery
$("#external_linksa").click(function(){
returnconfirm("Youaregoingtovisit:"+this.href);
});
很惊讶,是吧?使用jQuery的话,你可以很快找到关键点,并且只需要表达你需要表达的,
而不需要罗里罗嗦。不需要对这些元素进行循环,click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码,
你需要的仅仅是使用很少的字符定义你要找的那个元素。
来看一下这段代码是如何工作的,有点小技巧。首先,看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,
你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(CascadingStyleSheets,CSS)
语法的字符串,jQuery可以很方便的找到这个元素.
如果你懂一点基本的CSS选择符的只是,我想这个语法应该看起来相当熟悉.在Listing2中,
#external_links用来寻找带有id为
external_links的元素.接下来的空格表示jQuery要找到在
#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--
用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.
$()函数返回一个包含与css选择符匹配的所有元素的一个jQuery对象.jQuery对象的概念就像是数组,但是它可能含有许多jQuery函数.举例来说,你可以调用click函数来绑定一个click事件响应到jQuery对象中的每个元素上.
你还可以向$()函数传递一个元素或者是元素的数组,它将把所有的元素打包成一个jQuery对象.你可能想要把这一特性应用到象窗口对象上面.举例来说,你有可能使用此函数来加载事件,像这样:
//dothisstuffwhenthepageisdoneloading
};
如果使用jQuery的话,你可以这样写:
//runthiswhenthewholepagehasbeendownloaded
});
如你所知,等待一个窗口的加载是异常痛苦的,因为必须加载整个页面,包括页面上所有的图片.某些情况下,你需要首先加载图片,
但是大部分时候,你可能只需要看到一下超文本的标记(HTML).jQuery通过在文档上创建一个很特殊的事件ready来解决这个问题,
使用方法如下:
$(document).ready(function(){
//dothisstuffwhentheHTMLisallready
});
这段代码创建一个document元素的jQuery对象,然后当htmlDOM文档准备完毕后调用此实例.你可以无限次的调用这个函数.另外,
在真正的jQuery风格代码中,这个函数还有一个缩写形式.简单的传递一个函数给$()函数:
//runthiswhentheHTMLisdonedownloading
});
到现在位置,我已经向你展示了三种不同的使用$()函数的方法.第四种方式,你可以使用一个字符串创建一个元素.结果是一个包含此元素的jQuery对象.Listing3展示了一个增加一段到页面上的例子:
Listing3.Creatingandappendingasimpleparagraph
$("<p></p>")
.html("HeyWorld!")
.css("background","yellow")
.appendTo("body");
正如你从上面的例子中看到的一样,jQuery还有一个很强大的功能就是方法链(methodchaining),每次你对一个jQuery对象调用一个方法,这个方法将同样返回一个jQuery对象.这就是说如果你需要对一个jQuery对象调用多个方法的话,你可以不必重复写css选择符,可以像这样:
3.jQuery让Ajax变得异常简单
使用jQuery,Ajax恐怕不能变得再简单了.jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能
的简单.
Ajax的一个一般用法就是加载一段html代码到页面上的某一区域.要实现这个,你只要简单的选中这个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信息.
$("#stats").load("stats.html");
通常,你可能需要向服务器端的页面传递一些参数.你可能猜到了,使用jQuery来实现的话会十分简单.你可以选择使用$.post()或者$.get(),当然要根据你的具体需要.如果需要,你可以传递一个可选的数据对象和一个回调函数.Listing4是一个发送数据以及使用回调函数的简单例子:
Listing4.SendingdatatoapagewithAjax
$.post("save.cgi",{
text:"mystring",
number:23
},function(){
alert("Yourdatahasbeensaved.");
});
如果你真的想要一些复杂的Ajax代码,那就是用$.ajax()函数.你可以指定数据类型为xml,html,script或者json,jQuery会为你自动准备好结果一遍你的回调函数能够立即使用这些数据.你还可以设定
,
,
,以及
回调函数来给用户一些ajax体验的更多提示信息.另外,还有一些参数,可以让你设置ajax请求的超时时间,或者一个页面的"最后更改"状态.Listing5展示了一个获取xml文档并使用我上面提到的一些参数的简单例子:
Listing5.ComplexAjaxmadesimplewith$.ajax()
$.ajax({
url:"document.xml",
type:"GET",
dataType:"xml",
timeout:1000,
error:function(){
alert("ErrorloadingXMLdocument");
},
success:function(xml){
//dosomethingwithxml
}
});
当你成功的获得xml反馈的时候,你可以使用jQuery来遍历xml文档,就像你操作html的方式一样.这使操作一个xml文件以及整合内容到页面上变得十分的简单.Listing6扩展了success函数,根据xml文档里的每个<item>在页面上增加一个了list(列表)条目.
Listing6.WorkingwithXMLusingjQuery
success:function(xml){
$(xml).find("item").each(function(){
varitem_text=$(this).text();
$("<li></li>")
.html(item_text)
.appendTo("ol");
});
}
相关文章
- ajax parsererror报错,jQuery为ajax请求返回“ parsererror”[通俗易懂]
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- Jquery中的.post和 .ajax两个方法的区别是什么详解编程语言
- jQuery $.ajax()方法的使用
- jquery$.ajax入门应用一
- Jquery设置标题的自动翻转
- JQuery打造PHP的AJAX表单提交实例
- jquery$.ajax()取xml数据的小问题解决方法
- 初窥JQuery-Jquery简介入门了解篇
- jQuery学习笔记之jQuery的事件
- 10款新鲜出炉的jQuery插件(Ajax插件,有幻灯片、图片画廊、菜单等)
- jquery中ajax学习笔记4
- jQuery选择器项目实例分析及实现代码
- S2SH整合JQuery+Ajax实现登录验证功能实现代码
- 关于jQuery参考实例1.0jQuery的哲学
- 探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
- jQuery获取和设置select下拉框的值实现代码
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- jQuery中使用Ajax获取JSON格式数据示例代码
- 原生js和jquery中有关透明度设置的相关问题
- jquery教程ajax请求json数据示例
- jquery中ajax函数执行顺序问题之如何设置同步
- jQuery中选择器小问题(新人难免遇到)
- JQuery的Ajax中Post方法传递中文出现乱码的解决方法
- jquery显示隐藏input对象