Using JavaScript and WebService to implement partial data XML transfer of Web pages

javascript|web|xml| Data | Web page

b/S structure of the program to perform an operation often need to refresh the page, in the refresh process, the server will not only send data to the client, but also need some formatting information, such as tables, pictures, headings, etc. resend, occupy a lot of bandwidth. Although IE provides a page caching function, the local cache has little effect on dynamically changing Web pages at all times. If you can get the Web server to deliver only critical data, you can reduce bandwidth consumption without transferring the format. Of course, in my system development process, the use of smart cards for critical data encryption, decryption, for speed, as far as possible to reduce the number of encrypted data can improve the display speed of information.

We can use the WEBSERVICE.HTC implementation provided by Microsoft to invoke webservice through JavaScript while separating XML and XSL implementation data from the format. The main technical points are as follows:

First, the WebService call:

First from the Microsoft website Download WEBSERVICE.HTC, the use of the method is not said, the Internet has detailed call instructions. Add a div to the body of the Web page to implement a reference to WEBSERVICE.HTC, as follows:

<div id= "Htcwservice" style= "Behavior:url" (... /.. /GLOBAL/WEBSERVICE.HTC) "></div>

Add two div at the same time to display the error message and the result information:

<div class= "homemed" id= "SearchResult" ><b> description:</b> Enter the user number, with the mouse click "Retrieve" button to start the search. </DIV>
<div class= "homemed" id= "ErrorMessage" ></DIV>

Write JavaScript to implement a reference to WebService:

function Openwebservice ()
{
Htcwservice.useservice (".. /.. /webservices/garkcx.asmx? WSDL "," garkcx ");
}

WebService returns the encoded XML (where we have smart card encryption of the information), and after the client decodes, we can use MSXML implementation to parse the XML and format it.

Second, asynchronous call WebService, parsing xml

Declare two variables to store ActiveX objects:

var objxmldata; Store the XML document to parse
var Objxmlstyle; Store XSLT STYLE
The code to invoke webservice through JavaScript is as follows:

function Dosearch ()
{
var icallid;



Icallid = HtcWService.Garkcx.callService (dataarrived, "Dosearch", Struserguid, Strsearchmethod, Strdatabasename, Strsearchcondition, Encodemethod);
}
Because it is an asynchronous call, the Dataarrived method is triggered when the remote service call completes. The content after "Dosearch" is the argument followed by the call to WebService. Now let's look at the dataarrived code:

function dataarrived (Objresult)
{
if (objresult.error)
{
var strerrorcode = ObjResult.errorDetail.code;
var strerrormsg = objResult.errorDetail.string;
var strerrorraw = ObjResult.errorDetail.raw;

document.all (' errormessage '). InnerHTML = ' <b>* error-</b> the user with the specified ID number cannot be found. <br/> ' + strerrormsg;
}
Else
{
Try
{
Objxmldata = new ActiveXObject (' MSXML2. Freethreadeddomdocument ');
}
catch (e) {}

Determines whether the parser object can be used
if (Objxmldata = null)
{
document.all (' errormessage '). InnerHTML = ' * <b> error: Incorrect XML parser version. </b><br/> ';
Return
}


Here are some decoded code, omitting

strresult = Objresult.value;

   //Events are constantly triggered to detect whether the XML data is loaded and completed
    objxmldata.onreadystatechange = dataloaded;
   
    objxmldata.validateonparse = true;
    Objxmldata.async = true;
   
   //Load results returned from Web Service
    objxmldata.loadxml ( Strresult);
 }
}

Function dataloaded ()
{
 //asynchronous access, if the XML parser has a readyState property of 4, which indicates the end of the mount.
  if (objxmldata.readystate = 4)
  {
    if (objXMLData.parseError.errorCode!= 0) br>     //Loading process error
      document.all (' errormessage '). InnerHTML = ' <b>* error </b>-Unable to parse XML data result. '
    Else
    {
      document.all (' SearchResult ') ). InnerHTML = ';
      Applyxslstyle (); //apply XSLT style
   }
 }
}
The following XML that is passed in applies the XSL style and is displayed in IE browser, which is implemented by invoking the Applyxslstyle () method. The method uses the MSXML2. Xsltemplate component to implement the parsing operation. Because XSL styles do not usually change, local caching can help improve the efficiency of XSL access. The code is as follows:

