提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

用jQuery简化Ajax开发实现方法

jQuery方法AJAX开发 实现 简化
2023-06-13 09:14:17 时间
一些简单的代码简化

下面是一个简单示例，它说明了jQuery对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯JavaScript代码和DOM脚本来实现，如清单1所示。 

清单1：没有使用jQuery的DOM脚本
复制代码代码如下:

varexternal_links=document.getElementById("external_links");
varlinks=external_links.getElementsByTagName("a");
for(vari=0;i<links.length;i++){
varlink=links.item(i);
link.onclick=function(){
returnconfirm("Youaregoingtovisit:"+this.href);
};
}

清单2显示了使用jQuery实现的相同的功能。
清单2.使用了jQuery的DOM脚本
复制代码代码如下:

$("#external_linksa").click(function(){
returnconfirm("Youaregoingtovisit:"+this.href);
});

是不是很神奇？使用jQuery，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，click()函数将完成这些操作。同样也不需要进行多个DOM脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。
理解这一代码的工作原理可能会有一点复杂。首先，我们使用了$()函数——jQuery中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（CascadingStyleSheet，CSS）语法的字符串被传递给函数，然后jQuery尽可能高效地把这些元素找出来。
如果您具备CSS选择器的基本知识，那么应该很熟悉这些语法。在清单2中，#external_links用于检索id为external_links的元素。a后的空格表示jQuery需要检索external_links元素中的所有<a>元素。用英语说起来非常绕口，甚至在DOM脚本中也是这样，但是在CSS中这再简单不过了
$()函数返回一个含有所有与CSS选择器匹配的元素的jQuery对象。jQuery对象类似于数组，但是它附带有大量特殊的jQuery函数。比方说，您可以通过调用click函数把click处理函数指定给jQuery对象中的所有元素。
还可以向$()函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个jQuery对象中。您可能会想要使用这个功能将jQuery函数用于一些对象，比方说window对象。例如，我们通常会像下面这样把函数分配给加载事件：
复制代码代码如下:
window.onload=function(){
//dothisstuffwhenthepageisdoneloading
};

使用jQuery编写的功能相同的代码：
复制代码代码如下:
$(window).load(function(){
//runthiswhenthewholepagehasbeendownloaded
});

您可能有所体会，等待窗口加载的过程是非常缓慢而且令人痛苦的，这是因为必须等整个页面加载完所有的内容，包括页面上所有的的图片。有的时候，您希望首先完成图片加载，但是在大多数情况下，您只需加载超文本标志语言（HypertextMarkupLanguage，HTML）就可以了。通过在文档中创建特殊的ready事件，jQuery解决了这个问题，方法如下：
复制代码代码如下:
$(document).ready(function(){
//dothisstuffwhentheHTMLisallready
});

这个代码围绕document元素创建了一个jQuery对象，然后建立一个函数，用于在HTMLDOM文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的jQuery格式，使用快捷方式调用这个函数。这很简单，只需向$()函数传递一个函数就可以了：
复制代码代码如下:
$(function(){
//runthiswhentheHTMLisdonedownloading
});

到目前以止，我已经向大家介绍了$()函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的jQuery对象。清单3显示的示例在页面中添加了一个段落。
清单3.创建和附加一个简单的段落
复制代码代码如下:
$("<p></p>")
.html("HeyWorld!")
.css("background","yellow")
.appendTo("body");

在前一个例子中您可能已经注意到，jQuery中的另一个功能强大的特性就是方法链接（methodchaining）。每次对jQuery对象调用方法时，方法都会返回相同的jQuery对象。这意味着如果您需要对jQuery对象调用多个方法，那么您不必重新键入选择器就可以实现这一目的：使Ajax变得简单
复制代码代码如下:
$("#message").css("background","yellow").html("Hello!").show();

