AJAX的jQuery实现入门(一)
作者:Robin 来源:Rlog 发布时间:2008-05-01 12:55:00
Ajax在网上已经叫喊了好几年了, 但是还是有很多像我这样的新手没掌握它, 像这样能改善交互体验的技术不会用真是很遗憾呢. 所以我就把我学到的记录下来,供高手指正,新手共勉.
首先,稍微扫扫盲: AJAX = Asynchronous JavaScript And XML , 这里有三个关键词: Asynchronous, javascript和XML. 用一个图来表示它们的关系(我自己的理解,若有不妥望指出):
这里绿色箭头是读取数据库的流, 蓝色的箭头是写入数据库的流.
我们不去研究后台程序和数据库的交互过程, 只是来看看前面的东西.
大部分时候我们都是在读数据, 而写数据库的机会先对少一些. 假设现在有一个back.asp的文件读取了数据库的一条数据, 然后打印出来:
... ...
response.write("<MemberList>")
response.write("<Member>")
response.write("<Name>" & sname & "</Name>")
response.write("<Age>" & sage& "</Age>")
... ...
response.write("</Member>")
response.write("</MemberList>")
... ...
并且假设将来生成的文件内容能像下面那样的:
<memberlist>
<member>
<name>Robin</name>
<age>23</age>
</member>
<member>
<name>Jack</name>
<age>13</age>
</member>
</memberlist>
我省略了上下文, 至于是怎么读到数据的我们不去关心它. 只要知道这个文件运行的结果会生成如上的XML文件就ok, 简单的一个步骤我们完成了 “后端程序”–>”XML”的过程.
接下来就是jQuery大显身手的时候了. 我们会让jQuery读取并解析这个XML文件, 并且将人名以一个列表的形式显示在页面上. 废话少说, 上代码:
JQuery技巧总结及下载
JS代码:
$(document).ready(
function (){
$.ajax({
url: 'data.xml', //把刚才生成的那段和这个文件放在同级目录里,并起名叫data.xml.(其实应该是back.asp, 这里为了测试方便)
type: "POST",
ContentType: "text/xml;utf-8", //这里需要加个utf-8
dataType:'xml',
success:function(xml)
{
alert(xml); //如果alert出来时object就对了
$(xml).find("Ctg").each(function(i){ //遍历XML对象里的Member节点
var id_value=$(this).children("Name").text(); //取文本
$('<li></li>').html(id_value).appendTo('dl'); //最后输出
});
},
error:function(){alert('Error!');}
});
});
HTML代码:
<dl></dl> //上面的js会将解析好的内容追加到这里里面
赶紧去试试吧, 是不是很简单? 这里只是显示出了人名的列表, 并没有显示年龄. 我们可以使用一个两层的循环嵌套达到那样的目的. 就留给大家自己发挥吧.
如果你实验不成功 点这里下载 我做好的例子.
如果下载地址失效asp之家为您提供了本地下载地址:jQuery_ajax.rar (14.21 KB)
读数据就这样了,下次试试怎么把页面的数据写进数据库里.
接着阅读:AJAX的jQuery实现入门(二)
猜你喜欢
- <%''调用例子'Dim int_RPP,int_Start,int_showNumberLink
- 很久没有跟其他人做重构思想方面的交流了,可能大家都觉得不太好意思讨论,特别是“分离”的思想这么基础的话题,拿出来说怕会被“笑话”。做为页面重
- 2009年2月24日,Safari 4.0 beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CS
- 图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项
- 阅读上一篇:css基础教程属性篇 本篇主要介绍css对边框(border)的属性控制和链接(link)的伪类选择器.边框(border):
- 本周的豆知识分享就来深入研究一下window.event对象。请先看看下边的代码片断。 <button id=”btn”&g
- 如今,基本每个网站都会需要到Tab切换展示内容的滑动门效果应用,这种效果可以在更少的页面空间内,展示更多的网站内容,节约空间,方便用户集中操
- 一、功能简述正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我
- 有时候,我们需要替换指定标签外的内容,而保留标签里面的内容不替换。比如当我们要在浏览器中显示出编辑器显示的原始格式时、需要将普通换行符“\n
- 几年前,看到一台湾人写的一段程序(好像是《日语基础》),在网页上实现音视频与文字的同步播放(就是音视频播到哪部分,相应的文字就亮显,点击某一
- 问题:关于如何生成随机记录(二)如何从指定表中随机抽取一定量的记录?sql server 中 select top 10 * fr
- Microsoft SQL Server 2000的会话上下文信息使应用程序得以设置二进制值,以便在同一会话或连接上运行的多个批处理、存储过
- 这里主要是讲在asp下两次由access数据库升级到sql server数据库后的经验及注意事项,其它语言也可以参考一下。欢迎讨论补充。1.
- 代码如下:set fso=server.createobject("scripting.filesystemobject"
- 先让我们看一个例子,了解什么是模式化窗口。以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态,通过保存形象的方式买一件衣服时,弹
- 前提条件:1.安装好Wampserver64(版本不限)2.Wampserver64软件启动后 变为绿色如:3.在数据库里面创建好名为&am
- ajax编程获取Google的PageRank3(PR值)及所在目录,想给你的站增加Google PR查询的功能吗?如果你不会就看看本文吧,
- InstrRev描述:返回某字符串在另一个字符串中出现的从结尾计起的位置。语法:InstrRev(string1, string2
- MYSQL数据库安装完成后,默认最大连接数是100,一般流量稍微大一点的论坛或网站这个连接数是远远不够的,增加默认MYSQL连接数的方法有两
- 或许你也经历过,很多人都说一个女人很漂亮,而你觉得很一般。有时候,我也尝试理解为什么会对某个女人情有独钟。通常,我用迷人来描述,但这个&qu