简明现代魔法 -> Ajax技术 -> Ajax 获取 XML 内容

Ajax 获取 XML 内容

2010-03-12

点击此处查看示例

前端调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="ajax.js"></script> 
<style type="text/css"> 
table{border-collapse:collapse;border-spacing:0;}
table td{border:1px solid #999; padding:8px; }
#txtHint{margin-top:15px;}
</style> 
<title>无标题文档</title> 
</head> 
 
<body> 
<form name="form1"> 
请选择公司:
<select name="seccom"> 
	<option value="0">请选择</option> 
    <option value="1">Google</option> 
    <option value="2">腾讯</option> 
    <option value="3">网易</option> 
</select> 
</form> 
<div id="txtHint"> 
	<table id="txtinfo"><tr><td>信息显示框</td></tr></table> 
</div> 
</body> 
<script type="text/javascript" src="showHint.js"></script> 
</html> 

ajax.js

var xmlHttp;
function ajaxRequest(url)
{
	if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();
	else if(window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	xmlHttp.onreadystatechange = ajaxResponse;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}
function ajaxResponse()
{
	if(xmlHttp.readyState==4)
    {
		if(xmlHttp.status==200)
        {
			ajaxCallback();
		}
	}
}

showHint.js

function ajaxCallback()
{
	var names = xmlHttp.responseXML.getElementsByTagName("name");
	var adrs = xmlHttp.responseXML.getElementsByTagName("adr");
	var div = document.getElementById("txtHint");
	var txttabel = document.getElementById("txtinfo");
	div.removeChild(txttabel);
	table = document.createElement("TABLE");
	table.id = "txtinfo";
	var i = document.form1.seccom.selectedIndex;
	if(i==0) 
    {
		div.appendChild(table);
		return;
	}
	var j=i-1;
	name=names[j].firstChild.nodeValue;
	nametxt=document.createTextNode(name);
	adr=adrs[j].firstChild.nodeValue;
	adrtxt=document.createTextNode(adr);
	tr=document.createElement("TR");
	td1=document.createElement("TD");
	td1.appendChild(nametxt);
	tr.appendChild(td1);
	td2=document.createElement("TD");
	td2.appendChild(adrtxt);
	tr.appendChild(td2);
	table.appendChild(tr);
	div.appendChild(table);
}
document.form1.seccom.onchange=function Ajaxstart()
{
	ajaxRequest("company.xml");
}

company.xml

<?xml version="1.0" encoding="utf-8" ?> 
<companys>
<name>Google</name> 
<adr>佩奇、布林</adr> 
<name>Tencent</name> 
<adr>马化腾</adr> 
<name>NetEasy</name> 
<adr>丁磊</adr> 
</companys>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们