Prototype Ajax读取XML文档实现联动下拉框实例-PHP教程-爱易网页

Prototype Ajax读取XML文档实现联动下拉框实例

日期：2011-12-30　浏览次数：20577 次

　　在使用PHP进行WEB2.0网站开发时，时常需要用到Ajax技术来增加用户体验，当前比较流行的Ajax开发框架有Prototype，Jquery，Lightbox等，今天和大家分享如何利用Prototype和XML文档进行交互以实现Ajax联动下拉菜单的例子。

　　Ajax(Asynchronous JavaScript and XML)使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。

Ajax实例（example）说明

　　主要功能：通过Prototype解析xml内容，实现省份和城市之间的二级联动，依此类推，也可以延伸至三级，四级联动

准备工作

　　下载Prototype，并放至相关开发目录，实例中放至在js目录下，当前Prototype最新版本为1.6，下载地址为：http://www.prototypejs.org/download

　　建立省份和城市的相关数据库

　　新建Form表单，并建立两个Select框，此处省份Select框命名为ProvinceList，城市Select框命名为CityList

代码实例

1	<script src="js/prototype.js"></script>

注释：引入prototype.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<script>

var targetSelect;

function getCity(select,target,http)

{               

    targetSelect = target;

    var url = http +
						"?timeStamp="
						+
						new Date().getTime()
						+
						"&";

    var pars =
						'province_id='+select.options[select.selectedIndex].value;

　　　var myAjax =new Ajax.Request(

        url,

        {method:'get',parameters:pars,onComplete:showDestObj}

        );      

    }

function showDestObj

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Prototype Ajax读取XML文档实现联动下拉框实例

相关资料更多>

推荐阅读更多>