JSONP and DOCTYPE Errors

Question

I'm running into a weird problem.

I'm communicating with my server using AJAX. (I'm running my web application on localhost). Server is located on, say, http://www.example.com

To bypass the Same Origin Policy, I'm using JSONP. I dynamically create a <script> tag and load the data from my server.

So far so good.

Then I decided to upload my web application to this subdomain: http://m.example.com

That's when I run into crazy errors. Sometimes the page loads, sometimes it doesn't. When it doesn't load, Firebug throws a DOCTYPE error.

I did some research and came across this stackoverflow post: firebug returns syntax error in doctype?

Quoting an answer in this link:

This usually happens because you are loading an HTML document as a script. This is often caused by <script src=""></script> (i.e. a relative URI pointing at the current, HTML, document)) or one of the scripts pointing to a 404 error.

Pretty helpful stuff. Based on all that, I've concluded from all the above that whenever my server responds slowly, the <script> tag's src attribute is null. Since that throws a 404 error, I get a DOCTYPE error in Firebug. Whenever my server responds quickly, there are no issues and everything works fine.

How do I solve this problem? I could put a manual timeout or something, but that wouldn't exactly be foolproof and an elegant solution.

Any help guys?

EDIT:

Here's some code:

This function is used to create the script tag dynamically:

function appendScriptToHead() {
    var element = document.createElement("script");  
    element.src = 'http://www.example.com/?data&callback=callfunction'; 
    document.getElementsByTagName("head")[0].appendChild(element) 
}

This callback function is called when the above url containing JSONP data is loaded:

function callfunction(response) {  
    alert(response);  
}

Solve what problem? If you want to solve the `src` being `null`, add a check for `null` before inserting the script tag. If you want to be able to "catch" the error, timeouts are the way to go. — Matt, Jul 12 '12 at 10:59
Hi @RoToRa. I've edited my question and included the code that I'm currently using to retrieve the JSONP data from my server. Thanks! — wiseindy, Jul 12 '12 at 10:59
Hi @Matt! Thanks for your input. Could you give me a little code sample how to check if `src` is null? — wiseindy, Jul 12 '12 at 11:06

score 1 · Answer 1 · answered Jul 12 '12 at 11:47

1

I think there's a bit of misunderstanding here. Your script element will always have its src property set, but its contents depends on your server's response. I doubt it'll be error 404 (as it refers to the element not found, which is hardly repetitive), but it can be of 500 flavors.

I suggest debugging your queries just as they are (i.e., opening http://www.example.com/?data&callback=%callfunction% with your browser or some scripted HTTP UserAgent, if you feel industrious), to see what might be wrong with the logic which selects the script to be loaded.

answered Jul 12 '12 at 11:47

raina77ow

103,633
15
192
229

Hi @raina77wow. I understand what you mean. I tried opening `http://www.example.com/?data&callback=%callfunction%` in my browser directly. It returns a JSONP string alright. But the server response varies. Sometimes it opens immediately, sometimes it takes a while. How can I bypass this uncertainity in code? – wiseindy Jul 15 '12 at 05:47
I'd suggest using the approach described [in this answer](http://stackoverflow.com/questions/3768768/loading-javascript-dynamically-and-how-to-check-if-the-script-exists). No need to define an extra variable, though: you can just check the function you intend to load. – raina77ow Jul 16 '12 at 14:27

JSONP and DOCTYPE Errors

EDIT:

1 Answers1