ajax如何获取Handler.ashx中的List 并将其写进table中-AJAX教程-爱易网页

ajax如何获取Handler.ashx中的List 并将其写进table中

日期：2014-05-16　浏览次数：20802 次

ajax怎么获取Handler.ashx中的List 并将其写进table中
例子数据源是XML 我想弄成从Handler.ashx的List中提取数据

html代码



<html>

<head>

<title>responseXML</title>

<script language="javascript">

var xmlHttp;

function createXMLHttpRequest(){

	if(window.ActiveXObject)

		xmlHttp = new ActiveXObject("Microsoft.XMLHttp");

	else if(window.XMLHttpRequest)

		xmlHttp = new XMLHttpRequest();

}

function getXML(addressXML){

	var url = addressXML + "?timestamp=" + new Date();

	createXMLHttpRequest();

	xmlHttp.onreadystatechange = handleStateChange;

	xmlHttp.open("GET",url);

	xmlHttp.send(null);

}

//完成一行数据的插入

function addTableRow(sName, sClass, sBirth, sConstell, sMobile){

	//表格添加一行的相关操作，可参看7.2.1节

	var oTable = document.getElementById("member");//得到table

	var oTr = oTable.insertRow(oTable.rows.length);	//向table中插入一行(table表列数)

	var aText = new Array();//定义一个数组

	aText[0] = document.createTextNode(sName);

	aText[1] = document.createTextNode(sClass);

	aText[2] = document.createTextNode(sBirth);

	aText[3] = document.createTextNode(sConstell);

	aText[4] = document.createTextNode(sMobile);

	for(var i=0;i<aText.length;i++){

		var oTd = oTr.insertCell(i);//向行中插入一个列

		oTd.appendChild(aText[i]);//向这个列中填充一个数据

	}

}

function DrawTable(myXML){

	//用DOM方法操作XML文档

    var oMembers = myXML.getElementsByTagName("member"); //根据TagName返回对象数组

	var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";

	for(var i=0;i<oMembers.length;i++){

		oMember = oMembers[i];

		sName = oMember.getElementsByTagName("name")[0].childNodes[0].nodeValue;

		sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;

		sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;

		sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;

		sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;

		//添加一行

		addTableRow(sName, sClass, sBirth, sConstell, sMobile);

	}

}

function handleStateChange(){	

	if(xmlHttp.readyState == 4 && xmlHttp.status == 200)

	    DrawTable(xmlHttp.responseXML); //将获取过来的XML写到table中

}

</script>

</head>



<body>

<input type="button" value="获取XML" onclick="getXML('9-4.xml');"><br><br>

<table class="datalist" summary="list of members in EE Studay" id="member">

	<tr>

		<th scope="col">Name</th>

		<th scope="col">Class</th>

		<th scope="col">Birthday</th>

		<th scope="col">Constellation</th>

		<th scope="col">Mobile</th>

	</tr>

</table>

</body>

</html>

XML



<?xml version="1.0" encoding="gb2312"?>

<list>

	<caption>Member List</caption>

	<member>

		<name>isaac</name>

		<class>W13</class>

		<birth>Jun 24th</bir

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ajax如何获取Handler.ashx中的List 并将其写进table中

相关资料更多>

推荐阅读更多>