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

原创 2004年01月04日 10:14:00

浅谈Web数据交互(二)

追风<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

 

3XML方式

前面的两种方式都能传递数据,但是都有一个问题,就是提交数据后,页面会刷新,由于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:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />

 CSDN_Dev_Image_2004-1-32310390.png

前台页面

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>

包含进来。

浅谈B/S客户端与服务器端交互数据(一)

浅谈Web数据交互(一)追风C/S模式和B/S各有其有点也各有其缺点,B/S模式在开发中需要考虑数据如何从客户端提交到服务器端,数据又如何返回到客户端,这些是B/S模式所特有的,在去年之前,开发B/S...
  • VisualSW
  • VisualSW
  • 2004年01月04日 10:14
  • 3293

Android 客户端与服务器端进行数据交互(二、登录客户端)

概要Android客户端分为User,HttpUtil,HttpCallbackListener,MainActivity四个部分。User model与服务端的一样,一方面是用于本地用户信息的存储m...
  • u012145166
  • u012145166
  • 2016年05月06日 22:54
  • 10803

客户端与服务器端交互原理简述

Web 浏览器(客户端)中请求一个地址时,通过HTTP协议向服务器端发送一个请求(request),服务器端收到请求后,在Servlet中根据请求时的方法(method) 的设置get/post来响应...
  • ethunsex
  • ethunsex
  • 2017年03月07日 20:52
  • 817

Android客户端和服务器端数据交互的第四种方法

Android客户端和服务器端数据交互的第四种方法
  • wangshuxuncom
  • wangshuxuncom
  • 2015年01月15日 15:29
  • 4153

解决Axis2 服务器端与客户端 复合参数传递问题

网上看到说Axis2服务器端与客户端传递参数只支持数组和对象,但是想借助list...
  • duan9421
  • duan9421
  • 2014年04月09日 11:25
  • 499

Socket通信,实现单客户端和服务器交互的C/S结构

首先创建客户端程序: package FirstPackages; import java.io.BufferedReader; import java.io.IOException; imp...
  • qinyf2015
  • qinyf2015
  • 2016年12月07日 18:23
  • 831

unity游戏开发之服务器与客户端或页面流转之自定义交互事件

引言:    1,游戏页面与页面的交互 (1)装备背包 (2)装备信息页面      在游戏开发中,2D页面之间,有时候少不了关联性,比如游戏的背包系统,玩家进入背包系统(见上图装...
  • zhetianyun
  • zhetianyun
  • 2014年12月26日 10:45
  • 2916

客户端与服务器交互的功能,如何进行测试?

测试客户端与服务器交互的功能,如何进行测试,需要考虑哪些内容呢?下面我们分阶段来说明一下~ 测试沟通阶段 需要跟客户端和服务器端开发沟通,确定客户端发送请求的样式,需要包含哪些参数值,参数值...
  • wlly1
  • wlly1
  • 2017年02月16日 10:49
  • 1232

通俗易懂客户端与服务器端交互原理(HTTP数据请求与HTTP响应,包括Servlet部分)

经常看到HTTP客户端与服务器端交互原理的各种版本的文章,但是专业术语太多,且流程过于复杂,不容易消化。于是就按照在 Servlet 里面的内容大致做了一些穿插。本来 连 Tomcat 容器 和 Se...
  • lvpin
  • lvpin
  • 2007年06月09日 18:49
  • 6738

Java Socket 客户端与服务器端的简单交互

一直想了解客户端与服务器之间的底层的一些交互 我刚开始看到关于解析header的一些例子,但是不清楚是客户端呢还是服务器端 后来,我发现,我的想法是有问题的,解析header只是例子的一个体现方式。 ...
  • u010045971
  • u010045971
  • 2015年11月05日 10:02
  • 1795
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浅谈B/S客户端与服务器端交互数据(二)
举报原因:
原因补充:

(最多只允许输入30个字)