文章摘要
这篇文章描述了一个使用PHP和JavaScript从外部文件（search.asp）获取数据的程序。该程序通过创建XMLHttp对象发送GET请求，并将响应中的数据加载到HTML表格中。代码中定义了多个函数，用于初始化变量、处理请求、处理响应以及将数据加载到表格中的td元素中。此外，程序还实现了点击td时填充名称的功能，并包含清除数据的功能。文章的核心内容是展示如何通过-bsm.js脚本实现数据获取和展示功能。
<%@LANGUAGE=”JAVASCRIPT” CODEPAGE=”936″%>
<!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”>
<style type=”text/css”>
<!–
.style1 {color: #FF0000}
.mouseOut
{
font-size:12px;
background: #708090;
color: #FFFAFA;
}
.mouseOver
{
font-size:12px;
background: #FFFAFA;
color: #000000;
}
–>
</style>
<script type=”text/javascript” language=”javascript”>
var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
var flag=false;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function setflag(){
flag=true;
}
function DisSelect()
{
if(flag==false)
document.getElementById(“popup”).style.display=”none”;
}
function initVars() {
inputField=document.getElementById(“frmchangshang”);
nameTable=document.getElementById(“name_table”);
completeDiv=document.getElementById(“popup”);
nameTableBody=document.getElementById(“name_table_body”);
document.getElementById(“popup”).style.display=”block”;
}
function findNames() {
initVars();
if (inputField.value.length > 0)
{
createXMLHttpRequest();
var url=”search.asp?names=” + inputField.value;
xmlHttp.open(“GET”, url, true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
else
{
clearNames();
}
}
function callback() {
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200)
{
try
{
var name=xmlHttp.responseXML.getElementsByTagName(“name”)
[0].firstChild.data;
}
catch(e)
{
document.getElementById(“popup”).style.display=”none”;
clearNames();
}
setNames(xmlHttp.responseXML.getElementsByTagName(“content”));
}
else if (xmlHttp.status==204)
{
clearNames();
}
}
}
function setNames(the_names) {
clearNames();
var size=the_names.length;
setOffsets();
var row,cell,spans;
for (var i=0; i < size; i++) {
//var nextNode=the_names[i].firstChild.data;
var e=the_names[i];
//取得子节点内容，重新装载为数组
var nextNode=e.getElementsByTagName(“name”)[0].firstChild.data;
//创建tr，td，span元素
row=document.createElement(“tr”);
cell=document.createElement(“td”);
//spans=document.createElement(“span”);
//设置cell属性
cell.onmouseout=function() {this.className=’mouseOver’; flag=false;};
cell.onmouseover=function() {this.className=’mouseOut’; flag=true;};
cell.setAttribute(“bgcolor”,”#FFFAFA”);
cell.setAttribute(“border”,”0″);
//cell.setAttribute(“onmouseover”,”setflag()”);
cell.onclick=function() { populateName(this); };
//将nextNode添加到td
var txtName=document.createTextNode(nextNode);
cell.appendChild(txtName);
//装载隐藏数据到span元素
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}
function setOffsets() {
var end=inputField.offsetWidth;
var left=calculateOffsetLeft(inputField);
var top=calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border=”black 1px solid”;
completeDiv.style.left=left + “px”;
completeDiv.style.top=top + “px”;
nameTable.style.width=”400px”;
}
function calculateOffsetLeft(field) {
return calculateOffset(field, “offsetLeft”);
}
function calculateOffsetTop(field) {
return calculateOffset(field, “offsetTop”);
}
function calculateOffset(field, attr) {
var offset=0;
while(field) {
offset +=field[attr];
field=field.offsetParent;
}
return offset;
}
function populateName(cell) {
//填充数据到web页面，cell—->td对象
inputField.value=cell.firstChild.nodeValue;
clearNames();
}
//清除列表数组
function clearNames() {
var ind=nameTableBody.childNodes.length;
for (var i=ind – 1; i >=0 ; i–) {
nameTableBody.removeChild(nameTableBody.childNodes[i]);
}
completeDiv.style.border=”none”;
}
</script>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>Untitled Document</title>
</head>
<body>
<input name=”frmchangshang” class=”InputText” id=”frmchangshang” style=”width:250px;”
onBlur=”DisSelect();” onKeyUp=”findNames();” size=”50″ maxlength=”100″>
<span class=”style1″>提示：输入关键字，程序自动从库中匹配您
要找的记录，如果不存在自行填写
</span>
<div style=”position:absolute;top:0;left:0;” id=”popup”>
<table id=”name_table” bgcolor=”#FFFAFA” border=”0″ cellspacing=”0″
cellpadding=”0″>
<tbody id=”name_table_body”></tbody>
</table>
</div>
</body>
</html>