Ajax实现一个简单的国家、省份下拉框联动

很简单的一个例子，但是在做之前如果能够把逻辑上实现进行总结，对应总结，然后对应着实现相应功能，是一个很好的编码过程。废话不多说。

首先上一个欲实现功能的效果图，没做过任何美化：

上面一个下拉列表是国家数据，下面一个下拉框需要实现与Nations中所选择的国家相对应，很简单吧？

对此，大概提出实现思路：

（1）Province下拉框数据来自Nations下拉框，因此首先需要初始化Nations下拉框，给与国家数据；

（2）需要一个触发事件来引起客户端向服务器发送请求获取对应Nations的数据。这就牵涉两个方面，第一是触发事件，第二是怎么向服务器发送请求。第一个问题很简单，给Nations下拉框添加onchange事件就行；一般情况下，这样的两个下拉框都是用在类似用户注册填写资料的页面，在这种情形下不能在Nations中所选择的国家发生改变后刷新整个页面来获取省份数据，因此需要使用Ajax来实现局部请求数据。

（3）客户端传送数据方式采用Get方式，因为这次请求是为了获得满足条件的数据，通过url传送"条件“。

（4）服务器接收客户端传送过来的”条件“，然后从数据源（可以是数据库，也可以是缓存，也可以是某些数据变量）筛选出满足条件的数据发回给客户端。

（5）客户端将获取服务器发过来的数据，将数据填充进Province下拉框。

大体思路就是这样，下面开始按步骤实现。

二、代码实现

说明：代码前台使用了Javascript,没有使用Jquery.后台使用的为ASP.NET。

1、代码中引用的CommonAjax.js文件;

CommonAjax.js文件中封装了两个方法，createXmlHttp（）方法用于创建Ajax对象。因为在不同的浏览器中，创建Ajax对象的方法是不同的；gel（）方法封装主要是为了个人代码书写方便。

 1 //根据不同的浏览器使用相应的方式创建异步对象
 2 function createXmlHttp() {
 3     xhobj = false;
 4     try {
 5         xhobj = new ActiveXObject("Msxml2.XMLHTTP");//iemsxml3.0+
 6     } catch (e) {
 7         try {
 8             xhobj = new ActiveXObject("Microsoft.XMLHTTP");//iemsxml2.6
 9         } catch (e2) {
10             xhobj = false;
11         }
12     }
13     if (!xhobj && typeof XMLHttpRequest != 'undefined') {//Firefox,Opera 8.0+.safari,谷歌浏览器
14         xhobj = new XMLHttpRequest();
15 
16     }
17     return xhobj;
18 }
19 //获取Dom对象
20 function gel(nodeName) {
21     var q = document.getElementById(nodeName);
22     return q;
23 }

View Code