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);  
}

Answer 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.