<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>www.mldnjava.cn,MLDN高端Java培训</title>
<script language="javascript">
var xmlHttp ;
function createXMLHttp(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
} else {
xmlHttp = new XMLHttpRequest() ;
}
}
function getCity(){
createXMLHttp() ;
xmlHttp.open("POST","allarea.xml") ;
xmlHttp.onreadystatechange = getCityCallback ;
xmlHttp.send(null) ;
}
function getCityCallback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes ; // 取得全部的allarea下的节点
var select = document.getElementById("city") ;
select.length = 1 ; // 每次选择一个
select.options[0].selected = true ; // 第一个为选中的状态
for(var i=0;i<allarea.length;i++){
var area = allarea[i] ;
var option = document.createElement("option") ;
var id = area.getElementsByTagName("id")[0].firstChild.nodeValue ;
var title = area.getElementsByTagName("title")[0].firstChild.nodeValue;
option.setAttribute("value",id) ;
option.appendChild(document.createTextNode(title)) ;
select.appendChild(option) ;
}
}
}
}
</script>
</head>
<body onload="getCity()">
<form action="" method="post">
请选择喜欢的城市:
<select id="city">
<option value="0"> - 请选择城市 -</option>
</select>
</form>
</body>
</html>

但是有个问题,就是,如果我把其中的

function createXMLHttp

换成如下实现,就会出错:

        function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
}

症状就是读取不了allarea.xml

<?xml version="1.0" encoding="UTF-8"?>
<allarea>
<area>
<id>1</id>
<title>北京</title>
</area>
<area>
<id>2</id>
<title>天津</title>
</area>
<area>
<id>3</id>
<title>南京</title>
</area>
</allarea>

到目前为止,我对Ajax的理解仍浮于表面,先把问题放在这里,到了合适的时机再来解决。

参考了这篇blog:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324849.html

[未解决]Ajax-读取并解析XML,动态生成select下拉列表框的更多相关文章

  1. angularjs小练习(分别通过ng-repeat和ng-option动态生成select下拉框)

    本次做一个简单的关于动态生成select的练习 在实现上有两种方式: 其一.通过ng-repeat来实现 其二.通过ng-option来实现 在页面效果上,两种实现的效果都一样 但是在数据选择的数据从 ...

  2. Python 解析 XML 文件生成 HTML

    XML文件result.xml,内容如下: <ccm> <metric> <complexity>1</complexity> <unit> ...

  3. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

  4. Java解析XML与生成XML文件

    XML是eXtensible Markup Language(可扩展标记语言)的简写形式,它是一种元标记语言(meta-markup language),也就是说它没有一套能够适用于各个领域中所有用户 ...

  5. AJAX请求返回JSON数据动态生成html

    1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...

  6. 动态生成select框内容

    获取动态数据,显示在select选项中,当前select在jsp页面中 <select > <option>这里放选中或者当前的数据</option> <%f ...

  7. java 中解析xml的技术

    最初,XML 语言仅仅是意图用来作为 HTML 语言的替代品而出现的,但是随着该语言的不断发展和完善,人们越来越发现它所具有的优点:例如标记语言可扩展,严格的语法规定,可使用有意义的标记,内容存储和表 ...

  8. Java高级特性 第15节 解析XML文档(3) - JDOM和DOM4J技术

    一.JDOM解析 特征: 1.仅使用具体类,而不使用接口. 2.API大量使用了Collections类. Jdom由6个包构成: Element类表示XML文档的元素 org.jdom: 解析xml ...

  9. java dom4j解析xml用到的几个方法

    1. 读取并解析XML文档: SAXReader reader = new SAXReader(); Document document = reader.read(new File(fileName ...

随机推荐

  1. POJ 3468 A Simple Problem with Integers 【树状数组】

    题目链接:id=3468">http://poj.org/problem?id=3468 题目大意:给出一组数组v[i],有两种操作,一种给出两个数a,b.要求输出v[a]到v[b]之 ...

  2. Spring MVC Beginner’s Guide勘误表

    - 17 submitted: last submission 09 Dec 2016 Page number: 213 Qauntity should be: Quantity Page numbe ...

  3. 戴尔大力宣传Ubuntu 对比与Windows的差异

    2010-06-18 10:58:36   11175 人阅读   作者:萧萧 编辑:萧萧[爆料]  评论(46)   戴尔近日上线了一个新的网页,对比Linux开源系统(主要是Ubuntu)与Win ...

  4. nyoj------擅长排列的小明

    擅长排列的小明 时间限制:1000 ms  |           内存限制:65535 KB 难度:4   描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序 ...

  5. PO_标准采购流程请购采购接受入库(流程)

    2014-06-03 Created By BaoXinjian

  6. Workflow_工作流的基本概念(概念)

    2014-06-01 Created By BaoXinjian

  7. OGG_GoldenGate日常监控(案例)

    2014-03-11 Created By BaoXinjian  

  8. Linux内存初始化(三) 内存布局

    一.前言 同样的,本文是内存初始化文章的一份补充文档,希望能够通过这样的一份文档,细致的展示在初始化阶段,Linux 4.4.6内核如何从device tree中提取信息,完成内存布局的任务.具体的c ...

  9. (三)RocketMq入门之独立线程处理业务

    一.示例代码 这段代码实现了一个独立线程监听在一个特殊的消息队列上,一旦收到消息就处理并发送给MQ,然后推送给所有的消费者. import com.alibaba.rocketmq.client.ex ...

  10. POJ 2299:Ultra-QuickSort

    Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 39397   Accepted: 14204 ...