浅谈B/S客户端与服务器端交互数据（二）

浅谈Web数据交互（二）

追风

 

3．XML方式

前面的两种方式都能传递数据，但是都有一个问题，就是提交数据后，页面会刷新，由于web是无状态的，所以我们必须通过代码来维持页面上的状态。（在asp.net里面微软通过ViewState来维护）所以我们要做到交互数据但是不刷新页面的话，就只有用xml了。

哇，不知道xml是什么冬冬啊？倒……

XML (eXtensible Markup Language)建议你看看两只老虎的《无废话XML》

GB版本：http://2tigers.net/xml_book/wfhxml_gb.zip

Big5版本：http://2tigers.net/xml_book/wfhxml_b5.zip

好下面我们来看看如何通过xml无刷新的交互数据：

来看一下数据流图

 

前台页面

xml.asp

<html>

<head>

<script language=”JavaScript”>

//hide for low version of ie

<!—

function EncodeForXML(string)

          {

                   string=string.replace(/&/g,"&amp;");

                   string=string.replace(/</g,"&lt;");

                   string=string.replace(/>/g,"&gt;");

                   return string;

          }

 

function CommunicateXMLData(sXML,ActionFileURL)

{

          var xmlDoc = new ActiveXObject("MSXML.DOMDocument");

          xmlDoc.async = false;

          sXML = "<?xml version=/"1.0/" encoding=/"UTF-8/"?><TEST>" + sXML + "</TEST>";

          var httpObj = new ActiveXObject("Microsoft.XMLHTTP");

          if(xmlDoc.loadXML(sXML))

          {

                   httpObj.Open("POST",ActionFileURL,false);

                   httpObj.Send(xmlDoc);

                   return httpObj.responseXML.xml;

          }

          else

          {

                   return "FALSE";

          }

}

 

 

function SubmitInput()

{

          var strXML;

strXML="<name>”+ EncodeForXML(iptname.value)+”</name>";

strXML = CommunicateXMLData (strXML," XMLX.asp");   

var xmlDoc=new ActiveXObject("MSXML.DOMDocument")

xmlDoc.async=false;

if (xmlDoc.loadXML(strXML))

{

//xmlDoc为加载数据后的xml对象

txtname.value=xmlDoc.getElementsByTagName("Result")[0].text

}

}

//-->

</script>

</head>

<body>

Your name is:<input name=”txtname” type=”text” value=””><br>

<input type=”text” name=”iptname” id=”iptname” value=””>

<a href=”#” onclick=”JavaScript:SubmitInput();”>Go</a>

</body>

</html>

后台页面xmlx.asp

<%@ Language=VBScript codepage="65001"%>

<%

dim xmlDoc

dim strResult

set xmlDoc = server.CreateObject("MSXML.DOMDocument")

if xmlDoc.load(request)=true then

          strResult=Trim(xmlDoc.selectSingleNode("//name ").text)

strReturn="<TEST><Result>Success” & strReturn & ”</Result></TEST>"

end if

 

Response.ContentType="text/xml"

Response.CharSet="UTF-8"

if xmlDoc.loadXML(strResult)=true then

xmlDoc.save Response

end if

Response.End

set xmlDoc=nothing

%>

 

下面解释一下程序的工作过程：

<a href=”#” onclick=”JavaScript:SubmitInput();”>Go</a>

当点击Go的时候触发JavaScript事件SubmitInput();

strXML="<name>”+ iptname.value+”</name>";

生成xml字符串

strXML =DataCommunicate(strXML," XMLX.asp"); 

调用函数DataCommunicate将生成的xml字符串发送到后台处理页面（XMLS.asp），

并接收后台页面处理之后返回的xml字符串

var xmlDoc=new ActiveXObject("MSXML.DOMDocument")

xmlDoc.async=false;

if (xmlDoc.loadXML(strXML))

{

//xmlDoc为加载数据后的xml对象

//处理返回的数据

txtname.value=xmlDoc.getElementsByTagName("Result")[0].text

}

通过xml交互数据，可以达到页面不刷新的结果，避免了交互一次数据就要维护一次页面控件的状态，同时也降低了网络的数据流量。

注意点：其中的EncodeForXML函数是将与xml有冲突的字符进行编码处理。

技巧：

当然我们可以将EncodeForXML函数与CommunicateXMLData函数写到一个js中，作为公用的函数，在需要进行xml交互数据的页面通过

<script LANGUAGE="javascript" Src="../Scripts/Communicate.js"></script>

包含进来。