jquery getJSON from local socket

Question

I am having trouble with the json.getJSON method. Here is my current code:

var jqxhr = $.getJSON("http://127.0.0.1:5002?callback=?", function() {
                alert("success");
            })
            .success(function() { alert("second success"); })
            .error(function() { alert("error"); })
            .complete(function() { alert("complete"); });

It is almost exactly like the example from the jquery documentation. However, I never hit the callback function (alert("success")). I always end up receiving the error alert. With the empty callback on the URL I am using, I can see a successful JSON GET method in FireBug and FireBug renders the JSON perfectly. Without the callback in that URL, I do not see the JSON in Firebug. However, when I hit http://127.0.0.1:5002 directly with firefox, the JSON appears just fine.

Here is the JSON:

{"AllData":[{"dataName":"TestData","data":[0,0,0],"color":"Green"}]}

I have tried both with and without the callback on the URL with MIME types application/json, application/javascript, application/x-json, application/x-javascript, text/javascript, and text/plain but cannot receive a "success" alert from the .getJSON.

This JSON parses just fine with jquery.parseJSON and even works perfectly when I use .getJSON and pull the JSON from a .js file.

Any suggestions? Is reading JSON from a socket with .getJSON even possible?

does adding a slash to your url help? `http://127.0.0.1:5002/?callback=?` — Dutchie432, Mar 30 '11 at 20:08
have you looked in firebug or fiddler to see what's happening? — SavoryBytes, Mar 30 '11 at 20:11
Dutchie, when I add a slash I receive the same results as without it. — Jacob Huggart, Mar 30 '11 at 20:14
I have looked in Firebug. Everything looks like it should be fine, but the getJSON method will not hit the success alert. — Jacob Huggart, Mar 30 '11 at 20:15
Yes, I am hitting `http://127.0.0.1:5002` in the browser and the JSON is displayed just fine — Jacob Huggart, Mar 30 '11 at 20:22
@Michael: The `?callback=?` makes it JSONP, which can bypass the same origin policy. — gen_Eric, Mar 30 '11 at 20:23
@Jacob: For this to work, `http://127.0.0.1:5002?callback=?` needs to return JSONP, not JSON. It needs to return `callback({a:b})`, not just `{a:b}`. — gen_Eric, Mar 30 '11 at 20:24
@Rocket I tried JSONP. I made `http://127.0.0.1:5002` send out Do([JSONHERE]) and used `http://127.0.0.1:5002/?callback=Do` as the URL in getJSON — Jacob Huggart, Mar 30 '11 at 20:28
@Jacob: I assume you had a `Do` function in your JavaScript? — gen_Eric, Mar 30 '11 at 20:31
@Rocket. Yes. I also just tried it without the Do (just wrapped the JSON in parens, and still got nothing. — Jacob Huggart, Mar 30 '11 at 20:32
@Jacob: Is the url that this code is on start with `http://127.0.0.1:5002`? — gen_Eric, Mar 31 '11 at 14:08
@Jacob: Then you need to use [JSONP](http://en.wikipedia.org/wiki/JSONP), and `?callback=?`, because of the [Same Origin Policy](http://en.wikipedia.org/wiki/Same_origin_policy). — gen_Eric, Mar 31 '11 at 14:20
@Jacob: Take a look at [this question](http://stackoverflow.com/questions/1217926/jsonp-callback-doesnt-execute-when-running-at-localhost). The answer stated that browsers don't always allow requests to localhost for security reasons. — gen_Eric, Mar 31 '11 at 15:11

score 1 · Accepted Answer · answered Mar 30 '11 at 20:30

1

You're adding ?callback=? which turns this into a JSONP request. When echoing the JSON, you need to wrap it in the callback function passed to the server.

So, instead of outputting just JSON:

{"AllData":[{"dataName":"TestData","data":[0,0,0],"color":"Green"}]}

You need to output JSONP:

cFunc({"AllData":[{"dataName":"TestData","data":[0,0,0],"color":"Green"}]});

Replace cFunc with the value of the callback GET parameter ($_GET['callback'] in PHP, for example). jQuery will send a name for a callback function when it does the XHR request, this name will be a reference to the callback passed to $.getJSON.

answered Mar 30 '11 at 20:30

gen_Eric

223,194
41
299
337

If I change the getJSON URL to `http://127.0.0.1:5002/?Do=?`, the JSON shows up (wrapped in Do()) in the message response in Firebug. But I still get an error from .getJSON – Jacob Huggart Mar 30 '11 at 20:36
@Jacob: Keep the URL as `http://127.0.0.1:5002?callback=?`. jQuery will replace the `callback=?` with a value (such as `callback=jQuery001232`) when it does the request. When you print the response, wrap it in the value of the `callback` GET parameter (in this case `jQuery001232`). – gen_Eric Mar 30 '11 at 20:42
First attempt was actually `http://127.0.0.1:5002?Do=?`. My second attempt was to hit `http://127.0.0.1:5002/Do=?`, which gave me "GET DO = " and returned the JSON response as Do({Json}), but I still ended up with an error from .getJSON – Jacob Huggart Mar 30 '11 at 20:44
@Jacob: Read my comment above. – gen_Eric Mar 30 '11 at 20:46
I see what you're saying, but the JSON is generated before the callback. So I cannot wrap the JSON before the .getJSON method determines success/error (or before I find out what jquery replaces the ?callback=? with) – Jacob Huggart Mar 30 '11 at 20:48
@Jacob: I know it's generated before, that's kinda how AJAX works. So, when you *generate* the JSON, wrap it in the value of the `callback` parameter! How are you generating the JSON? The script that *generates* the JSON needs to read the `callback` parameter, and wrap the JSON in it. – gen_Eric Mar 30 '11 at 20:52
If I leave the URL in .getJSON as ?callback=? then each time the AJAX call is made, the GET parameter is different. If there is a way to dynamically know what that param is going to be, I can try it. – Jacob Huggart Mar 30 '11 at 21:06
@Jacob: Yes, the GET is supposed to be different each time! jQuery creates a new function each call. You need to use the value of the GET parameter. It's dynamic, there is no way to calculate it, you need to read the value from the query string each time! – gen_Eric Mar 30 '11 at 21:08
@Rocket. Done... and the .getJSON still fails. There must be a better solution. I don't know why just hitting http://127.0.0.1:5002 will not work. I don't think the ?callback should even be necessary. – Jacob Huggart Mar 30 '11 at 21:16
FYI, hitting 127.0.0.1:5002 returns the JSON in the HTTP Response. But .getJSON doesn't pick it up. – Jacob Huggart Mar 30 '11 at 21:50
@Jacob: What is the URL of the page that the `$.getJSON` call is on? If it does NOT start with `127.0.0.1:5002` then the `?callback=?` is needed. – gen_Eric Mar 31 '11 at 01:02
Ok. I can believe that. In any event, I have tried your suggestions and have still had no success. – Jacob Huggart Mar 31 '11 at 13:57
@Jacob: I dunno, dude. Check Firebug to make sure that the callback parameter sent matches what is returned. – gen_Eric Mar 31 '11 at 14:30
Me too. This shouldn't be so difficult. – Jacob Huggart Mar 31 '11 at 14:54
@Jacob: Are you sure you're correctly wrapping the JSON when it's being generated? – gen_Eric Mar 31 '11 at 14:59
@Jacob: Try to change `.error(function() { alert("error"); })` to `.error(function(xhr, err, exp) { alert("error: "+err); })` – gen_Eric Mar 31 '11 at 16:13
I got the error to display. Now it's giving me "parsererror". Which doesn't make sense, since the JSON that is in the "GET" was parsed by .parseJSON. Any ideas? FYI, I have already tried using other JSON libraries to get this to work. Also, I tried hosting on another machinee to prevent the localhost security "feature" from interfering. – Jacob Huggart Mar 31 '11 at 20:58
@Jacob: Can you post the EXACT response from the GET request? – gen_Eric Mar 31 '11 at 21:00
I hardcoded the callback method. So my request URL is currently http://ip:5002/?callback=do and the response is do({"AllData":"TEST"}) – Jacob Huggart Mar 31 '11 at 21:02
@Jacob: Do you have a function called `do`? – gen_Eric Mar 31 '11 at 21:04
You were right about parsing the randomly generated callback and then including that string when sending the JSONP. I just implemented it incorrectly. Thanks for all your help – Jacob Huggart Mar 31 '11 at 23:03

jquery getJSON from local socket

1 Answers1