Getting data from WCF using Ext.js "Network Error 400 Bad Request"

Question

I am trying to get data from a WCF using Ext.js. I want to click a button and get all the data. Here is what i tried so far: This is my JavaScript function:

buttonClick: function () {
        var myparams = { 'name': 'baris' };

        Ext.Ajax.request({
            url: 'http://localhost:57044/www/HelloWorldService.svc/GetMessage',//replace with ajax call
            //params: Ext.encode(myparams),
            method: 'GET',
            type: 'ajax',
            success: function (response, opts) {
                if (response.responseText) {
                    Ext.MessageBox.alert('Success', response.responseText);
                }
                else {
                    Ext.MessageBox.alert('Failed', 'Unable to get');
                }
            },
            failure: function (response, opts) {
                alert("failure="+response.responseText);
            }
        });
    }

This is my web service interface code:

namespace Mobile.Service.Maintenance
{
    [ServiceContract]
    interface IHelloWorldService
    {
        [OperationContract]
        [WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Wrapped,
               RequestFormat = WebMessageFormat.Json,
               ResponseFormat = WebMessageFormat.Json)]
        String GetMessage();
    }
}

This is web service class code:

namespace Mobile.Service.Maintenance
{
    public class HelloWorldService : IHelloWorldService
    {

        public String GetMessage()
        {
            return "Hello world from " +  "baris" + "!";
        }
    }
}

I implemented the WCF service using this tutorial. I created a console application and consumed the WCF,however i failed to do the same thing using Ext.js and Ajax. If i click the button, it always returns to the failure function. In failure function response.responseText outputs an empty string.

I am getting this error in Firebug: NetworkError: 400 Bad Request - http : //localhost:57044/www/HelloWorldService.svc/GetMessage?_dc=1399642562150

(Yanıt Başlıkları = Response Headers, İstem Başlıkları = Request Headers sorry for Turkish localization) Thanks, in advance.

This is a screenshot from the firebug.

Answer 1

Lets understand the concept for services provided by WCF services. WCF services provided two kind of services.

1) SOAP based services.

2) Rest based services - Replaced by Web API now (but still supported by WCF, if you want to develop rest based services use Web API instead)

First time when you followed the tutorial, you built SOAP based services and you are able to consume the service from your console application as console based application that are .net based does have necessary tools that support SOAP based services.

Second time when you are trying to consume services you are trying to consume services that are rest based as Javascript (ExtJs in this case) doesn't support consuming SOAP based services. At least I haven't came across any javascript framework that is capable of consuming SOAP based services from browser to its full extent.

So you should be developing REST based services, if you want to consume those services from web browser (Ext js in this case)

There are few things you need to change within your code to accomplish so

namespace Mobile.Service.Maintenance
{
    [ServiceContract]
    interface IHelloWorldService
    {
        [OperationContract]
        [WebGet(BodyStyle = WebMessageBodyStyle.Wrapped,
               RequestFormat = WebMessageFormat.Json,
               ResponseFormat = WebMessageFormat.Json
               )]
        String GetMessage();
    }
}

Change your web.config so that it you are trying to provide WCF Restful services

Add following endpoint behavior under behavior section in web.config

 <endpointBehaviors>
        <behavior name="restfulbehavior">
          <webHttp/>
        </behavior>
      </endpointBehaviors>

Add following endpoint behavior

<services>
      <service name="Mobile.Service.Maintenance.HelloWorldService">
        <endpoint address="" behaviorConfiguration="restfulbehavior"
                  binding="webHttpBinding"
                  bindingConfiguration="" 
contract="Mobile.Service.Maintenance.IHelloWorldService"/>


      </service>
    </services>

Trying running the service using your browser first.

localhost:57044/www/HelloWorldService.svc/GetMessage

if it browser display hello world from bars, congratulation you have your first restful web based services.

stackoverflow didn't let me post image, add configuration under <system.servicemodel>

an excellent article for restful services can be found here

http://www.codeproject.com/Articles/571813/A-Beginners-Tutorial-on-Creating-WCF-REST-Services

Hope this helps
Thank you