频道直达 - 学院 - 下载 - 交易 - 特效 - 字库 - 手册 -排名-工具- 繁體
网页教学网站开发 设为首页
加入收藏
联系我们
建站搜索: 常用广告代码   用户注册 | 用户登陆
您当前的位置:中国建站之家 -> 网站开发设计技术教程 -> XML教程 -> xmlhttp实现无刷新页面

xmlhttp实现无刷新页面

作者:未知  来源:本站整理  发布时间:2005-10-18 5:39:13  发布人:jz123

减小字体 增大字体

繁琐的页面刷新,大大降低的网页交互的性能。伺服器与客户端的交互,只需要传递少量信息,却因为服务器的刷新,不得不做大量的数据传递以及下载。这里将描述怎样实现无刷新的方法。
假设实现的效果是,选择下拉栏目的时候,无刷新显示详细信息。
描述运行的思路如下:在客户端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。

将本文收藏到QQ书签与更多好友分享
[打 印]
[] [返回上一页] [收 藏]
上一篇文章:30位MD5加密替换代码!
下一篇文章:域名选取十技巧
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
精彩推荐
热门文章
· 注册码大全二
· 注册码大全四
· 注册码大全一
· 要10G免费网络硬盘的请进..
· 通过google 赶快来赚美金..
· 注册码大全十
· 头像-qq头像(qq新头像)4..
· 让你轻松架设FTP服务器1..
· 注册码大全三
· 梦幻背景图片7
· 卡通动物图片6
· 网页制作素材-按钮素材2..
· 让你轻松架设FTP服务器5..
· 风景图片8
· 注册码大全九
· 让你轻松架设FTP服务器2..
关注此文读者还看过
· 《财富》:中印部署IPv6 ..
· 无组件文件上传代码实例..
· 404错误的处理方式对SEO..
· XML介绍系列(1)
· 功能表列
· 网络寻呼机数据库版删除..
· 美人计Ⅱ——昨晚的工作..
· VBScript与JScript谁怕谁..
· 用排序串字段实现树状结..
· 站内搜索脚本例子二(Jav..
· 使用ActiveX控件开发网页..
· 第九章 配置和调度(rai..
· Jmail的属性和方法
· SQL数据操作基础(中级)8..
· Flash 动作脚本之:了解A..
· 一个天气预报的小偷
相关文章
· Microsoft的XMLHTTP对象介绍..
· 分享:XMLHTTPRequest的属性..
· 用xmlhttp和Java session监..
· 建一个XMLHttpRequest对象池..
· 全面剖析XMLHttpRequest对象..
· 用XMLHTTP组件解析图片地址..
· xmlhttp组件获取远程文件并..
· [ASP]利用 xmlhttp 分块上传..
· 使用xmlHttp结合ASP,实现网..
· 使用xmlhttp为网站增加股市..
· 在基于Mozilla的浏览器中使..
· 利用XMLHTTP 从其他页面获取..
· XMLHTTP ActiveX对象的访问..
· 用XMLHTTP Post/Get HTML页..
· XMLHTTP抓取数据时乱码问题..
· 使用XmlHttp结合ASP实现网页..
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号