Reputation: 9855
I created a simple AJAX-enabled WCF service based on the MSDN tutorial
[ServiceContract(Namespace = "AjaxWcf")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AjaxWcf
{
[OperationContract]
public string AssessString(string input)
{
if (input.Contains("1"))
return "true";
return "false";
}
which totally works when i generate the js proxy and use ASP.NET AJAX library to call.
However when i switch over to jQuery to make the ajax() call, it get an [object XMLHttpRequest] error
$.ajax({ url: "AjaxWcf.svc/AjaxWcf/AssessString",
type: "POST",
dataType: "text",
processData: false,
data: { input: inputValue },
error:
function (msg) { $("#serviceResponse").html(msg.toString()); },
success: function (response)
{ $("#serviceResponse").html(response); }
});
I have read around about what to make of that error and a suggestion to alter the error delegate to peek further into the problem
function (xmlHttpRequest, textStatus, errorThrown) {
if (xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
return; // it's not really an error
else
$("#serviceResponse").html(errorThrown);
},
which then caused IE to to choke
Microsoft JScript runtime error: Could not complete the operation due to error c00c023f.
Apparently that is an IE9-only problem, but testing this in Google Chrome still did not yield any web service invocation (breakpoint never gets hit). And if i use back to old error delegate, the same [object XMLHttpRequest] problem. I am kind of surprised at the lack of materials discussing a simple POST call with jQuery to WCF service, and wonder what is missing?
Note: this is using jQuery 1.4.1, but as far as i've seen using 1.7.1 still did not call the WCF service.
Upvotes: 1
Views: 11660
Reputation: 9855
For reasons not fully understood at this point, it appears that jQuery AJAX to WCF service should be carried out using JSON data type.
$.ajax({ url: "AjaxWcf.svc/AssessString",
type: "POST",
dataType: "json",
contentType: "application/json",
processData: false,
data: postData,
error: function (msg)
{ alert(msg.responseText); },
success: function (response)
{ $("#serviceResponse").html(response.d); }
});
This way the browser is able to make the request out without hitting errors and reaching the service endpoint.
Upvotes: 2