初学ajax,现在想读取xml配置文件里面的数据,文件有两个:
dynamicContent.xml
dynamicContent.html
配置文件dynamicContent.xml如下:
<?xml version="1.0" encoding="UTF-8">
<properties>
<property>
<address>XIHU</address>
<price>$80000</price>
<comments>XIHU</commentc>
</property>
<property>
<address>GONGSHU</address>
<price>$100000</price>
<comments>GONGSHU</commentc>
</property>
<property>
<address>BINGJIANG</address>
<price>$110000</price>
<comments>BINGJIANG</commentc>
</property>
</properties>
页面dynamicContent.html代码如下:
<?DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>dynamicContent</title><script language="javascript">
var xmlHttp;
<!-- 创建XMLHttpReqquest对象 -->
function createXMLHttpRequest() {
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
<!-- 查找xml文件 -->
function doSearch(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET" , "dynamicContent.xml" , true );
xmlHttp.send(null);
}catch(exception){   
        alert("您要访问的资源不存在!");   
    } 
}
<!-- 判断状态 -->
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200 || xmlHttp.status == 0){ 
clearPreviousResults();
parseResults();
}
}
}function clearPreviousResults(){
<!-- 得到span -->
var header = document.getElementById("header");
<!-- 如果有值则去掉 -->
if(header.hasChildNodes()){
harder.removeChild(header.childNodes(0));
}
<!-- 得到表格的tbody -->
var tableBody = document.getElementById("resultsBody");
<!-- 如果有值则去掉 -->
while(tableBody.childNodes.length > 0){
tableBody.removeChild(tableBody.childNodes(0));
}
}
function parseResults(){

var results = xmlHttp.responseXML; var property = null;
var address = "";
var price = "";
var comments = ""; var properties = results.getElementsByTagName("property");
alert("===================================");
alert("size="+properties.length);
for(var i = 0 ; i < properties.length ; i++){
property = properties[i];
address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
alert("=============="+address);
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
alert("=============="+price);
comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
alert("=============="+comments);
<!-- 添加一行数据 -->
addTableRow(address , price , comments);
}

var header = document.createElement("h2");
var headerText = document.createTextNode("Results:");
header.appendChild(headerText);
document.getElementById("header").appendChild(header); document.getElementById("resultsTable").setAttribute("border","1");
}
<!-- 添加tr元素 -->
function addTableRow(address,price,comments){
alert("addTableRow");
var row = document.createElement("tr");
var cell = createCellWithText(address);
row.appendChild(cell); var cell = createCellWithText(price);
row.appendChild(cell); var cell = createCellWithText(comments);
row.appendChild(cell); document.getElementById("header").appendChild(row);
}
<!-- 添加td元素 -->
function createCellWithText(text){
alert("createCellWithText");
var cell = document.createElement("td");
var textNode = createCellWithText(text);
cell.appendChild(textNode);

return cell;
}</script>
</head>
<body>
<h1>Searching</h1>
<!--ifream id="beforeshr" name="beforeshr"
style="width:0px;heigth:0px;border:0px"
src="blank.html">
</ifream>
<a href="server.html" target="beforexhr">call the server</a--><form action="#" method="post" onsubmit="return doSearch();">
Show listing form
<select>
<option value="50000">50000</option>
<option value="100000">100000</option>
<option value="150000">150000</option>
</select>
to
<select>
<option value="100000">100000</option>
<option value="150000">150000</option>
<option value="200000">200000</option>
</select>
<input type="button" value="Search" onclick="doSearch();" />
</form>
<span id="header"></span>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody"></tbody>
</table>
</body>
</html>现在我的问题是:
alert("size="+properties.length);
这里的properties.length为0,所以下面的for循环无法执行,是不是xml文件和页面存放的路径有问题,所以没有值?
问题补充:
文件放在桌面同一个文件夹下

解决方案 »

  1.   

    <?DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>
    <title>dynamicContent</title>
    </head>
    <body>
    <h1>Searching</h1>
    <!--ifream id="beforeshr" name="beforeshr"
    style="width:0px;heigth:0px;border:0px"
    src="blank.html">
    </ifream>
    <a href="server.html" target="beforexhr">call the server</a--><form action="#" method="post" onsubmit="return doSearch();">
    Show listing form
    <select>
    <option value="50000">50000</option>
    <option value="100000">100000</option>
    <option value="150000">150000</option>
    </select>
    to
    <select>
    <option value="100000">100000</option>
    <option value="150000">150000</option>
    <option value="200000">200000</option>
    </select>
    <input type="button" value="Search" onclick="doSearch();" />
    </form>
    <span id="header"></span>
    <table id="resultsTable" width="75%" border="0">
    <tbody id="resultsBody"></tbody>
    </table>
    <script language="javascript">
    var xmlHttp;
    function createXMLHttpRequest() {
    if(window.ActiveXObject){
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
    }
    }
    function doSearch(){
    createXMLHttpRequest();
    try{
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET" , "dynamicContent.xml" , true );
    xmlHttp.send(null);
    }catch(exception){  
      alert("您要访问的资源不存在!");  
      } 
    }
    function handleStateChange(){
    if(xmlHttp.readyState == 4){
    if(xmlHttp.status == 200 || xmlHttp.status == 0){ 
    clearPreviousResults();
    parseResults();
    }
    }
    }function clearPreviousResults(){
    var header = document.getElementById("header");
    if(!!header.childNodes.length){
       //alert(header.childNodes.length);
    header.removeChild(header.childNodes[0]);
    }
    var tableBody = document.getElementById("resultsBody");
    while(tableBody.childNodes.length > 0){
    tableBody.removeChild(tableBody.childNodes[0]);
    }
    }
    function parseResults(){var results = xmlHttp.responseXML;var property = null;
    var address = "";
    var price = "";
    var comments = "";var properties = results.getElementsByTagName("property");
    for(var i = 0 ; i < properties.length ; i++){
    property = properties[i];
    address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
    price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
    comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
    addTableRow(address , price , comments);
    }var header = document.createElement("h2");
    var headerText = document.createTextNode("Results:");
    header.appendChild(headerText);
    document.getElementById("header").appendChild(header);document.getElementById("resultsTable").setAttribute("border","1");
    }function addTableRow(address,price,comments){
    var row = document.createElement("tr");
    var cell = createCellWithText(address);
    row.appendChild(cell);var cell = createCellWithText(price);
    row.appendChild(cell);var cell = createCellWithText(comments);
    row.appendChild(cell);document.getElementById("resultsBody").appendChild(row);
    }function createCellWithText(text){
    var cell = document.createElement("td");
    var textNode = document.createTextNode(text);
    cell.appendChild(textNode);return cell;
    }</script>
    </body>
    </html>
    错误一堆,自己对比着看看吧,去服务器端调试,我这儿测试了可以调通
      

  2.   

    你确定是在服务器端调试的吗?我这儿可以啊,
    是不是IE下测试出不来结果?firefox下试试我这而得结果:
    XIHU         $80000 XIHU
    GONGSHU $100000 GONGSHU
    BINGJIANG $110000 BINGJIANG