title: $.ajax not able to receive JSON HTTP Response
body: <p>I am in newbie in JavaScript, JQuery and Ajax coding.
  I am using JQuery $.ajax method to invoke asyn REST call.
  Somehow I am not able to receive HTTP response JSON data.</p>
  
  <p>I can see the below alert result.
      alert(data)  method result is [Object Object]
      alert(data.toSource()) method result is ({"key1","value1"})
      alert($.parseJSON(data)) method result is nothing</p>
  
  <p>I have tested the below code in both firefox and chrome browsers. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="foo"&gt;
          &lt;label for="bar"&gt;A bar&lt;/label&gt;
          &lt;input id="bar" name="bar" type="text" value="" /&gt;
          &lt;input type="submit" value="Send" /&gt;
      &lt;/form&gt;
      &lt;!-- the result of the search will be rendered inside this div --&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
      &lt;script&gt;
          $("#foo").submit(function(event) {
              event.preventDefault();
              $("#result").html('');
              var values = $(this).serialize();
              $.ajax({
                  url: "resources/helloWorld",
                  type: "GET",
                  dataType: 'json',
                  success: function(data){
                      alert(data);
                      alert(data.toSource());
                      var r = $.parseJSON(data);
                      alert(r);
                      $("#result").html(data);
                  },
                  error:function(){
                      $("#result").html('there is error while submit');
                  }  
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>