Calling WebServices using Javascript (ADVANCED) Articles, samples and tutorials

Introduction

This is an update of my article in codeproject.

If we want to do a order form with many inputs, and ask for the productId, using HTML controls, to make your page weightless, but you want to show the products list and dont want to post back all the page, send the call Using remote scripting and call your webservices from the client, and mantain the page content (remember, you are using HTML controls with no state) the webservice sends you a XML Dataset in the resultyou neet to manipulate it, with an ActiveX in Javascript and showit. Seek

The HTML

We need to create an interface using just HTML controls, because we don't want send the page to the server. Just a textbox, and a button with the function.

onclick="doData();"
And a section where we want to display the result, like a Div.

id="service" style="BEHAVIOR: url(webservice.htc)"
this file must be placed in the same directory, or have a reference (../htc/webservice.htc)

The Init Script

we need to put an init()
body onload="init()"
in the load of the html, and the function doData(...) will be called by clicking the button.

function init() { 
service.useService("proxy.asmx?WSDL","proxy"); 
}

function doData(){ iCallID = service.proxy.callService(myResultsData, "ObtenDatos", "x"); 
}

the iCallID is a var unused later, but the result comes whit the call from it. We need to fill parameters to:

Call a function to manage the result
call the public function
send the values to process, from the 3rd to the necesary values needed.
The ActiveX with javascript
We need to use ActiveX, the XML omes as XMLDocument, the activex can open it and read it, the xml with the dataset is in the RAW property of the result.

var xmlDoc = new ActiveXObject("MSXML2.DomDocument");   
xmlDoc.loadXML(result.raw.xml);   
var items = xmlDoc.getElementsByTagName('ProductName');

The MyResultData javascript function

1.-Instantiate a variable with a new ActiveX, to load the XMLxmlDdocument.

2.-Use the function Load or LoadXML with the raw.xml call in the result as parameters.

3.-load with getElementsByTagName and the ColumnName as parameter

4.-Write in the HTML document

 
function myResultsData(result){ 
if(result.error){ 
 var xfaultcode = result.errorDetail.code; 
 var xfaultstring = result.errorDetail.string; 
 var xfaultsoap = result.errorDetail.raw; 
 document.getElementById("areadetextoid").innerHTML= xfaultcode + " " + xfaultstring + " " + xfaultsoap; 
 } 
 else{
  var xmlDoc = new ActiveXObject("MSXML2.DomDocument"); 
  xmlDoc.loadXML(result.raw.xml); 
  var items = xmlDoc.getElementsByTagName('ProductName'); 
  window.alert('Total de items: '+items.length); 
  for (var i=0;i < items.length;i++) 
  { 
   window.document.getElementById("areadetextoid").innerHTML += xmlDoc.getElementsByTagName('ProductID')(i).text; 
   window.document.getElementById("areadetextoid").innerHTML += '
'; 
   window.document.getElementById("areadetextoname").innerHTML += xmlDoc.getElementsByTagName('ProductName')(i).text; 
   window.document.getElementById("areadetextoname").innerHTML += '
'; 
  } 
 }
}

The Local Proxy

The local proxy has the goal of give security to the aplication, we seen in the javascript a URI pointing to localhost, if we dont use the proxy in localhost we need to give the full URI of the webservice, and we give other users the door wide open. in this case, we can apply seciruty by forms level protection in asp.net

The proxy just have an instance of the real web service and a single call of a function.

using System;
using System.Web;
using System.Web.Services;

namespace RemoteScriptingDemo1
{
 public class proxy : System.Web.Services.WebService
 {
  public proxy()
  {
   InitializeComponent();
  }

  private IContainer components = null;
    
  private void InitializeComponent()
  {
  }

  protected override void Dispose( bool disposing )
  {
   if(disposing && components != null)
   {
    components.Dispose();
   }
   base.Dispose(disposing);  
  }
  

  [WebMethod]
  public decimal Adicion(decimal x, decimal y)
  {
   WSDemo.Service1 ws = new RemoteScriptingDemo1.WSDemo.Service1();
   return ws.suma(x,y);
  }
 }
}

Download webservice.htc

_________________________
Marcelo [El Bebe] Lujan

Online Members

Calling WebServices using Javascript (ADVANCED)