Use Javascript to connect to WCF Web Service

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>