Call webservice angularJS

Question

Here is my example, I don't get anything on button click.

    <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script type="text/javascript" src="main.js" defer></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>
<body ng-app="myAppModule">
    <div ng-controller="myAppController" style="text-align: center">

        <button ng-click="calculateQuantity()">Calculate</button>

    </div>

    <script>
        var myAppModule = angular.module('myAppModule', []);
        myAppModule.controller('myAppController', function ($scope, $http) {
            var CelsiusVal = "10";
            $scope.calculateQuantity = function () {
                alert("I'm here")
                $http.get('http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit', { params: { Celsius: CelsiusVal } }).
                success(function (data) {alert("succ");})
                .error(function () { alert("error"); }); 
            };
        });
    </script>
</body>
</html>

I need to get a result from a web service.

NOTE Updated new source example!

@VasiliyStavenko new source is above, but again no resault.... http://postimg.org/image/5pzfdndz7/ — user_odoo, Nov 13 '15 at 10:57

Margus · Accepted Answer · 2015-11-13T13:09:09.143

First, your code files should be called:

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js" defer></script>

where defer tells it should be loaded after dom elements are loaded.

Second, instead

$http.get('http://http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit' ...

you should have

$http.get('http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit' ...

Third, instead

.success(function (data) {alert("succ");});
error(function () { alert("error"); });

you should have

.success(function (data) {alert("succ");})
.error(function () { alert("error"); });

Finally

You cannot send cross domain AJAX requests because of the same origin policy restriction that's built into the browsers. In order to make this work your HTML page containing the jQuery code must be hosted on the same domain as the Web Service (http://www.w3schools.com).

There are workarounds that involve using JSONP on the server, but since your web service is SOAP this cannot work.

The only reliable way to make this work if you cannot move your javascript on the same domain as the web service is to build a server side script that will be hosted on the same domain as the javascript code and that will act as a bridge between the 2 domains. So you would send an AJAX request to your server side script which in turn will invoke the remote web service and return the result.

If they had GET request enabled you could use a CORS proxy, that does this. It is simple as querying

"https://crossorigin.me/http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit&Celsius=" + CelsiusVal

but in this case it is not possible.

Example on how to do this in c# (assumes it is in the same server)

public static string GetFahrenheit(string celsius="20")
{
    const string url = "http://www.w3schools.com/xml/tempconvert.asmx";
    const string action = "http://www.w3schools.com/xml/CelsiusToFahrenheit";
    var soapEnvelopeXml = new XmlDocument();
    var soapString =
        $@"
        <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>
            <CelsiusToFahrenheit xmlns ='http://www.w3schools.com/xml/'>
                <Celsius> {celsius} </Celsius>
            </CelsiusToFahrenheit>
            </soap:Body>
        </soap:Envelope>";
    soapEnvelopeXml.LoadXml(soapString);
    var webRequest = (HttpWebRequest)WebRequest.Create(url);
    webRequest.Headers.Add("SOAPAction", action);
    webRequest.ContentType = "text/xml;charset=\"utf-8\"";
    webRequest.Accept = "text/xml";
    webRequest.Method = "POST";
    using (var stream = webRequest.GetRequestStream())
    {
        soapEnvelopeXml.Save(stream);
    }
    var asyncResult = webRequest.BeginGetResponse(null, null);
    asyncResult.AsyncWaitHandle.WaitOne();
    using (var webResponse = webRequest.EndGetResponse(asyncResult))
    using (var rd = new StreamReader(webResponse.GetResponseStream()))
    {
        var soapResult = rd.ReadToEnd();
        var xmlDoc = new XmlDocument();
        xmlDoc.LoadXml(soapResult);
        var nsmgr = new XmlNamespaceManager(xmlDoc.NameTable);
        nsmgr.AddNamespace("soap", "http://schemas.xmlsoap.org/soap/envelope/");
        nsmgr.AddNamespace("w3", "http://www.w3schools.com/xml/");
        nsmgr.AddNamespace("xsd", "http://www.w3.org/2001/XMLSchema");
        nsmgr.AddNamespace("xsi", "http://www.w3.org/2001/XMLSchema-instance");
        var result = xmlDoc.DocumentElement?.SelectSingleNode("/soap:Envelope/soap:Body/w3:CelsiusToFahrenheitResponse/w3:CelsiusToFahrenheitResult", nsmgr)?.InnerText;
        return result;
    }
}

After that you could create a web method :

[WebMethod]
public static string GetFahrenheitFromW3(string celsius)
{
    return GetFahrenheit(celsius);
}

and call it from javascript

$http.get('yourController.aspx/GetFahrenheitFromW3', { params: { Celsius: CelsiusVal } })
  .success(
    function (data) {
      alert("succ: "+data[0]);
    })
  .error(
    function () { 
      alert("error"); 
    }
  );

In any case to avoid CORS you need to use a proxy service and deal with it in the server side. — Margus, Nov 13 '15 at 13:16
If you missed my point - it is possible, but not as easy or straight forward as you might think. For credibility sake I tested the c# code and it does work. — Margus, Nov 13 '15 at 13:27

score 0 · Answer 2 · answered Nov 12 '15 at 11:28

0

Your issue is pretty simple: you've misspelled the http:// address. Just change:

http://http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit'

to

http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit'

answered Nov 12 '15 at 11:28

uksz

18,239
30
94
161

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

there are several issues with your code:

your URL is wrong: http://http://www.w3schools.com/xml/tempconvert.asmx?op=CelsiusToFahrenheit' has double http://...
Your error function is written in the wrong position:

$http.get('...', { params: { ... } }) .success(function (data) { alert("succ"); }) .error(function () { alert("error"); });

will work better for you.

To emphasize the mistake, i'll define a variable to hold your get_obj in your Code

var httpGet = $http.get('...', { params: { ... } });
httpGet.success(function (data) { alert("succ"); });
**error(function () { alert("error"); });**

even after you finish these two, there is a CORS problem trying to access w3school.com from whatever your server is...

You can find some additional info about CORS and SOAP on this SO Question

I'm corrected 1 and 2 step, Do you have any free .asmx webservice with parameter for testing my example. — user_odoo, Nov 13 '15 at 10:59
what do you mean free .asmx webservice **with parameters** ... ?? — Tomer W, Nov 13 '15 at 11:55

Call webservice angularJS

3 Answers3

First, your code files should be called:

Second, instead

Third, instead

Finally