title: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String: <?xml version="1.0" encoding="utf-8"?>
body: <p>am working with ExtJs 4.0. </p>
  
  <p>I am trying to fetch data from database from web service and trying to set in grid panel but getting following error <strong>Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String:</strong></p>
  
  <p>extjs code:</p>
  
  <pre><code>Ext.application({
      name: 'HelloExt',
      launch: function() {
          // Model definition and remote store (used Ext examples data)
          Ext.define('ForumThread', {
              extend: 'Ext.data.Model',
              fields: ['countryId', 'countryName'],
              idProperty: 'countryId'
          });
  
          var store = Ext.create('Ext.data.Store', {
              pageSize: 20,
              model: 'ForumThread',
              autoLoad: true,
              proxy: {
                  type: 'ajax',
                  url: '../reports/report.asmx/display',
                  contentType: "application/json; charset=utf-8;",
                   //url: '/grid.json',
                  reader: {    
                      root: 'Data',          
                      type: 'json'
                  }
              }
          });
  
          // Define grid that will automatically restore its selection after store reload
          Ext.define('PersistantSelectionGridPanel', {
              extend: 'Ext.grid.Panel'
  
          });
  
          // Create instance of previously defined persistant selection grid panel
          var grid = Ext.create('PersistantSelectionGridPanel', {
              autoscroll: true,
              height: 300,
              renderTo: Ext.getBody(),
              //region: 'center',
              store: store,
              multiSelect: true, // Delete this if you only need single row selection
              stateful: true,
              forceFit: true,
              loadMask: false,
              viewConfig: {
                  stripeRows: true
              },
              columns:[{
                  id: 'countryId',
                  text: "countryId",
                  dataIndex: 'countryId',
                  flex: 1,
                  sortable: false
              },{
                  text: "countryName",
                  dataIndex: 'countryName',
                  width: 70,
                  align: 'right',
                  sortable: true
              } ]
          });
      }
  });
  </code></pre>
  
  <p>reports.asmx</p>
  
  <pre><code> [WebService(Namespace = "http://tempuri.org/")]
          [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
          [ToolboxItem(false)]
          // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        [System.Web.Script.Services.ScriptService]
   [Serializable]
  
          public class report : System.Web.Services.WebService
              {
  
                  [WebMethod]
                  public string HelloWorld()
                  {
                      return "Hello World";
                  }
                  [WebMethod]
                  [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
                  public string display()
                  {
                       employee obj = new employee();
  
                  JavaScriptSerializer serializer = new JavaScriptSerializer();
                  return serializer.Serialize(obj.selectAll_employeeDetail(0, 0, 0));
                  }
              }
  </code></pre>
  
  <p>can anyone suggest me... whats the wrong in my code?/ </p>