Resources » .NET programming » WCF/Webservices

Calling WebServices using Javascript


Posted Date: 10-Aug-2005  Last Updated:   Category: WCF/Webservices    
Author: Member Level: Silver    Points: 20


In this article I will explain about How to show data from a web service, without a postback.



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);
}
}
}



Marcelo [El Bebe] Lujan



Did you like this resource? Share it with your friends and show your love!

Responses to "Calling WebServices using Javascript"
Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Subscribe to Subscribers
    Active Members
    TodayLast 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India