bob体育官方平台
bob体育app使用jQuery简化Ajax开发之Ajax开发入门(一)

Ajax在改变着web应用,并且带来了一种前所未有的桌面应用程序之外的震撼。但是,在这些宣传的背后我们应该意识到,其实ajax不过是——HTML,Javascript以及XML,没什么新鲜的.在这个教程中,我将给你展示如何让简单的添加ajax到你的应用中去,并且教你如何使用一个流行的javascript库Jquey进行ajax开发. 1.什么是ajax 你以前可能听说过ajax,或者至少用过ajax的应用--比如Gmail.简单的说,ajax就是使用javascript来异步地处理数据,而不是一下子重载整个页面.SitePoint上有个教程agoodintroductiontoAjax.另外,ajax这个词出自JesseJamesGarrett的这篇着名的文章. 不幸的是,关于ajax深入的实践教程可以说少之又少,还有就是ajax中使用的XMLHttpRequest类对初学网页开发的人来说有很大的难度.不过庆幸的是有一大批javascript库相继出现,为实现ajax提供了简单的方法.我们今天要用到的Jquery就是其中之一. 2.什么是JQuery Jquery是一个成熟的Javascript库,它提供许多其他库没有的特性.当然也得承认,它有19K之大,不想moo.fx那样只有3KB之轻.你可以在这里看到对许多javascript库性能以及其他方面的比较数据. 3.先验知识 要学习此教程,你需要有基本的javascript只是,如果你懂c风格的语言,那么你可以对javascript很快上手.其实不过是大括号,函数声明以及可有可无的行末分号.如果你想学习javascript,可以看这个教程.另外,既然我们讨论的是web应用,基本的html只是自然是必不可少的. 4.Jquery101 让我们简单浏览一下jQuery.要想使用jQuery,首先你必须下载这个库.下载地址在这里.jQuery的语法非常简单:找到,然后做.我们从文档中选择元素则使用$().这个符号就相当于document.getElementById(),不过除了支持ID外,它还支持css选择符以及一些XPath选择符.而且,它可以返回一个元素的数组.好,也许举个例子可以更好的说明$()的功能. 我们想使用函数来操作我们的选择符.比如,把"HelloWorld!"添加到每个class为foo的div上去,然后设置颜色为红色,我们可以这样写代码: $.append.css; 很简单啊!一般情况下,这需要两行代码来完成: 复制代码 代码如下:$.append; $.css;jQuery的链接方法可以是允许你连写你的代码,这点别的库恐怕没有.有很多jQuery的函数不需要对象,也就是说独立工作,许多ajax相关的函数都这样.比如,我们将会使用的post函数,调用方式为$.post.更多jQuery函数信息可以来onlinedocumentation或者visualjquery.com. 5.示例一:我们的第一个ajax程序 作为一个例子,我们将做一个交互概念生成器.简单的说就是让我们从列表中随机选择两个选项,然后组合成一个词组.这个例子中我们将使用web2.0特性的词语(像'Mashup','Folksonomy','Media'等等),通常情况下我们从文本文件中获得这些选项.为节省用户用javascript下载每一个组合的时间,我们将在服务器端快速生成它,并且使用jQuery在客户端获取到它.jQuery可以很好的和javascript结合使用,所以你将发现在代码中使用它将使工作变得十分容易. 服务器端代码: 简单起见,我们使用最简单的代码来做我们的概念生成器.不要担心他是如何工作的,注意看它是干什么的:输出一句话.注意,这段代码没有输出xml,他只是输入一个纯文本: 复制代码 代码如下:这里,我们使用Cache-Control头选项是因为IE总是为同一个地址建立缓存,甚至页面内容有变化时也是.很明显,这对我们的例子很不利,因为我们在每次加载的时候重新生成一句话.我们也可以使用jQuery生成一个随机数加到地址的后边,不过这不像在服务器端这样处理比较简单.[译者着:其实作者在这里提供了ajax和IEcache冲突的两种解决方案.] 客户端代码 可以开始编写前端代码了,然后我们就可以把ajax加进去了.我们需要做的仅仅是加一个按钮,好让用户点击一下获得一句新的语句,还有一个div标签,好让我们在从服务器端接收到语句的时候显示在div里面.我们将使用jQuery选中这个div以及加载返回的那句话,我们可以使用div的id来引用它.如果需要,你可以加载这句话到不同的元素标签中,这可能需要使用class了.不过这里,我们仅仅需要使用id就够了.此页面body标签中的内容为:

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

一般说来,我们需要为这个按钮(就是这个id为generate的input)加上一个冗长的onSubmit事件.有时,我们用onSumit事件调用一个Javascript函数.但是在jQuery里面,我们设置不需要修改任何html代码,我们可以简单的实现行为的分离. 客户端代码 终于该使用jQuery把我们的后台和前台结合到一起了.前面我提到我们可以使用jQuery从DOM中选择元素.首先,我们应该ixuanze这个按钮,并给它一个onClick事件响应.在这个事件代码中,我们可以选中div并且载入内容.下面是click事件响应的写法: $.click{ //Codegoeshere }); 可能你已经知道,在CSS里选择一个元素的时候我们使用#来使用元素的id属性.你可以在jQuery里使用同样的语法.因此,要选择那个按钮,我们可以使用#generate.注意,这种语法可以让我们把事件处理函数定义成匿名的. MarkWubben'sJavaScriptTerminologypage提供了详细的关于匿名函数的解释,有兴趣可以参考. 我们将要使用jQuery中一个比较高级的ajax函数:load().假设我们的代码保存为script.php.我们这样把它和我们的客户端整合起来: $.click{ $.load; 只有:3行代码!现在我们已经做了一个完整的ajax随机语句生成器了!不错! 问题是javascript代码并不是在一个浏览器加载完就执行的函数内.这样的话,这段代码就会试图去关联一个可能还没有被加载的元素.一般情况下我们使用window.load来处理这个问题,不过这种方法的局限性在于,window.load只在所有的东西被加载完成后加载一次.我们对等待这些图片的加载可能毫无兴趣--我们只是需要去获得DOM中的元素罢了. 幸运的是,jQuery有一个$函数,如其名,它在DOM被加载完之后就被执行. 完整的代码 下面是完整的代码,使用$以及一些简单的html和css: 复制代码 代码如下:

  1. 什么是jQuery?

AjaxwithjQueryExample

jQuery是个很优秀的Javascript库,它诞生于2006年,出自John Resig之手。不管你是一个javascript新手,但是却想尝试一下DOM(Document Object Model)以及Ajax的繁杂,抑或你是个javascript专家级人物,但是已经厌倦了反复的重复那无味的DOM以及Ajax脚本,jQuery都将是你的不二选择。

$.ready{ $.click{ $.load; #wrapper{ width:240px; height:80px; margin:auto; padding:10px; margin-top:10px; border:1pxsolidblack; text-align:center; }

jQuery会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本,使用jQuery,你将很快找到关键点,并且可以以最少的代码表达你的思想。

代码可以在这里下载,注意你的jquery需要保存在php文件的同目录,并且名为jquery.js.现在你已经熟悉jQuery了,让我们做些更复杂的:表单元素和XML处理,这才是真正的ajax! 123下一页阅读全文

jQuery的哲学其实很单一:简单、可重用。当你理解并且认同这种思想的时候,你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了!

  1. 一些简单概念

这里是个简单的例子,向你展示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风格代码中,这个函数还有一个缩写形式.简单的传递一个函数给$()函数:

返回顶部