Simple AJAX Library
Updated April 12, 2008
This is a very basic, easy-to-use AJAX library. It has no fancy features, no DOM manipulation code - all it does is facilitates making an AJAX call and handling the response. In its present form, it makes no provision for queuing of calls and simply relies on browser queuing. Also, there is currently no provision for any sort of error handling.
Download
Right-click and select Save As: poc.ajax.js
Usage
Include a SCRIPT tag for POC.Ajax:
<script type='text/javascript' src='javascript/poc.ajax.js'></script>
To make an AJAX call, you first must define a response function, then create a POC.Ajax object, and finally make the request:
function resp(response_text) { // Handle Ajax Response - for example: alert(response_text); } var obj = new POC.Ajax(resp); obj.sendRequest('ajaxServerScript.php');
To send arguments via a standard AJAX request, simply add a query string to the end of the URL. The default AJAX method is GET:
obj.sendRequest('ajaxServerScript.php?arg1=something&arg2=somethingelse');
If you want to send data via a POST request, such as for a form submission, you must define an argument list. This list is formatted similarly to the query string, only it is not joined to the URL. Then, call the sendPostRequest method with the URL and argument list:
var args = "arg1=something1&arg2=something2&arg3=something3"; var url = "ajaxServerScript.php"; obj.sendPostRequest(url,args);
API
Create object:
var obj = new POC.Ajax(response_handler_function);
Make Ajax Call:
obj.sendRequest(url_of_ajax_server_script);
Make an Ajax POST request
obj.sendPostRequest(url_of_ajax_server_script,post_args);
Code
if (!POC) var POC = {}; POC.Ajax = function(fn) { var obj = this; // set return function this.whatToDo = fn; function createRequestObject() { var ro; if (window.XMLHttpRequest) { ro = new XMLHttpRequest(); } else if (window.ActiveXObject) { ro = new ActiveXObject('Microsoft.XMLHTTP'); } else ro = null; return ro; } this.http = createRequestObject(); this.sendRequest = function(url) { this.http.open('get',url); this.http.onreadystatechange = this.handleResponse; this.http.send(null); } this.sendPostRequest = function(url,args) { this.http.open('POST',url,true); this.http.onreadystatechange = this.handleResponse; this.http.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); this.http.send(args); } this.handleResponse = function() { if (obj.http.readyState == 4) { if (obj.http.status == 200) { // process response obj.whatToDo(obj.http.responseText); } else { // process error // TODO: add some sort of error handling here alert('ajax error: '+obj.http.status); } } } }
To do
- Add better error handling options
- Add queuing capabilities