HTML学的不是很多，所以没有什么CSS，就很直白。
因为用到XHR，所以，在HTML中就要创建XHR对象。实现异构通信。
并且需要在HTML中对XML文档进行解析。需要读取本地的XML文档。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查询界面</title>
<script type="text/javascript" language="javascript">
var xmlHttp;
var xmlhttp;
var isie = true;
var key=0;
function create()//创建XHR
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
function start()//主函数
{
var number =document.getElementById("number").value;
//console.log（number）;
if(number!="")
{
create();
var url="server.php?number="+encodeURI(number);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
else
{
alert("请填写你所要查询的成绩");
}
}
function handleStateChange()//返回函数
{
if(xmlHttp.readyState<4)
{
span.innerHTML="正在读取数据....";
}
if(xmlHttp.readyState==4)//4==ok
{
if(xmlHttp.status==200)//200==ok
{
document.getElementById("span").innerHTML=xmlHttp.responseText;
k=1;
}
else
{
alert("错误，请求页面异常!");
}
}
}
function s()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","chaxun123.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("基本信息");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write("<th>姓名<th>");
document.write(x[i].getElementsByTagName("姓名")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write("<th>学号<th>");
document.write(x[i].getElementsByTagName("学号")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write("<th>数据结构<th>");
document.write(x[i].getElementsByTagName("数据结构")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write("<th>c语言<th>");
document.write(x[i].getElementsByTagName("c语言")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write("<th>数据库系统<th>");
document.write(x[i].getElementsByTagName("数据库系统")[0].childNodes[0].nodeValue);
document.write("</td><td>");
}
document.write("</table>");
}
</script>
</head>
<body>
<form action="#" style="display:block;position:fixed;top:50px;left:100px;width:200px;height:200px;">
请输入所要查询的学号：   <input type="text" name="number" id="number" onchange="start()"/>
<input type="button" value="查询" onclick="s()" />
</form>
<div id="span"></div>
</body>
</html>
浏览器运行的显示：