Function Applyxslstyle ()
{
  Objxmlstyle = new ActiveXObject (' MSXML2. Freethreadeddomdocument ');
  Objxmlstyle.async = false;
  objxmlstyle.resolveexternals = false;
 
  strxslt = '. /.. /xslt/czrk.xsl ';
  Objxmlstyle.load (STRXSLT);
 
  if (objxmlstyle.readystate = 4)
  {
    if ( ObjXMLStyle.parseError.errorCode!= 0)
      document.all (' errormessage '). InnerHTML = ' <b>* Error </b>-Unable to parse XSLT format. ';
    Else
    {
      document.all (' SearchResult ') ). InnerHTML = ';
     //formatting and outputting results
      displayresult ();
   }
 }

Function Displayresult ()
{
 //Create a new Xsltemplate object and set the style sheet
  var objtemplate = new ActiveXObject ( ' MSXML2. Xsltemplate ');
  Objtemplate.stylesheet = Objxmlstyle;
 
 //Create processor to process XML data
  var objproc = Objtemplate.createprocessor ();
 
 //indicating the XML data object used
  objproc.input = objxmldata;
 
 /apply the XSL style and assign the result to the string
  if (objproc.transform () = = True)
  {
    va R strresult = objproc.output
    document.all (' SearchResult '). InnerHTML = strresult;    
 }
  Else
    document.all (' errormessage '). InnerHTML = ' <b>* error </ B>-cannot apply XSLT format to query results. ';
}
In this way, XML data passed through WebService is displayed in IE after being processed in XSL format. Here are a few screenshots:

Pictures (1) before retrieving data


..............................................................................................

Picture (2) after retrieving the data

..............................................................................................

Picture (3) Custom search criteria

Posted on 2004-07-17 23:57 Lu Zhenyu Reading (8394) Comments (26) Edit Favorites Reference Net pick Categories: Web Form programming

Comments

# Re: Using JavaScript and WebService to implement the Web page part of the data XML transfer 2004-07-18 13:52 Rover Good, suggest not to use document.all to reference, preferably with Documeng.getelementbyid (' Control ID ') to refer to, follow the consortium, and the relevant information? Give me a link or a file or something? An article looking not fun reply more comments

# Re: Implementing Web page partial data XML transfer with JavaScript and WebService 2004-07-18 13:59 spicy teachers with webservice behavior have some limitations, only IE 5.0,ie 5.5,ie 6.0,ie P1 support, other browsers do not support, the recent Windows XP SP2 above the IE 6.0 seems to also disable the behavior. And it cannot overwhelm the web Service called by the domain.  Therefore, WebForm and Web service cannot be deployed separately. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2004-07-18 15:24 Lu Zhenyu

Relevant information, you can refer to the ASP. NET distributed database application advanced programming, Alex Homer Davesussman, Tsinghua University Press published.

In fact, I'm only here to extract a small part of the project. When an access request arrives at the site, I first test the client IE browser version and whether to support JavaScript (see below), if the client does not support, it will not be directed to another page, this page will be on the server side of the XML and XSL generated HTML (how to use C # The code implementation does not have to say much about the XSL format of the XML, and then returns the results to the user, but performance is definitely affected. Because of the system security considerations, the information retrieved in this way is restricted in my system.

Whether the client supports JavaScript detection code:

<%@ Page language= "C #" enablesessionstate= "False"%>

<%
String Strclienttype = request.querystring["Client"];
%>

<meta http-equiv= "Refresh" content= "1;url=no-client-script.aspx?client=<% = Strclienttype%>"/>
<title> detect whether the client supports script scripts </title>

<script language= "JavaScript" >
<!--
function jumpscripting () {
Jump to page using client-side javascript-if jump not executed
Then client does not have scripting available or it is disabled
window.location.href= ' searchform/<% = Strclienttype%>/default.htm ';
}
-->
</script>

