解读现时Web应用中流行的网页无刷新B/S交互技术
随着所谓无刷新网页交互技术的流行,Ajax做为一个代表在网页无刷新中可谓是无人不晓,是不?
我认为Ajax只是将下面类似的这些功能都封装起来,利用Ajax.Utility.RegisterTypeForAjax(server_Class)来注册服务器端方法,并实现IHttpHander接口来实现脚本的插入(当然不是插入到页面中,而是输出到<Script>的Src中),办法是很好哦,实现了源JavaScript的隐藏。
其实无刷新网页交互也并不是很复杂,我们也可以自己写代码做到,它(基于Microsoft的)主要用到Microsoft.XMLHTTP和Microsoft.XMLDOM或者System.Xml.XmlDocument来实现大部分的功能(至少我认为是这样)。
为了让大家更明白这个技术,
现在来看一段代码(JavaScript):
var obj = document.forms(0);var valueObj;var valuesObj;var tmpVal = "";
var UpdateStr = "<ROOT>";
for(var i = 0; i < document.forms(0).elements.length; i ++)
{
valueObj = obj.elements[i];
if(valueObj.type=="text"||valueObj.type=="textarea"||valueObj.type=="hidden")
{
if(UpdateStr.indexOf("<" + valueObj.name + ">") > 0)
continue;
UpdateStr += "<" + valueObj.name + ">" + valueObj.value + "</" + valueObj.name + ">";
}
else if(valueObj.type=="checkbox")
{
UpdateStr += "<" + valueObj.name + ">";
valuesObj = document.getElementsByName(valueObj.name);
for(e=0;e<valuesObj.length;e++)
{
if(valuesObj[e].checked)
{
tmpVal += (tmpVal.length > 0 ? "," : "") + valuesObj[e].value;
}
i ++;
}
UpdateStr += tmpVal;
UpdateStr += "</" + valueObj.name + ">";
i--;
}
else if(valueObj.type=="radio" && valueObj.checked)
{
UpdateStr += "<" + valueObj.name + ">" + valueObj.value + "</" + valueObj.name + ">";
}
tmpVal = "";
}
UpdateStr += "</ROOT>";
var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
xmlHTTP.open("POST","HandleProcess.asp",false);//或者 xmlHTTP.open("POST","HandleProcess.aspx",false);
xmlHTTP.send(UpdateStr);
var ret = xmlHTTP.responseText;
alert(ret);
这段代码的功能就是将表单里面的数据组合成一个XML字符串并发送到服务器端处理程序,
现在再来看一下服务器端的接收处理部分代码:
'ASP(VB)
Response.CharSet = "GB2312"
set xmlrec=server.CreateObject("microsoft.xmldom")
xmlrec.async=false
xmlrec.load(Request)
struserid=xmlrec.documentelement.selectSingleNode("uid").Text
struname=trim(xmlrec.documentelement.selectSingleNode("uname").Text)
...
Response.Write("执行成功!")
=====================================
'VB.NET
Dim xmlrec As New System.Xml.XmlDocument
xmlrec.Load(Request.InputStream)
Dim Exampaperno As String, state As String, strchild As String
Exampaperno = xmlrec.DocumentElement.SelectSingleNode("Exampaperno").InnerText
strchild = xmlrec.DocumentElement.SelectSingleNode("strchild").InnerText
....
Response.Write("执行成功!")
=====================================
//C#
System.Xml.XmlDocument xmlrec = New System.Xml.XmlDocument;
xmlrec.Load(Request.InputStream);
string Exampaperno, state, strchild;
Exampaperno = xmlrec.DocumentElement.SelectSingleNode("Exampaperno").InnerText;
strchild = xmlrec.DocumentElement.SelectSingleNode("strchild").InnerText;
....
Response.Write("执行成功!");
看一下就明白了吧,xmlrec.documentelement.selectSingleNode和Request或者Request.Params的功能相差无几,几乎是一样的。
厉害吧??很相似的操作,很简单的操作就将客户端与服务器端程序连接起来了,而且是几种语言的程序都操作方法简单且相似。
再稍加修改变化,我们就可以做出一个很成功的无刷新基于浏览器的聊天室,或者其它业务处理程序!!
欢迎访问我的网站( Ajax + .NET + Rss/Xml + Access ) :