使用jQuery将使Ajax变得及其简单。jQuery提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax最常见的用法就是把一块HTML代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用load()函数即可。下面是一个用于更新统计信息的示例：
复制代码代码如下:
$("#stats").load("stats.html");

通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用jQuery实现这一操作非常地简单。您可以使用$.post()或者$.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单4显示了一个发送数据和使用回调的简单示例。
清单4.使用Ajax向页面发送数据
复制代码代码如下:
$.post("save.cgi",{
text:"mystring",
number:23
},function(){
alert("Yourdatahasbeensaved.");
});

如果您确实需要编写一些复杂的Ajax脚本，那么需要用到$.ajax()函数。您可以指定xml、script、html或者json，jQuery将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定beforeSend、error、success或者complete回调函数，向用户提供更多有关Ajax体验的反馈。此外，还有一些其它的参数可供使用，您可以使用它们设置Ajax请求的超时，也可以设置页面“最近一次修改”的状态。清单5显示了一个使用一些我所提到的参数检索XML文档的示例。
清单5.$.ajax()使Ajax由复杂变简单
复制代码代码如下:
$.ajax({
url:"document.xml",
type:"GET",
dataType:"xml",
timeout:1000,
error:function(){
alert("ErrorloadingXMLdocument");
},
success:function(xml){
//dosomethingwithxml
}
});

当success回调函数返回XML文档后，您可以使用jQuery检索这个XML文档，其方式与检索HTML文档是一样的。这样使得处理XML文档变得相当地容易，并且把内容和数据集成到了您的Web站点里面。清单6显示了success函数的一个扩展，它为XML中的每个<item>元素都添加了一个列表项到Web页面中。
清单6.使用jQuery处理XML文档
复制代码代码如下:
success:function(xml){
$(xml).find("item").each(function(){
varitem_text=$(this).text();
$("<li></li>")
.html(item_text)
.appendTo("ol");
});
}


为HTML添加动画
可以使用jQuery处理基本的动画和显示效果。animate()函数是动画代码的核心，它用于更改任何随时间变化的数值型的CSS样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。
复制代码代码如下:
$("#grow").animate({height:500,width:500},"slow",function(){
alert("Theelementisdonegrowing!");
});

jQuery的内置函数使更多常见的动画更容易完成。可以使用show()和hide()元素，立即显示或者以特定的速度显示。还可以通过使用fadeIn()和fadeOut()，或者slideDown()和slideUp()显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。
复制代码代码如下:
$("#nav").slideDown("slow");

DOM脚本和事件处理
或许jQuery最擅长的就是简化DOM脚本和事件处理。遍历和处理DOM非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。
从本质上说，jQuery可以使DOM脚本中的常用操作变得更加容易。您可以创建元素并且使用append()函数把它们与其它的一些元素链接到一起，使用clone()复制元素，使用html()设置内容，使用empty()函数删除内容，使用remove()函数删除所有的元素，即便是使用wrap()函数，用其他元素将这些元素包装起来。
通过遍历DOM，一些函数可以用于更改jQuery对象本身的内容。可以获得元素所有的siblings()、parents()和children()。还可以选择next()和prev()兄弟元素。find()函数或许是功能最强大的函数，它允许使用jQuery选择器搜索jQuery对象中元素的后代元素。
如果结合使用end()函数，那么这些函数将变得更加强大。这个函数的功能类似于undo函数，用于返回到调用find()或parents()函数（或者其它遍历函数）之前的jQuery对象。
如果配合方法链接（methodchaining）一起使用，这些函数可以使复杂的操作看上去非常简单。清单7显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。
清单7.轻松地遍历和处理DOM
复制代码代码如下:
$("form#login")
//hideallthelabelsinsidetheformwiththe"optional"class
.find("label.optional").hide().end()
//addaredbordertoanypasswordfieldsintheform
.find("input:password").css("border","1pxsolidred").end()
//addasubmithandlertotheform
.submit(function(){
returnconfirm("Areyousureyouwanttosubmit?");
});

