XHR

Everything related to remote network connections.

xhr

The classic XMLHttpRequest sometimes also known as the Greek God: Ajax. Not to be confused with AJAX the cleaning agent.

detail

This method has a few new tricks.

It is always invoked on an element collection and uses the behaviour of html.

If there is no callback, then the responseText will be inserted into the elements in the collection.

syntax

x$( selector ).xhr( location, url, options )

or accept a url with a default behavior of inner:

x$( selector ).xhr( url, options );

or accept a url with a callback:

x$( selector ).xhr( url, fn );

arguments

• location String is the location to insert the responseText. See html for values.
• url String is where to send the request.
• fn Function is called on status 200 (i.e. success callback).
• options Object is a JSON object with one or more of the following:
  • method String can be get, put, delete, post. Default is get.
  • async Boolean enables an asynchronous request. Defaults to false.
  • data String is a url encoded string of parameters to send. - error Function is called on error or status that is not 200. (i.e. failure callback).
  • callback Function is called on status 200 (i.e. success callback).
  • headers Object is a JSON object with key:value pairs that get set in the request's header set.

response

• The response is available to the callback function as this.
• The response is not passed into the callback.
• this.reponseText will have the resulting data from the file.

example

x$('#status').xhr('inner', '/status.html');
x$('#status').xhr('outer', '/status.html');
x$('#status').xhr('top',   '/status.html');
x$('#status').xhr('bottom','/status.html');
x$('#status').xhr('before','/status.html');
x$('#status').xhr('after', '/status.html');

or

// same as using 'inner'
x$('#status').xhr('/status.html');

// define a callback, enable async execution and add a request header
x$('#left-panel').xhr('/panel', {
    async: true,
    callback: function() {
        alert("The response is " + this.responseText);
    },
   headers:{
       'Mobile':'true'
   }
});

// define a callback with the shorthand syntax
x$('#left-panel').xhr('/panel', function() {
    alert("The response is " + this.responseText);
});