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

　　在使用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(originalRequest) {     var obj = originalRequest.responseXML;     var properties = obj.getElementsByTagName("property"); 　　　var name,value;     targetSelect.options.length =properties.length+1;     removeAllOpt(targetSelect);     if(targetSelect.options.length >= 0) {     　　targetSelect.options[0] = new Option(); 　　　　　targetSelect.options[0].value = "0"; 　　　　　targetSelect.options[0].text = "请选择";     }     for (var i=0,x=1;iproperties.length;i++,x++)     { 　　　　　name = properties[i].getElementsByTagName("name")[0].firstChild.nodeValue; 　　　　　value = properties[i].getElementsByTagName("value")[0].firstChild.nodeValue; 　　　　　targetSelect.options[x] = new Option(); 　　　　　targetSelect.options[x].value = value; 　　　　　targetSelect.options[x].text = name;     } }     function removeAllOpt(sel) {     var arr = sel.options;          for(var i=0; iarr.length; i++) {         sel.remove(i);     } } script>

注释：
targetSelect：全局变量，存储目标下拉框，也就是cityList

getCity函数用来获取某个省份的所有城市，启动Ajax,传递必要的参数。select参数代表源操作select框，即provinceList，target参数代表最终实现自动刷新的select框，即cityList，http参数代表提交至后台处理的PHP执行文件。

第8行：加入timeStamp=” + new Date().getTime()的原因是为了防止返回内容无法交互显示，即无法刷新。

第13行：Ajax Form提交有两种方式:get和post，和一般情况下的表单提交后PHP进行处理方式的方式是一样的。

特别注意：由于Prototype get出去的内容编码是UTF8的，如果和数据库或者页面的编码不符，会导致出现中文乱码问题，需要使用相关的编码转换函数进行编码转换，如果你的运行环境支持iconv函数，你也可以使用iconv函数进行编码转换。

showDestObj函数用来处理返回的内容，并通过DOM操作实现无刷新页面内容显示。一般情况下返回的内容格式有两种，一种是text格式，一种是xml格式，此处我们返回的内容格式是xml格式的，所以使用了responseXML，如果是text格式，请使用responseText。

第20行：获取指定标签名对象的集合，getElementsByTagName() 函数用来返回带有指定标签名的对象的集合。后台生成的XML文档循环生成某个省份下城市的相关信息，XML格式为：

1 2 3 4 5 6 7 8 9 10 11 12

version="1.0" encoding="GB2312"?> > > >城市ID> >城市名称> > > >城市ID> >城市名称> > >

第23行：removeAllOpt函数用来每次处理返回内容时清空目标select框

第25~38行：将Prototype解析XML后的内容赋予目标select框，以便在页面上显示。

调用方法：

1	select name="provinceList" onChange="getCity(this,form1.cityList,'../ajax/province.php')">

总结：

　　以上就是在使用PHP进行WEB2.0网站开发时，如何利用Prototype读取XML文档实现二级联动下拉框的Ajax实例，是一个比较简单入门的实例，更复杂的应用你可以去Prototype的官网查看具体帮助文档，网址为：http://www.prototypejs.org/learn，下次分享如何利用Jquery来实现上述功能。

　　注：PHP网站开发教程-leapsoul.cn版权所有，转载时请以链接形式注明原始出处及本声明，谢谢。