torsdag 24 mars 2011

xmlHttpRequest.status=0

Hi everyone!
This will be a short one, but I just came across some problems during the process of learning javascript again. It's a long time since I worked with client side web technology, so it's fun to discover how far things have come during recent years.

Anyway, in my effort of building a GMail Contextual gadget i have to send some data to a http server using xmlHttpRequest. The gadget runs in an iFrame which will stop you from using xmlHttpRequest. It's called cross domain blocking or something. So the first you'll have to do is to short circuit the cross domain blocking by adding the header "Access-Control-Allow-Origin: *" to the response.

In php:

header('Content-type: text/html');
header('Access-Control-Allow-Origin: *');
...

If you don't do this you will inevitably get redystate=4 and status=0 (or 'unknown' or something) for the xmlHttpRequest object.

The second mistake i made was the trigger button for the request. Using a submit input and the onClick event will generate two callbacks. One to the forms action, and one to the actual function you specified in the onClick. This messes things up and you're back with status=0 problem again.

Solution: Use input type="button". This input will not trigger the forms actionl.

Example:

<form name="fakeform" action="return false;" >
<input type="button" value="Go" onClick="doRequest();" />
</form>


Here is a good example of how to write the doRequest function: http://stackoverflow.com/questions/247483/http-get-request-in-javascript

Good luck!