<body onload= "jumpscripting ()" >
<font size= "2" face= "Arial" > Detect whether the client supports script scripts </font>
</body>

To detect the client type code:
public int ClientType () {
Return an integer indicating the type of device
0 = Not supported by application
1 = HTML 3.2. Client
2 = Internet Explorer 4
3 = Internet Explorer 5 or above
4 = Small Screen HTML (< chars/Line or < 400px wide)
5 = WML supporting Device (i.e. cellphone)
9 = Error while detecting Type

Create integer variable to hold client type
int inttype;

try {
Get reference to Browser capabilities
System.Web.Mobile.MobileCapabilities Objbcaps
= (System.Web.Mobile.MobileCapabilities) request.browser;

Check the preferred rendering type of the device
String Strrendertype = ObjBCaps.PreferredRenderingType.ToLower ();

if (Strrendertype.indexof ("WML")!=-1)
Inttype = 5; Type is WML device
else if (strrendertype.indexof ("HTML")!=-1) {
Inttype = 1; Assume it ' s an HTML 3.2 device

Next Check the screen size
if (Objbcaps.screenpixelswidth < | | Objbcaps.screencharacterswidth < 50)
Inttype = 4; It ' s a small screen HTML device
else {
Assume it ' s a normal browser-check if its IE
if (Objbcaps.browser = = "IE") {
Check the version number
if (objbcaps.majorversion >= 5)
Inttype = 3; IE 5.x or above
else if (objbcaps.majorversion = 4)
Inttype = 2; IE 4.x
}
}
}
else//not WML or HTML
Inttype = 0; not recognized or supported

}
catch (Exception objerr) {
Inttype = 9; Error during detection
}
return inttype;
}
Home Default.aspx Code:
<%@ Page language= "C #"%>

<!--register the user control contains the detection code-->
<% @Register tagprefix= "Gark" tagname= "Getclienttype" src= "Global/client-detect.ascx"%>

<!--Insert user control into the page-->
<gark:getclienttype id= "Clientdetect" runat= "Server"/>

<script language= "C #" runat= "Server" >

void Page_Load () {
Switch (Clientdetect.clienttype ()) {
Case 0://Not supported
Response.Clear ();
Response.ContentType = "Text/text";
Response.Write ("Sorry, this application does not support your client type:" + request.useragent);
Response.End ();
Break
Case 2://IE 4.x
Response.Clear ();
Response.Redirect ("client-script-check.aspx?client=ie4");
Response.End ();
Break
Case 3://IE 5.x and above
Response.Clear ();
Response.Redirect ("client-script-check.aspx?client=ie5");
Response.End ();
&AMP;NB, SP; Break
Case 4://Small-screen HTML device or WML client
Case 5:
Response.Clear ();
Server.Transfer ("searchform/mobile/default.aspx");
Break
Default://Assume HTML 3.2 client
Response.Clear ();
Response.Redirect ("Client-script-check.aspx?client=html32");
Response.End ();
Break
}
}

</script>
Reply to more comments

# Re: Using JavaScript and WebService to implement part of the Web page data XML transfer 2004-07-21 13:57 How is this Web service validated? Reply to more comments

# Re: Implementing Web page partial data XML transfer with JavaScript and WebService 2004-07-21 14:32 Lu Zhenyu I didn't consider using existing validation (form validation, Windows validation, and so on), but instead put the validation on the smart card. The key data transmitted between the client and server is signed and encrypted, and the system verifies the user identity by verifying the encrypted information.  The key in the smart card is never readable, and the smart card has a standard system from business card to key distribution to delivery. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2004-08-25 17:21 beloved on MSDN, Microsoft has long since abandoned its support for WEBSERVICES.HTC.
The worst thing is that the machine that has the IE SP2 now restricts the call to ActiveX, and prompts you every time you create an object for the client. This is very unpleasant.  I wonder if there is a better way to solve the problem. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2004-08-25 22:18 Lu Zhenyu @beloved

