MrYang's Blog

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://www.mryang.org/logs/16101537.html

　　今天是五一，劳动人民的节日，但是我这个劳动人民仍然呆在实验室，继续在代码中游荡。
前些天看了看Ajax，正好，在正在写的程序中用得着，马上拿过来试试，效果还不错。
uploads/200605/01_145457_ajaxtest1.gif
要完成的功能如下：在输入了职工的工号后，马上显示出该职工的一些基本信息。如图所示，在文本框“employeeid”输入工号，在层”showresult”处显示职工基本信息。
在以前的处理中我是将“showresult”处用了一个Iframe来实现，当然也可以实现，但是每次当输完工号后，显示职工基本信息的页面都要加载一次，很是麻烦，正好Ajax可以解决此类问题，就用上了。下面就是具体的代码：

输入页面的Ajax代码：

< script language=”javascript”>
//ajax start
var xmlHttp;
function createXMLHttpRequest() {
xmlHttp = false;
if(window.XMLHttpRequest) { //Mozilla
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType(”text/xml”);
}
}
else if (window.ActiveXObject) { // IE
try {
xmlHttp = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (e) {}
}
}
if (!xmlHttp) { // 异常
window.alert(”不能创建XMLHttpRequest 对象实例.”);
return false;
}

}
function processRequest() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById(”showresult”).innerHTML = xmlHttp.responseText;
} else {
alert(”您所请求的页面有异常。”);
}
}
}

function startRequest(strurl){
createXMLHttpRequest();
xmlHttp.onreadystatechange = processRequest;
xmlHttp.open(”Get”, strurl, true);
xmlHttp.send(null);
}
function showemployeeinfo() {
var employeeid=document.form1.employeeid.value;
var temstr=”showmsg.asp?employeeid=” + employeeid;
document.getElementById(”showresult”).parentNode.style.display = “”;
document.getElementById(”showresult”).innerHTML = “正在读取数据…”
startRequest(temstr);
}

数据录入部分的HTML代码：

< form id=”form1″ name=”form1″ method=”post” action=”">
工号:< input name=”employeeid” type=”text” id=”employeeid” size=”6″ maxlength=”8″ onblur=”javascript:showemployeeinfo();” />
姓名:< input name=”employeename” type=”text” id=”employeename” size=”8″ maxlength=”8″ onblur=”javascript:showemployeeinfo();” />
< input type=”submit” name=”Submit” value=”提交” />
< /form>

< div id=”showresult”>< /div>

数据处理程序showmsg.asp的代码：

Response.Charset=”gb2312″ ‘避免乱码
EmployeeID=Request.Querystring(”employeeid”)
‘这里省略了数据库查询的代码，将职工信息给strEmployeeInfo，然后输出就可以了
strEmployeeInfo strEmployeeInfo = “职工信息”
Response.Write strEmployeeInfo