Calling an ASMX Web Service From Other Server Using jQuery and PHP

Introduction

A few months back, I got a requirement to fetch some inventory data from a server and show it to an HTML page. The interesting fact was the client server (the one that I want to show the data in) does not support .Net files. If did support them then we could directly add the web references and display the data. So what to do? I tried JSONP and Angular JSON but I could not make it to work. Then I came up with an idea.

Please see this article in my blog here.

Here, I have:
  1. A web service that gets the data from the SQL Server 2008 DB in HTML format.
  2. One HTML file where we need to show the data.
  3. jQuery latest version JavaScript file.

Using the code

So let's start.

Make an HTML table in the file like the following:

  1. <table id="inventory">  
  2.    <tr id="maintr">  
  3.       <th>  
  4.         LOCATION </td>  
  5.       <th>  
  6.        20 GP </td>  
  7.       <th>  
  8.        40 FC </td>  
  9.       <th>  
  10.        40 GP  
  11.       </th>  
  12.       <th>  
  13.        40 OT  
  14.       </th>  
  15.       <th>  
  16.        40 HCGP  
  17.       </th>  
  18.    </tr>  
  19. </table>  
Add the following line to the file:
  1. <script type="text/javascript" src="js/jquery-1.9.1.js"></script>  
Add the styles to the table:
  1. <style type="text/css">  
  2.         #inventory  
  3.         {  
  4.             font-family"Trebuchet MS" , ArialHelveticasans-serif;  
  5.             width600px;  
  6.             border-collapsecollapse;  
  7.         }  
  8.           
  9.         #inventory td  
  10.         {  
  11.             font-size10pt;  
  12.             border1px solid #25aacc;  
  13.             padding3px 7px 2px 7px;  
  14.         }  
  15.         #inventory th  
  16.         {  
  17.             font-weightbold;  
  18.             font-size10pt;  
  19.             text-alignleft;  
  20.             padding-top5px;  
  21.             padding-bottom4px;  
  22.             background-color#25aacc;  
  23.             color#fff;  
  24.             padding3px 7px 2px 7px;  
  25.             border1px solid #25aacc;  
  26.         }  
  27.           
  28.         #inventory tr.normal td  
  29.         {  
  30.             font-size10pt;  
  31.             color#000;  
  32.             background-color#ecf6f8;  
  33.         }  
  34.           
  35.         #inventory tr.alt td  
  36.         {  
  37.             font-size10pt;  
  38.             color#000;  
  39.             background-color#c0e6ef;  
  40.         }  
  41.     </style>  
Add the following Scripts to get the data from the web service:
  1. <script type="text/javascript">  
  2.         var gp20;  
  3.         var gp40;  
  4.         var fc40;  
  5.         var ot40;  
  6.         var hcgp40;  
  7.         $(document).ready(function () {  
  8.             $("#accordion").accordion();  
  9.             $.post("RetWS.php", {  
  10.                 action: "test"  
  11.             },  
  12.             function (data) {  
  13.                 var className;  
  14.                 var i = 0;  
  15.                 var xdoc = $.parseXML(data),  
  16.                 $xml = $(xdoc);  
  17.                 $($xml).find('AvailableSaleUnitsDetail').each(function () {  
  18.                     if (i % 2 != 0) {  
  19.                         className = 'alt';  
  20.                     }  
  21.                     else {  
  22.                         className = 'normal';  
  23.                     }  
  24.                     if (parseInt($(this).find('_x0032_0GP').text()) > 50) {  
  25.                         gp20 = '50 +';  
  26.                     }  
  27.                     else {  
  28.                         gp20 = $(this).find('_x0032_0GP').text();  
  29.                     }  
  30.   
  31.                     if (parseInt($(this).find('_x0034_0FC').text()) > 50) {  
  32.                         fc40 = '50 +';  
  33.                     }  
  34.                     else {  
  35.                         fc40 = $(this).find('_x0034_0FC').text();  
  36.                     }  
  37.   
  38.                     if (parseInt($(this).find('_x0034_0GP').text()) > 50) {  
  39.                         gp40 = '50 +';  
  40.                     }  
  41.                     else {  
  42.                         gp40 = $(this).find('_x0034_0GP').text();  
  43.                     }  
  44.   
  45.                     if (parseInt($(this).find('_x0034_0OT').text()) > 50) {  
  46.                         ot40 = '50 +';  
  47.                     }  
  48.                     else {  
  49.                         ot40 = $(this).find('_x0034_0OT').text();  
  50.                     }  
  51.   
  52.                     if (parseInt($(this).find('_x0034_0HCGP').text()) > 50) {  
  53.                         hcgp40 = '50 +';  
  54.                     }  
  55.                     else {  
  56.                         hcgp40 = $(this).find('_x0034_0HCGP').text();  
  57.                     }  
  58.   
  59.                     $("#inventory").append("<tr class=" + className + " ><td id=" + $(this).find('Location').text() + ">" + $(this).find('Location').text() + "</td> <td>" + gp20 + "</td><td >" + fc40 + "</td> <td>" + gp40 + "</td><td >" + ot40 + "</td><td >" + hcgp40+ "</td> </tr>");  
  60.                     i++;  
  61.                 });  
  62.             })  
  63.   
  64.         });  
  65.   
  66.     </script>  
Here, RetWS.php is my PHP file that actually gets the data from an asmx web service from another server.

In the RetWs.php you can do the following codes:
  1. <?php  
  2. if(isset($_POST['action']) && !emptyempty($_POST['action'])) {  
  3.     $action = $_POST['action'];  
  4.     switch($action) {  
  5.         case 'test' : doWebService();  
  6.         break;       
  7.     }  
  8. }  
  9. function doWebService()  
  10. {     
  11.   $client = new SoapClient("http://Here paste link to your webservice");  
  12.   echo $client->getInventoryForWs()->getInventoryForWsResult;  
  13. }  
  14. ?>  
The link may look like:

http://www.something.com/Reports/Marketing/Mywebservice.asmx?WSDL

Make sure that there are no spelling mistakes.