Use Javascript to connect to WCF Web Service

Does anyone know how to use Javascript to connect to a WCF Web Service?

All I need at this point is to actually connect to the web service, and be notified that the connection was successful.

Does anyone know how I can do this?

Contents hide

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If your WCF service is within the same domain you might use the below function that would perform the call

function TestingWCFRestWithJson() {
                $.ajax({
                    url: "http://localhost/Service/JSONService.svc/GetDate",
                    dataType: "json",
                    type: "GET",
                    success: function (data, textStatus, jqXHR) {
                       // perform a success processing
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                       // show error to the user about the failure to invoke the service    
                    },
                    complete: function (jqXHR, textStatus) {//any process that needs to be done once the service call is compelte
                    }
                });
            }

If your WCF service is in some other domain other than your calling applications domain then you would need to perform a JSONP call as shown below:

function TestingWCFRestWithJsonp() {
                $.ajax({
                    url: "http://domain.com/Service/JSONPService.svc/GetDate",
                    dataType: "jsonp",
                    type: "GET",
                    timeout: 10000,
                    jsonpCallback: "MyCallback",
                    success: function (data, textStatus, jqXHR) {
                    },
                    error: function (jqXHR, textStatus, errorThrown) {    
                    },
                    complete: function (jqXHR, textStatus) {
                    }
                });
            }
            function MyCallback(data) {
                alert(data);
            }

When a JSONP call is performed using JQuery’s $.ajax the complete/success/error methods are not fired rather a callback method as shown is fired which needs to be handled by the WCF service. There is a attribute “crossDomainScriptAccessEnabled” provided by the WCF framework that identifies if the request is a JSONP call and writes the content back to the stream to invoke the callback function with data. This is available on the binding element as shown below:

<webHttpBinding>
        <binding name="defaultRestJsonp" crossDomainScriptAccessEnabled="true">
          <readerQuotas maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxDepth="64" maxNameTableCharCount="2147483647" />
          <security mode="None" />
        </binding>
</webHttpBinding>

Method 2

Given you’d properly written/configured your/the WCF service you should be able to load the following url:

http://somedomain.com/somewcfservice.svc/jsdebug

and call the exposed methods.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating