日期:2011-12-30  浏览次数:20587 次

  在使用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