初学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文件和页面存放的路径有问题,所以没有值?
问题补充:
文件放在桌面同一个文件夹下
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文件和页面存放的路径有问题,所以没有值?
问题补充:
文件放在桌面同一个文件夹下
"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>
错误一堆,自己对比着看看吧,去服务器端调试,我这儿测试了可以调通
是不是IE下测试出不来结果?firefox下试试我这而得结果:
XIHU $80000 XIHU
GONGSHU $100000 GONGSHU
BINGJIANG $110000 BINGJIANG