Three Ways to Consume Web Services with AJAX
page 3 of 9
by Xianzhong Zhu
Feedback
Average Rating: 
Views (Total / Last 10 Days): 65385/ 76

Consume Web Services the straight way—through XMLHttpRequest object

As is well known, Web Services can be accessed via the HTTP-based protocol. The great objectXMLHttpRequest, therefore, may be used directly to call Web Services. According to the features of XMLHttpRequest and Web Services and what the client side needs, the whole process can be divided into three detailed steps.

·         Send the HTTP requests to Web Services via XMLHttpRequest and get the corresponding HTTP responses.

·         Resolve the XML data returned from the server and pick out the needed data.

·         Render the acquired data via the client-side JavaScript.

No doubt that the difficulty lies in Step 2resolving XML in the client side. In this aspect, different browsers have offered different solutions. In Microsoft Internet Explorer, we can achieve our goal by resorting to the ActiveX controlXMLDOM. As for other browsers, such as Mozilla's FireFox, Opera, etc., the third-party script libraries are often borrowed in order to resolve XML data. For example, Google's google ajaxslt can resolve XML and convert XSLT.

Joyfully, to obtain the required data from the XML object returned via Web Services does not need to resolve XML completely. Thus, besides the HTTP protocol scheme, we can use SOAP (Simple Object Access Protocol) to call a Web Service, such as the SOAP-based JavaScript librarysoapclient.js. This library can be downloaded from www.guru4.net and the accompanied source codes in this article also provide one. Figure 1 gives us the general depiction of this small framework.

Figure 1: The mechanism of calling web services provided by soapclient.js

This script is so direct and simple to use that we only give a corresponding sample.

First, define the Web service as usual.

Listing 1

[WebMethod]
Public string HelloWorld()
{
  Return "Hello World!";
}

Next, write the client-side JavaScript to call the Web service.

Listing 2

function HelloWorld()
{
  var pl =new SOAPClientParameters();
  SOAPClient.invoke(url, "Hello World", pl, true, HelloWorld_callback);
}
function HelloWorld_callback(r)
{
  alert(r);
}

Here, we only illustrate an ABC example; for more complicated ones please refer to the related web site.


View Entire Article

User Comments

Title: Sr. Web Developer   
Name: Nelson Xu
Date: 2008-09-04 11:20:30 AM
Comment:
Hi Xianzhong,
I reall enjoy your article and code sample.
The reason that "Undefined" appears is because you have () for OnSuccess when you call Web service.

SumServiceSpace.SumService.GetSum(
eval(form1.TextBoxA.value),
eval(form1.TextBoxB.value),
OnSuccess());

Message will go away if you remove () after OnSuccess.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-07-23 2:02:47 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search