不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用end()返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用end()返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。
处理常见事件就像调用函数（比方说click()、submit()或mouseover()）和为其传递事件处理函数一样简单。此外，还可以使用bind("eventname",function(){})指定自定义的事件处理程序。可以使用unbind("eventname")删除某些事件或者使用unbind()删除所有的事件。有关这些函数的使用方法的完整列表，请参阅参考资料中的jQuery应用程序编程接口（ApplicationProgramInterface，API）文档。
释放jQuery选择器的强大能量
我们经常会使用ID来选择元素，比如#myid，或者通过类名，比如div.myclass来选择元素。然而，jQuery提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。
jQuery的选择器语法主要是基于CSS3和XPath的。对CSS3和XPath了解的越多，使用jQuery时就越加得心应手。有关jQuery选择器的完整列表，包括CSS和XPath，请参阅参考资料中的链接。
CSS3包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。然而，我们仍然可以在jQuery中使用CSS3选择元素，因为jQuery具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：:empty伪选择器（pseudo-selector）：
复制代码代码如下:
$("td:empty").html("-");

如果需要找出所有不含特定类的元素呢？CSS3同样提供了一个语法可以完成这个目的，使用:not伪选择器：如下代码显示了如何隐藏所有不含required类的输入内容：
复制代码代码如下:
$("input:not(.required)").hide();

与在CSS中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：
复制代码代码如下:
$("ul,ol,dl").hide();

XPath是一种功能强大的语法，用于在文档中搜寻元素。它与CSS稍有区别，不过它能实现的功能略多于CSS。要在所有复选框的父元素中添加一个边框，可以使用XPath的/..语法：
复制代码代码如下:
$("input:checkbox/..").css("border","1pxsolid#777");

jQuery中也加入了一些CSS和XPath中没有的选择器。比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名——也可以称作把表分段（striping）。使用jQuery不费吹灰之力就可以做到这点，这需要归功于odd伪选择器。下面这个例子使用striped类改变了表格中所有奇数行的背景颜色：
复制代码代码如下:
$("table.striped>tr:odd").css("background","#999999");

我们可以看到强大的jQuery选择器是如何简化代码的。不论您想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个jQuery选择器对它们进行定义。

使用插件扩展jQuery
与大多数软件不同，使用一个复杂的API为jQuery编写插件并不是非常困难。事实上，jQuery插件非常易于编写，您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的jQuery插件：
复制代码代码如下:
$.fn.donothing=function(){
returnthis;
};

虽然非常简单，但是还是需要对这个插件进行一些解释。首先，如果要为每一个jQuery对象添加一个函数，必须把该函数指派给$.fn。第二，这个函数必须要返回一个this（jQuery对象），这样才不至于打断方法链接（methodchaining）。
可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件，以替代使用css("background")，可以使用下面的代码：
复制代码代码如下:
$.fn.background=function(bg){
returnthis.css("background",bg);
};

清注意，可以只从css()返回值，因为已经返回了jQuery对象。因此，方法链接（methodchaining）仍然运作良好。
我建议在需要重复工作的时候使用jQuery插件。比方说，如果您需要使用each()函数反复执行相同的操作，那么可以使用一个插件来完成。
由于jQuery插件相当易于编写，所以有上百种可供你选择使用。jQuery提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器，以及我们可以想到的一切效果。有关插件的完整列表，请参阅参考资料。
最为复杂、使用最为广泛的插件要属界面（Interface），它是一种动画插件，用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面（UserInterface，UI）。界面对于jQuery来说就如Scriptaculous对于Prototype一样。
表单插件也同样流行且非常有用，通过它可以使用Ajax在后台中轻松地提交表单。这个插件用于处理一些常见的情况：您需要截获某个表单的提交事件，找出所有不同的输入字段，并使用这些字段构造一个Ajax调用。

相关文章