繁琐的页面刷新，大大降低的网页交互的性能。伺服器与客户端的交互，只需要传递少量信息，却因为服务器的刷新，不得不做大量的数据传递以及下载。这里将描述怎样实现无刷新的方法。
假设实现的效果是，选择下拉栏目的时候，无刷新显示详细信息。
描述运行的思路如下：在客户端SELECT控件中双击行，客户端将选择行信息，通过javascript语句，结合xmlhttp控件，将参数POST到伺服器端，伺服器端接受参数，执行处理，传递xml流到客户端，然后客户端得到xml，解析，绑定客户端控件。
客户端代码如下：
function showData(){
var sPageName = "接受的页面.aspx";
var objSelect = document.Form1.selStation;//客户端选择控件
var objChengQu = document.getElementById("txtDistrict");//服务器得到信息的TEXT框1
var ObjPianQu = document.getElementById("txtArea");//服务器得到信息的TEXT框2
var objDonhGe = document.getElementById("buildlist");//服务器得到信息的SELECT框
var postUrl = sPageName+"?Selected="+objSelect.options[objSelect.options.selectedIndex].value;
//构造传递路径
var oXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");//调用用XMLHTTP控件
oXMLHTTP.open("POST",postUrl , false); //POST到伺服器端
oXMLHTTP.send("");
var result = oXMLHTTP.responseText; //得到返回结果
var oDoc = new ActiveXObject("MSXML2.DOMDocument");//调用用XML控件
oDoc.loadXML(result);//将xml导入
while (objDonhGe.options.length>0)
{ //完全清除原有的SELECT框的内容
objDonhGe.options.remove(0);
}
if (oDoc.getElementsByTagName("城区").length>=1)
objChengQu.value =oDoc.getElementsByTagName("城区").item(0).text;
//填充TEXT框1
if (oDoc.getElementsByTagName("片区").length>=1)
ObjPianQu.value =oDoc.getElementsByTagName("片区").item(0).text;
//填充TEXT框2
var maxNum_out = oDoc.getElementsByTagName("栋阁").length;
for(i=0;i<maxNum_out;i++) {
var str1 = oDoc.getElementsByTagName("栋阁").item(i).text;
var oOption = document.createElement("OPTION");
objDonhGe.options.add(oOption);
oOption.innerText = str1;
oOption.value = str1;//ID
} //填充下拉框2
}
服务器端代码如下：
private void Page_Load(object sender, System.EventArgs e)
{
if(Request["Selected"]!=null)
{
XmlTextWriter writer = new XmlTextWriter(Response.OutputStream,Response.ContentEncoding);
writer.Formatting = Formatting.Indented;
writer.Indentation=6;
writer.IndentChar=' ';
writer.WriteStartElement ("楼盘");
writer.WriteElementString("城区","阳光海滨"+Request["Selected"]);
writer.WriteElementString("片区","世界花园"+Request["Selected"]);
writer.WriteElementString("栋阁",Request["Selected"]+"期A");
writer.WriteElementString("栋阁",Request["Selected"]+"期B");
writer.WriteElementString("栋阁",Request["Selected"]+"期C");
writer.WriteElementString("栋阁",Request["Selected"]+"期D");
writer.WriteEndElement(); //完成构造xml
writer.Flush();
Response.End(); //结束响应
writer.Close();
}
}
一个简单功能的无刷新就完成了，可以根据需要从数据库取数据，构造xml。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。