No one can restrain Microsoft from changing its strategy. I think Microsoft will probably drive programmers to the. NET platform and smart clients. I think flex, smart client, and future Microsoft Xml-based code development will probably dominate.  Although this can solve the above problems, but we have to learn, learn and learn ... Reply to more comments

# Re: Using JavaScript and WebService to implement part of the Web page data XML transfer 2004-09-10 09:10 to see your article benefited a lot, feel that this way by Microsoft to give up a bit of a pity. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page part of the data XML transfer 2004-09-14 10:17 Aspsir about authentication, the most basic can use session to verify, while through the web Service enablesession=true to enable WebMethod to support session reply more comments

# Re: Use JavaScript and WebService to implement Web page partial data XML transfer 2004-09-19 08:25 Luoluo This aspect flash is a better choice than Ms JScript has better cross-platform,  Flash has good support for both XML and WebService. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2004-09-19 12:55 Lu Zhenyu I think Macromedia Flex and Microsoft-promoted smart clients have good prospects in this area.

# Re: Using JavaScript and WebService to implement part of the Web page data XML transfer 2004-09-27 08:40 I feel like the smart client that Microsoft advocates is too heavyweight and too complex for lightweight applications. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2005-02-23 02:52 Puzzledjavascriptman if server-side WebService is Java-written,  How do you write JavaScript code? Reply to more comments

# Re: Using JavaScript and WebService to implement Web Part data XML transfer 2005-02-23 12:20 Lu Zhenyu I don't know. Because WEBSERVICE.HTC cannot be used.  But you can download WEBSERVICE.HTC and then look at the JavaScript code inside, which should help. Reply to more comments

# Re: Using JavaScript and WebService to implement the Web page part of the data XML transmission 2005-03-18 14:32 Cxuqiang left fingerprints .... Reply to more comments

# Re: Using JavaScript and WebService to implement part of the Web page data XML transmission 2005-04-09 03:21 a drop of water good deep!! Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2005-06-10 18:23 Li I use IE 6.0 above Windows XP SP2, there are many pages cannot browse, and cannot watch the video, must replace the version? Reply to more comments

# Re: Implementing Web page partial data XML transfer with JavaScript and WebService 2005-07-11 15:40 botched programmer research reply to more comments

# Re: Using JavaScript and WebService to implement part of the Web page data XML transfer 2005-09-01 13:10 Tonyzhang If this way can only be developed with Microsoft Dongdong WebServices that is too restrictive.  I used the Java+axis developed by the WebService according to the Microsoft Official website provided the way to carry out the experiment, did not succeed. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2005-11-03 09:37 Bobox was lucky enough to look at this article, because looking at HTC feeling found the key I need. But after reading these comments, the heart is cold again.
Ms WebService since it's slow. and support for truly heterogeneous systems is so bad. It seems that only clients with MS's own product line have a good support for it, and Microsoft offers a good proxy. The feeling of disappointment is self-evident ...
Reply to more comments

# Re: Implementing Web page partial data XML transfer with JavaScript and WebService 2005-11-28 15:04 Chinese cabbage Some people say that XP SP2 limits this thing?

How can I not feel ... Reply to more comments

# Re: Using JavaScript and WebService to implement the Web page part of the data XML transfer 2005-12-02 15:39 Oxygen can collapse, but there are hints, now all the methods are prompted. Reply to more comments

# Re: Using JavaScript and WebService to implement the Web page part of the data XML transfer 2005-12-02 15:39 Oxygen can collapse, but there are hints, now all the methods are prompted. Reply to more comments

# Re: Using JavaScript and WebService to implement Web page partial data XML transfer 2006-04-24 10:48 sac so under SP2 can you use it?
I always hint useservice is not a method when I use it
Reply to more comments

# Re: Using JavaScript and WebService to implement part of the Web page data XML transfer 2006-05-29 11:17 e cyclone I also use this

How the code finishes//Loads the results returned from the Web Service
Objxmldata.loadxml (strresult);

The function dataloaded () is no longer executed. Reply to more comments