Ajax in bookmarklet :action done but answer not given

Question

Hi there fellow SOers,

I'm trying to do my own bookmarklet and I already tried to read some response in SO but nothing to answer the weird reaction I got from my script.

I'm doing an AJAX call from my bookmarklet, so I do the little trick :

var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.src = "http://example.com/urlToMyJS.js";
document.body.appendChild(newScript);
void(0);

And the urlToMyJS.js is like this :

var u = 'http://example.com/scriptToCall.php';
var request = new XMLHttpRequest();
request.open("GET", u, true);
request.onreadystatechange = function() {
  var done = 4, ok = 200;
  if (request.readyState == done && request.status == ok) {
    if (request.responseText) {
      alert(request.responseText);
    }
  }
};
request.send(null);

The weird part is :

• The javascript is always launched and scriptToCall.php is always called too (it logs every hit)
• The alert shows the responseText when I click on the bookmarklet on example.com
• Sometimes, on other sites, the alert shows nothing (but still appears)
• Some other times, the alert doesn't even show... (but I still have the log hit...)

Do you have any idea why it does that? And if yes, do you have any idea how I could make it always show the responseText?

Answer 1

status won't be ok unless you are testing the bookmarklet on your own site (example.com).

When you run the bookmarklet on a different site to example.com (which is after all the whole point of having a bookmarklet), it will be doing a cross-origin XMLHttpRequest to example.com. Depending on what browser you're using, that might do the request, but you won't be able to read the response due to the Same Origin Policy. It's an essential security feature that you can't make user-impersonating XMLHttpRequests to other servers.

If you want to make an XMLHttpRequest back to your server, you must do it from a document on your server, typically by having the bookmarklet create an <iframe> pointing to example.com.

Alternatively, use JSONP (<script> inclusion) to call scriptToCall.php.

Answer 2

Well, finally, I used another trick :

var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.src = "http://example.com/scriptToCall.php";
document.body.appendChild(newScript);
void(0);

This way (the PHP is sending a javascript header), no more AJAX. It was nonsense in my case since both file were in the same server/folder, 1 movement instead of 2!

Anyway, thanks bobince for all the details I might use in the future !