共用方式為

SiDEBAR GADGETS: Using Javascript to poll an ASMX web service

  • 發行項

One of the main focus areas for my sports gadget was to make the gadget as simple as possible and keep all the hard work on the server - to reduce complexity for the client and if I'm honest I find it easier to do that in C# than Javascript (which I am starting to like now, but it still frustrates the hell out of me when debugging). 

I think a lot of the gadgets that are created will have one main function: to show a snapshot of data/activity for a web site/application. E.g. A MySpace gadget which allows you to see who's online or what your fav band is up to OR a property site gadget to show when new property goes up for sale in your area.

 With that in mind, I went about thinking about how to make that as easy as possible - which obviously for me was to use an simple ASMX webservice which I could expose XML data by passing it parameters as an HTTP GET and then on the gadget side calling that web service and storing the result as an XML Doc object for parsing. Below are a number of steps you can use if you don't know how to do this in Javascript (lots will as it is the basis of AJAX but somebody out there might not).

Create a webservice which returns data (say an array of objects):

 [WebMethod]
public string GetCustomers(int fakeParam) 
{   
Customer[] customerList = new Customer[3];
customerList = {new Customer("Mark","Johnston",25),
new Customer("Joe","Bloggs",40),
new Customer("Marjory","Dorrs","38")};
return customerList;
}

I made my life really simple and enabled the ASMX web service to be called by HTTP GET so I could simply call a URL using a string with any parameters added to the string in the appropriate place:

 <webServices>
        <protocols>
          <add name="HttpGet"/>
        </protocols>
      </webServices>

Now the Javascript which handles the web service. This is done by invoking the XmlHttp ActiveX object:

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

And then performing the call. This can be done synchronously or asynchronously - the latter being the more elegant solution as it doesn't cause the Sidebar to sit there idly while you wait for the web service to respond. To do this we create a call back method and set the onreadystatechange method to point to the callback method:

 webService.onreadystatechange=State_Change;
webService.open("GET",wsURL,true);
webService.send(null);

You should of course handle the return codes properly and gracefully display an error message. For the purpose of this post, we'll check when it has been returned properly in the callback method:

 

 function State_Change()
{
if (webService.readyState==4)
  {
    if (webService.status==200)
    {
       xmlDoc.load(webService.responseXml);
       ProcessData(xmlDoc);
    }
  else
    {
        HandleError();
    }
  }
}

We now have our web service back and next we want to load the return into an XML doc. Again, we invoke a second ActiveX object and pass it the return data from the web service:

 var xmlDoc = new ActiveXObject("Microsoft.XMLDom");

And then using the wonders of XPath we can iterate through the code and use the returned results in the HTML code displayed to the user.

 var customers = xmlSource.selectNodes("//customers//");
      
for (int i=0; i < customers.length; i++)
{
     divNode.innerText = customers[i].getAttribute("Name");
}

 

W3Schools XMLHttpRequest stuff - https://www.w3schools.com/dom/dom_http.asp 

W3Schools XML Parsing stuff - https://www.w3schools.com/xml/xml_parser.asp

Hope this is useful in getting started with web services and gadget JS development :-)

tags: vista, sidebar, gadget, javascript, web services

Comments