原文作者:Akash Mehta
原文链接:Easy Ajax with jQuery
译者:令狐葱
原文作者:
Akash Mehta原文地址:http://www.sitepoint.com/article/ajax-jquery
翻译:
令狐葱 Ajax
在改变着web应用,并且带来了一种前所未有的桌面应用程序之外的震撼。但是,在这些宣传的背后我们应该意识到,其实ajax不过是——(X)HTML,
Javascript以及XML,没什么新鲜的.在这个教程中,我将给你展示如何让简单的添加ajax到你的应用中去,并且教你如何使用一个流行的
javascript库Jquey进行ajax开发.
1. 什么是ajax
你以前可能听说过ajax,或者至少用过ajax的应用--比如Gmail.简单的说,ajax就是使用javascript来异步地处理数据,而不是一下子重载整个页面.SitePoint上有个教程
a good introduction to Ajax.另外,ajax这个词出自Jesse James Garrett的
这篇著名的文章.
不幸的是,关于ajax深入的实践教程可以说少之又少,还有就是ajax中使用的
XMLHttpRequest
类对初学网页开发的人来说有很大的难度.不过庆幸的是有一大批javascript库相继出现,为实现ajax提供了简单的方法.我们今天要用到的Jquery就是其中之一.
2. 什么是JQuery
Jquery是一个成熟的Javascript库,它提供许多其他库没有的特性.当然也得承认,它有19K之大,不想moo.fx那样只有3KB之轻.你可以在
这里看到对许多javascript库性能以及其他方面的比较数据.
3. 先验知识
要学习此教程,你需要有基本的javascript只是,如果你懂c风格的语言,那么你可以对javascript很快上手.其实不过是大括号,函数声明以及可有可无的行末分号(对Jquery来说;为必须).如果你想学习javascript,可以看
这个教程. 另外,既然我们讨论的是web应用,基本的html只是自然是必不可少的.
4. Jquery 101
让我们简单浏览一下jQuery.要想使用jQuery,首先你必须下载这个库.下载地址在
这里(目前版本1.1.2).jQuery的语法非常简单:找到,然后做.我们从文档中选择元素则使用
$()
.这个符号就相当于
document.getElementById(),不过除了支持ID外,它还支持css选择符以及一些XPath选择符. 而且,它可以返回一个元素的数组.好,也许举个例子可以更好的说明
$()的功能.
我们想使用函数来操作我们的选择符.比如,把
"Hello World!" 添加到每个class为foo的div上去,然后设置颜色为红色,我们可以这样写代码:
$("div.foo").append("Hello World!").css("color","red");
很简单啊!一般情况下,这需要两行代码来完成:
$("div.foo").append("Hello World!");
$("div.foo").css("color","red");
jQuery的链接方法可以是允许你连写你的代码,这点别的库恐怕没有.有很多jQuery的函数不需要对象,也就是说独立工作,许多ajax相关的函数都这样.比如,我们将会使用的post函数,调用方式为
$.post(parameters)
. 更多jQuery函数信息可以来
online documentation 或者
visualjquery.com.
5. 示例一:我们的第一个ajax程序
作
为一个例子,我们将做一个交互概念生成器.简单的说就是让我们从列表中随机选择两个选项,然后组合成一个词组.这个例子中我们将使用web2.0特性的词
语(像'Mashup', 'Folksonomy', 'Media'
等等),通常情况下我们从文本文件中获得这些选项.为节省用户用javascript下载每一个组合(或者至少每一个元素)的时间,我们将在服务器端快速
生成它,并且使用jQuery在客户端获取到它.jQuery可以很好的和javascript结合使用,所以你将发现在代码中使用它将使工作变得十分容
易.
服务器端代码(php):
简单起见,我们使用最简单的代码来做我们的概念生成器.不要担心他是如何工作的,注意看它是干什么的:输出一句话.注意,这段代码没有输出xml,他只是输入一个纯文本:
<?php
header("<a href="http://www.sitepoint.com/glossary.php?q=C#term_21" title="Cache, pronounced "cash", refes to a stored copy of (or pointers to) previously accessed data.">Cache-Control: no-cache");
// Ideally, you'd put these in a text file or a database.
// Put an entry on each line of 'a.txt' and use $prefixes = file("a.txt");
// You can do the same with a separate file for $suffixes.
$prefixes = array('Mashup','2.0','Tagging','Folksonomy');
$suffixes = array('Web','Push','Media','GUI');
// This selects a random element of each array on the fly
echo $prefixes[rand(0,count($prefixes)-1)] . " is the new "
. $suffixes[rand(0,count($prefixes)-1)];
// Example output: Tagging is the new Media
?>
这里,我们使用
Cache-Control
头选项是因为IE总是为同一个地址建立缓存,甚至页面内容有变化时也是.很明显,这对我们的例子很不利,因为我们在每次加载的时候重新生成一句话.我们也可以使用jQuery生成一个随机数加到地址的后边,不过这不像在服务器端这样处理比较简单.[译者著:其实作者在这里提供了ajax和IE cache冲突的两种解决方案.]
客户端代码(html)
可
以开始编写前端代码了,然后我们就可以把ajax加进去了.
我们需要做的仅仅是加一个按钮,好让用户点击一下获得一句新的语句,还有一个div标签,好让我们在从服务器端接收到语句的时候显示在div里面.我们将
使用jQuery选中这个div以及加载返回的那句话,我们可以使用div的id来引用它.
如果需要,你可以加载这句话到不同的元素标签中,这可能需要使用class了.不过这里,我们仅仅需要使用id就够了.此页面body标签中的内容为:
<input type="submit" id="generate" value="Generate!">
<div id="quote"></div>
一般说来,我们需要为这个按钮(就是这个id为generate的input)加上一个冗长的
onSubmit
事件. 有时,我们用onSumit事件调用一个Javascript函数. 但是在jQuery里面,我们设置不需要修改任何html代码,我们可以简单的实现行为(事件处理)和结构(html代码)的分离.
客户端代码(jQuery)
终
于该使用jQuery把我们的后台和前台结合到一起了.前面我提到我们可以使用jQuery从DOM中选择元素.
首先,我们应该ixuanze这个按钮,并给它一个onClick事件响应.
在这个事件代码中,我们可以选中div并且载入内容.下面是click事件响应的写法:
$("element expression").click(function(){
// Code goes here
});
可能你已经知道,在CSS里选择一个元素的时候我们使用#来使用元素的id属性. 你可以在jQuery里使用同样的语法.因此,要选择那个按钮,我们可以使用#generate. 注意,这种语法可以让我们把事件处理函数定义成匿名的.
Mark Wubben's JavaScript Terminology page 提供了详细的关于匿名函数的解释,有兴趣可以参考.
我们将要使用jQuery中一个比较高级的ajax函数:load(). 假设我们的代码保存为script.php.我们这样把它和我们的客户端整合起来:
$("#generate").click(function(){
$("#quote").load("script.php");
});
只有:3行代码!现在我们已经做了一个完整的ajax随机语句生成器了!不错!
问
题是javascript代码并不是在一个浏览器加载完就执行的函数内.
这样的话,这段代码就会试图去关联一个可能还没有被加载的元素.一般情况下我们使用window.load来处理这个问题,不过这种方法的局限性在于,
window.load只在所有的东西(图片及其它)被加载完成后加载一次.我们对等待这些图片的加载可能毫无兴趣--我们只是需要去获得DOM中的元素
罢了.
幸运的是,jQuery有一个
$(document).ready()函数,如其名,它在DOM被加载完之后就被执行.
完整的代码
下面是完整的代码,使用
$(document).ready()以及一些简单的html和css:
<html>
<head>
<title>Ajax with jQuery Example</title>
<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$("#generate").click(function(){
$("#quote p").load("script.php");
});
});
</script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="quote"><p> </p></div>
<input type="submit" id="generate" value="Generate!">
</div>
</body>
</html>
代码可以在这里下载,注意你的jquery需要保存在php文件的同目录,并且名为
jquery.js
.现在你已经熟悉jQuery了,让我们做些更复杂的:表单元素和XML处理,这才是真正的ajax!
添加评论
相关文章:
Ajax 的六个误区
如何提高页面响应速度
AJAX 域名选择工具
分享到:
相关推荐
### Easy Ajax with jQuery知识点概述 #### 1. Ajax简介与应用 - **定义**: Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术。它通过在后台与服务器进行少量数据交换,使得网页可以在不...
在“Easy Ajax with jQuery”这个中文教程中,我们将深入理解Ajax和jQuery的基础知识。 **什么是Ajax?** Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许网页在不重新加载整个页面的...
- **jquery-1.4.4.min.js**:Easy-UI依赖于jQuery库,这个文件是jQuery的1.4.4版本的压缩版,用于处理DOM操作和事件处理。 - **easyloader.js**:Easy-UI的加载器,可以自动加载所需的组件,简化开发流程。 - **...
1. **jQuery**: jQuery 是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery EasyUI就是在jQuery的基础上,提供了一系列易于使用的UI组件。 2. **EasyUI组件**: - **树形控件...
easyajax jQuery插件 相依性 -jQuery的 很高兴有 该插件不是必需的,但是如果您想显示Toastr通知和Sweetalert,只需集成Toastr和Sweetalert插件,简单的Ajax会自动使用这些插件代替警报 -引导程序 -敬酒 甜美的 &...
1. **引入JavaScript文件**: 在网页中通过`<script>`标签引用EasyAjax的JavaScript文件,确保它在需要使用Ajax功能的页面上加载。 2. **服务器端配置**: 在ASP.NET项目中添加并配置这三个类,可能需要将它们加入到...
基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...
《jQuery Easy UI 离线API文档详解及CSS设计技巧》 jQuery Easy UI 是一个基于jQuery的前端开发框架,它提供了丰富的UI组件,使得开发者能够快速构建出美观且功能强大的Web应用。离线API文档是开发者在无网络环境下...
`EasyUI官方API中文版.exe` 文件很可能是 EasyUI 的官方文档的中文版,通常包含详细的组件用法、示例代码和API参考,是学习和使用 EasyUI 的重要参考资料。开发者可以通过查阅该文档,了解每个组件的属性、方法、...
《jQuery 1.7.2 中文版与 jQuery 1.6 英文版详解》 jQuery 是一个广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript编程,提供了丰富的选择器、DOM操作、事件处理、动画效果以及Ajax交互等功能。本篇文章...
jQuery的核心特性包括选择器、DOM操作、事件处理、动画以及Ajax。 1. **选择器**: jQuery 提供了CSS选择器,如`$("#id")`用于选取ID为指定值的元素,`$(".class")`用于选取具有特定类名的元素,以及`$("tagname")`...
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...基于jsp+servlet+jquery+easy-ui+ajax的学生成绩管理系统源码+项目说明.zip
**jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和样式,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...
1. **引入依赖**:首先需要在页面中引入jQuery库,然后引入EasyTabs.js 文件。例如: ```html <script src="https://code.jquery.com/jquery.min.js"></script> <script src="path/to/easytabs.jquery.js"> ``` ...
jQuery Easy-UI 是基于jQuery和jQuery UI的一个轻量级框架,它简化了jQuery UI的使用,提供了一套易于上手的预设样式和组件。Easy-UI的主要目标是让开发者能快速构建出美观且功能丰富的Web应用。 - **组件精简**:...
### jQuery Easy UI 知识点概览 #### 1. 基本拖放功能 在jQuery Easy UI中,拖放功能是通过`draggable()`方法实现的,它允许将HTML元素变成可拖动的对象。在给定的教程中,通过创建三个不同的`<div>`元素并使用`...
### DWR:简易 AJAX 对 JAVA 的支持 #### 一、DWR 概述 DWR(Direct Web Remoting)是一个开源库,它简化了 AJAX 在 Java Web 应用中的使用方式。通过 DWR,开发人员可以轻松地在浏览器端调用服务器端的 Java 方法...
Easy File Locker 1.2 汉化版 使用LZMA2算法压缩 请使用7-Zip解压 (WinRAR 需要 4.0版本+ 才能解压)
易阿贾克斯 Based jQuery to build easy ajax api, to simplify ajax request for:1. Dialog2. Form, and submitting3. HTTP asynchronous loading4. others先决条件 1. jQuery2. jQuery Dialog Model安装 1. Setup ...