js中级联下拉，与用解析xml方式通过ajax来传送数据

80.  现在来讲一下，下拉，一点华北区，华北区下面都有哪些省，其实这个做法有多种，我们可以归纳有三种吧，

一。一进来把所有的数据都读进来，把所有的大区都读进来，把各个大区对应的省全都读出来，放到js的一个数组里，你一点分销大区，响应一个事件，然后
到数组里面取出来，取出来之后用dom操作下拉列表给他添上。这种方案不会刷新的，因为用dom直接就操作我们的下拉列表，但是用dom有一个缺点，他会把所有数据全都读出来，比如说你一点这个页面一进来他就把所有的数据给读出来了。我也许只想看华南区，结果他会把所有的数据全读到客户端，例如，假设现在别人又加了一个省呢？你肯定是看不见的。他加到数据里了，他就不再读了，除非你再点一下。

二。另外一种方案，一点他，就是请求一个servlet到数据库中去查询分销大区，然后一刷新，页面上就出来了，这个结果还得保持住，再把第二个分销省里面的东西给加上，这是以前的做法挺多的。这种方案给人的感觉就是不好，总刷新，response回来，response回来.

三。现在采用ajax来做这个下拉，这种方式有一个好处，比如谁要是加入了一个省，我们肯定是能即时拿到的。还有一个好处，他不刷新 啊。

81.  现在开始做了，你得有一个方法能得到大区的数据啊，还得有一个取得省的方法。
public Map<Integer,String> getRegionList(){
//取得区域我们就可以用下面的方法了
return getProvByRegionId(10000);里面所有的东西都是这下面的。大区就是10000啊，比如华北，华南都是1000

}
//取得省
public Map<Integer,String> getProvByRegionId(int id){
String sql = "select id,name from t_client where pid=?";
}

82.  第一个大区是一进来里面就从数据库里面拿到值 放进来的，在jsp页面用for循环读取出来的，你是了for读一个map读出来的。
接下来省，应该是选中大区了，响应一个事件， 再去请求数据库查出来。


83.  你在servlet里面不能输出map，map在ajax里面是不认识的。你可以把他搞成一个字符串啊比如搞成下面这样
10023,吉林省#10025,辽宁省#10026,黑龙江  我在servlet里把map解开，然后生成这么一个串，然后打印到ajax引擎里面，然后通过 responseText把他取出来，取出来之后 ，我用Js把上面那一串给解开 ，解完之后，我就可以动态地用js来操作这个dom，把他给写上去。

或者你不想用,#  你也可以用 - 或者全逗号，你自己怎么设你就怎么解吧，这种做法不标准，假设你想把这个数据传递给别人，假设专门做前台的是一个人，做后台的是一个人，你往这给他发数据，就不太标准，你俩还得约定。

84.   所以我们用  标准文档  xml   示例做法如下
<items>
    <item>
        <id>10023</id>
        <name>吉林省</name>
    </item>
</items>


85.  其实你使用前面的自己定义串再自己解，或者采用另一种用xml来做，都能做出来，但是第一种效率上肯定会好很多，因为前面那样做没有任何多余的东西。


86.  现在采用dom4j来解析xml。现在是写，以前是读啊，关于这个第三方的东西，就通过第三方的例子来使用，


87.  document代表整篇的xml文档。
现在来写啊，先创建一个document
Document doc = DocumentHelper.createDocument();
Element rootElt = doc.addElement("items");
Element itemElt = rootElt.addElement("item");
Element idElt = itemElt.addElement("id");
idElt.setText("10023");
Element nameElt = itemElt.addElement("name");
nameElt.setText("吉林省");

//现在就写完了，但是你得输出啊
XMLWriter writer = new XMLWriter(new FileWriter("c:\\testXml.xml"));
writer.write(doc);   把这个文档写了
就放这吧，关于这个资源的释放最好放到finally里面
writer.close();
System.out.println("写xml成功");


