Using JQuery to consume Web Service via SOAP

This is my first blog in English, maybe a little weird, but I will write all my blogs in English from now on. No for special purposes or something else, just to practice my English and write down my thinking and idea during the work.

 

Background:

We have already had a Web service, and now I need to access the web service on java script. Yes, most of you know what is web service and SOAP and WSDL etc., but before the beginning this article, I would like to introduce these basic concepts:

1. Web service: A method of communication between two electronic devices( computers ) over a network. If you are interested in the detail, see here.

2. SOAP: Simple Object Access Protocol, it defines how web service works. You have to remember two things: XML and HTTP. see here.

3. WSDL: Web Service Description Language. I consider it as what a web service provides. see here.

How to consume a web service:

All right, we know what are web service and SOAP and WSDL, but how do they work? Firstly, we must have a web service, I create a web service in Asp.net, so easy, isn’t it? You will see 4 marks, what are they ? They’re the C# syntax to create a web service, but has nothing to do with the standard web service protocol.

1. WebService Attribute indicates this class is a web service.

2. ScriptService Attribute, we will discuss it in another article.

3. WebMethod attribute indicate this method should be treated as a web method.

4. The web method with a parameter and a return value, to demonstrate how to consume a web method with parameter.

Now we can view this web service in browser, you will see the brief of the web service.

 

1. WebService1 is the web service we have created.

2. Service Description is the WSDL of this web service, if you click the link you will see the detail of the the description.

3. Web methods we defined.

 

We have defined a web service, but how to consume it? Click the Hello method, the web URL changes to “http://localhost:14828/WebService1.asmx?op=Hello”, we will see the detail definition of the web service method:

The first block is the SOAP definition of the request while the second block is the response definition.

1. The request http post header.

2. The request body.

3. The input parameter userName, replace the “string” placeholder to the concrete user name.

4. The response header.

5. the response body.

6. The response result, read this value to get the result.

 

According to the SOAP, we know how to request and response the Hello method. JQuery provides an easy way to do this:

 

function Hello(userName) {
        
         var data = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\
                    <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">\
                      <soap:Body>\
                        <Hello xmlns=\"http://tempuri.org/\">\
                          <userName>" + userName + "</userName>\
                        </Hello>\
                      </soap:Body>\
                    </soap:Envelope>";

         $.ajax("http://localhost:14828/WebService1.asmx?op=Hello",
               { type: "POST",
                   data: data,
                   contentType: "text/xml; charset=utf-8",
                   success: successCallback
               });       
     }

    function successCallback(response, status, xhr)
    {
        $("#txtResponse").attr("value", response.xml);        
    }

As you can see, the Hello method post the SOAP body to server and the server responses the SOAP response body to client. In client, we can use JQuery to parse the response xml and get the data we want.

Summary:

This is a simple demo to use JQuery to consume a web service via SOAP, there are still some issues we should consider while consuming a Web service via java script, such as cross domain etc. I think if we understand the basic concepts clearly, we can make things easier.

Hope this helpful.