jqueryajax:使用jQuery简化Ajax开发—Ajax开发入门[1]来源: 发布时间:星期日, 2008年12月21日 浏览:154次 评论:0
="t18">jQuery是
 个可以简化 JavaScript™以及AJAX(Asynchronous JavaScript + XML 异步Javascript和XML)编程 Javascript库 区别于其他Javascript库jQuery有他自己哲学使你可以很简单编写代码这篇文章就会带领你见识下jQuery哲学探讨下他特性以及功能并且会做些ajax举例以及如何使用plug- in(插件)来扩展jQuery1. 什么是jQuery？ jQuery是个很优秀 Javascript库它诞生于2006年出自John Resig的手不管你是个javascript新手但是却想尝试下DOM(Document Object Model)以及Ajax繁杂抑或你是个javascript专家级人物但是已经厌倦了反复重复那无味DOM以及Ajax脚本jQuery都将是你不 2选择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 { confirm('You are going to visit: ' + this.href);};}如果使用jQuery话实现如下:Listing 2. DOM scripting with jQuery$('#external_links a').click(function { 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});到现在位置,我已经向你展示了 3种区别使用$思路方法.第 4种方式, 你可以使用个串创建个元素. 结果是个包含此元素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  ',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');});}0
相关文章
读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