88.  你这么一写，他这个xml文档的默认字符编码是utf-8的，下面一运行，就会生成一个xml文件，编码是Utf-8的。


89.  你还可以这么一写他就是指定的编码方式的了。
OutputFormat format = OutputFormat.createPrettyPrint();
format.setEncoding("GBK");
XMLWriter writer = new XMLWriter(new FileWriter("c:\\testXml.xml"),fromat);
生成一个GBK编码的xml文档。


90.  他说xml编码一般使用utf-8编码。


91.  你看啊，他现在是写成了一个文件，我们要求的肯定不是把文件发过去，发到我们的ajax，我们
应该要的是他的文本，也就是字符串，那怎么样能拿出字符串呢？

92.  要拿字符串的话
在Element nameElt = itemElt.addElement("name");
nameElt.setText("吉林省");
String.xmlString = doc.asXML();
System.out.println(xmlString);就把xml里面的东西当作一个串打印出来。如
<?xml  >
<items><item><id></id></items>没有写全


93.  往客户端写东西，你得注意了编码和类型啊，这里是写一个xml文件过去，所以就得这么写
response.setContentType("text/xml;charset="UTF-8");在这里使用Utf-8了，其实使用utf-8比较广泛，有些框架，比如 js可能还出问题，因为utf-8是全球统一的一个编码。


94.  他是这么做的，写了一个servlet，在地址栏一运行这个servlet并且传递  区域代码SelectProvServlet?regionId=10021就自动生成一个xml文档在浏览器里面。


95.  现在使用js来对xml进行解析，要求是这样，在分销商级别分布图，点下拉的区域，选中之后，应该去请求一个servlet 
onchange="selectProv"

function selectProv(field){
field.value;
}

if(xmlHttp.status == 200){
alert(xmlHttp.responseTest);这样就把那个
<?xml  >
<items><item><id></id></items>这样的字符串拿到了。
}

96.  如果像以前那个，用逗号表达式来写的话，返回的东西   10001，吉林省#   这样解析起来不是更好吗？你看现在是一个这样的东西返回来，你怎么解啊，


97.  有一个responseXML  他就会给我们生成一个document。
if(xmlHttp.status == 200){
var doc = xmlHttp.responseXML();这不就是刚才那一串不。
//得到一个数组
var items = doc.getElementsByTagName("item");
for(var i=0;i<items.length;i++){
    var id = items[i].childNodes[0].childNodes[0].nodeValue;
    var name = items[i].childNodes[1].childNodes[0].nodeValue;
}
}
<id>100023</id>在xml中比如这个id标签里面的值也是一个节点  。所以上面得继续深入.childNodes[0].nodeValue


98. 上面的id  name 取值也有其它的取法。我们可以取他的第一个，他有first相关方法，他说什么他找给我们的那个帮助文档里面，没有这个。
var id = items[i].childNodes[0].firstChild.nodeValue;
var name = items[i].childNodes[1].firstChild.nodeValue;

99.  add()方法用于向<select>添加一个<option>元素


100.  构造Option下拉列表
Option o = new Option(name,id);
provSelect.add(o);  会报缺少分号的错误，注意啦，js  不是强类型的，


  var   o = new Option(name,id);
provSelect.add(o);

他在不刷新的情况下操作dom.

现在做是做好了，但是效果是点中华南区，分销的省出来了，再点其他区，分销省不会变了，所以你得把以前的清了。   在加之前清一下不就可以了吗？
在for循环语句之前，把数组设置为0不就清了吗？
provSelect.options.length = 0;
第次清完，再把全部这一项给加上
var o = new Option("全部",0);
provSelect.add(0);


还有一个问题，你点分销大区里面的全部，分销省里面的  所有分销商这一项不应该出来，你一点全部，后面一个应该还是全部，是应该你把全部这个  值0,给传到servlet里面去了，他也按0去查，所以你把这个   js   函数给加一个条件，让他  0除外。