比较简单的jquery教程 Easy Ajax with jQuery 中文版全集第1/3页
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("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!
当前1/3页 123下一页阅读全文
相关推荐
-
传递参数的标准方法(jQuery.ajax)
前台 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页&
-
javascript jQuery $.post $.ajax用法
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示. callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法). type (String) : (可选)官方的说明是:Type o
-
利用jQuery及AJAX技术定时更新GridView的某一列数据
看到一个问题:定时更新GridView的某一列中的状态文本.马上就有了思路:GridView最后会生成表格,所以我们在页面中通过Ajax更新表格的列,从而达到ajax更新GridView的效果. 具体实现: 准备一个xml文件,用于存储要更新的数据,在页面中启动一个定时器,每隔5秒钟调用一个函数,函数里边通过$.ajax获取xml中的数据,解析xml,遍历表格行,匹配要更新的数据,更新. getuserlist.xml 定义一个UserList的根节点,下边每个UserItem对应一条数据,UI
-
比较简单的jquery教程 Easy Ajax with jQuery 中文版全集第1/3页
Ajax在改变着web应用,并且带来了一种前所未有的桌面应用程序之外的震撼.但是,在这些宣传的背后我们应该意识到,其实ajax不过是--(X)HTML,Javascript以及XML,没什么新鲜的.在这个教程中,我将给你展示如何让简单的添加ajax到你的应用中去,并且教你如何使用一个流行的javascript库Jquey进行ajax开发. 1. 什么是ajax 你以前可能听说过ajax,或者至少用过ajax的应用--比如Gmail.简单的说,ajax就是使用javascript来异步地处理数据,
-
jQuery实现的AJAX简单弹出层效果代码
本文实例讲述了jQuery实现的AJAX简单弹出层效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
简单聊一聊原生Ajax与JQuery Ajax
目录 前言 一.Ajax简介. 二.Ajax概念 1.XMLHttpRequest对象 2.HTTP请求 3.XHR用法 三.jQuery-AJAX 总结 前言 没有学Ajax之前,就在想这到底是一门什么技术,问自己 什么是Ajax? Ajax有哪些重点概念? Ajax如何运用? 听说JQuery与Ajax更配? 一.Ajax简介. 1.AJAX全称:异步的JavaScript和XML 2.AJAX不是编程语言,是一种无需重新载入整个页面,能够更新部分网页的技术. 3.要想更新内容或者提交一个表
-
jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jQuery,MySQL 和 Ajax创建简单和有吸引力的 Ajax 搜索,这是继<使用jQuery打造一个实用的数据传输模态弹出窗体>第二篇jquery项目实际运用的教程,希望大家在开发项目的时候能够根据自己的实际情况灵活运用 点击搜索默认显示所有的结果 输入A之后显示的搜索结果 输入 p之后显示的
-
JQuery 又谈ajax局部刷新
JQuery 再谈ajax局部刷新. 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击退出弹出提示信息,然后确定后再次刷新用户名,回到了第一幅图片的位置 那这些简单的操作,都需要做一些什么工作呢? 1. 加载登录/(用户名-退出)的页面 2. 点击登录连接,打开登录对话框 3. 登录form表单提交时,对信息进行验证. 4. 验证通过后,关闭对话框,同时刷新1中的页面,显示"用户名-
-
JQuery中使用Ajax赋值给全局变量异常的解决方法
我们在用JQuery的Ajax从后台提取数据后想把它赋值给全局变量,但是却怎么都赋不进,为什么呢? 原因其实很简单,我们用的Ajax是异步操作,也就是说在你赋值的时候数据还没提取出来,你当然赋不进去,所以只要改成同步操作就行~ 方法1:先设置同步在进行Ajax操作 复制代码 代码如下: //在全局或某个需要的函数内设置Ajax异步为false,也就是同步$.ajaxSetup({ async : false }); //然后再进行你的Ajax操作$.post(地址, 参数, functi
-
从Ajax到JQuery Ajax学习
Ajax篇 XMLDocument和XMLHttpRequest对象 第一:创建XMLHttpRequest请求对象 复制代码 代码如下: function getXMLHttpRequest() { var xRequest=null; if(window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ xRequest=new Active
-
AJAX和jQuery动态加载数据的实现方法
什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous JavaScript And XML),这里的XML(数据格式)也可以是纯文本(Plain Text)或是JSON.简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容. 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服
-
初步了解JavaScript，Ajax，jQuery，并比较三者关系
jquery是对javascript很好的封装,而且很轻量级,可以近似的将其称其为框架,下面就来对比javascript与jquery对ajax的实现,以突出jquery对其封装后,在实现方便的简易性,而且不仅如此,用jquery代替javascript来实现一些功能对于浏览器的兼容性也会带来意想不到的好处. 一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML
-
jQuery下的Ajax调试步骤
下面通过图文并茂的方式给大家介绍jQuery下的Ajax调试步骤 在Ajax的使用过程中,最舒服的是一步成功,最头痛的是不成功,但是不知道去哪里看错误,然后看到错误之后又是哪里出的问题,所以今天说一下Ajax的使用调试: 先给大家说下项目需求:工具/原料,jQuery.js,编辑器,Chrome浏览器,wamp搭建环境 具体实现方法和步骤请看下文: 第一步:在同一目录下创建ajax.html和ajax.php 第二步:编写ajax.html,注意修改文件编码为utf-8,代码如下: <!DOCT