Butterfly JS Ajax module documentation

In all the following examples, the Ajax module is loaded in the variable B as follow:

var B = loader.getModule('bCore');
B.Ajax = loader.getModule('bAjax');

B.Ajax.request(url, behaviorsStatus, behaviorsReadyState, method, params, options)

Method to execute a XMLHttpRequest call.

The function arguments are:

  • url: Url to call.
  • behaviorsStatus: Associative array of functions. The keys are HTTP status (404, 200...) and the values are callbacks to execute according to the response's status.
  • behaviorsReadyState: Associative array of functions. The keys are XMLHttpRequest possible states (0 to 4) and the values are callbacks to execute according to the XMLHttpRequest current state when the onreadystatechange event is fired.
  • method: HTTP method to use for the call.
  • params: Associative array of parameters to use in the call.
  • options: Options to use for the request set up. For the moment, the only option is: async (boolean), if true, the call will be asynchronous.

Example

<input type="button" id="button-ajax" value="click me"/>
<script type="text/javascript">
	B.on(B.$id('button-ajax'), 'click', function(){
		B.Ajax.request('test-ajax.html', {200: function(result){
			B.$id('button-ajax').value = result.responseText;}
		});
	});
</script>

Demo:

B.Ajax.update(nodeToUpdate, url, evalScripts, method, params, options)

Method to update a DOM node with the result of a XMLHttpRequest call.

The function arguments are:

  • nodeToUpdate: DOM node in which the response will be appended.
  • url: Url to call.
  • evalScripts: If true, the javascript scripts being in the response will be executed.
  • method: HTTP method to use for the call.
  • params: Associative array of parameters to use in the call.
  • options: Options to use for the request set up. For the moment, the only option is: async (boolean), if true, the call will be asynchronous.

Example

<div id="to-update">My content will change</div>
<input type="button" id="button-update" value="click me"/>
<script type="text/javascript">
	B.on(B.$id('button-update'), 'click', function(){
		B.Ajax.update('to-update', 'test-ajax-update.html');
	});
</script>

Demo:

My content will change