jXHR (JSON-P XHR) Demo

Mullet, what?

OK, fair enough, the domain name needs some explaining. jXHR.com was taken. And then the wicked mind of Dion Almaer christened jXHR as the mullet API, and so I was inspired to get mulletXHR.com and mullet.xhr.me as domains to honor the project's heritage.

Questions or Thoughts? Contact me @getify on twitter. If you like this project, you also might like to check out LABjs (Loading And Blocking Javascript), mpAjax (multi-part Ajax responses), and flXHR (easy cross-domain Ajax).

Current version: 0.1 jXHR-0.1.zip

This demo attempts to load 4 JSON-P scripts (cross-domain) when you click the button.

1. Call #1 will succeed.
2. Call #2 will fail because the JSON-P is mal-formed. You will note that the onerror handler is called in this case in all tested browsers, except Opera 9.6 (win).
3. Call #3 will fail because the script returns a 500 server error. Browser support for onerror in this case is decent but not perfect:
   • IE7 (win): onerror fires.
   • FF3.5.1 (win): onerror doesn't fire.
   • Chrome 3 (win): onerror fires.
   • Safari 4 (win): onerror fires.
   • Opera 9.6 (win): onerror doesn't fire.
4. Call #4 will fail because no such script exists (404). Currently, it appears only IE7 supports this error handling.

Documentation

jXHR is less than 1.3k minimized (and ~690 bytes gzip'd), and has no dependencies.

jXHR is a clone-variant of the XMLHttpRequest object API, meaning it is (for the most part) API compatible. Some properties are not supported, such as responseText/XML/Body, and the request/response header functions are no-op's. Also, only "GET" is supported for the 'method' parameter of open(). And jXHR currently ignores any 'data' value passed to the send() function. All data you wish to send must be manually serialized into the 'url' parameter of open().

jXHR makes cross-domain JSON-P styled calls. The URL you pass to open() should have a parameter (usually named "callback") whose value is "?". The ? placeholder will be replaced by an internal callback created by jXHR. However, you can have the JSON-P data passed to your own callback handler by defining one for the "onreadystatechange" property of your jXHR instance.

Note: The "onreadystatechange" function will be called for all changes of readyState, like with normal XHR, so you need to filter it for readyState == 4 to handle the data object returned with the JSON-P call.

View the source of this page to see the simple XHR API usage, including the use of the "onreadystatechange" for the callback, and "onerror" for error handling.