JSL.ajax
From Projects Wiki
This class has all the ajax functions. Based on jxs(V2.01.A) - http://www.openjs.com/scripts/jx/
Contents |
[edit] Arguments
- URL
- the url of the page to be loaded
[edit] Example
JSL.ajax("http://www.example.com").load(function(data) { alert(data); //data has the data fetched from the given url });
[edit] Methods
[edit] JSL.ajax.load( callback, format, method )
This loads the URL provided in the constructor and calls the 'callback' user function with the data from the URL as its argument.
[edit] Arguments
- callback
- Function that must be called once the data is ready.
- format
- The return type for this function. Could be 'xml','json' or 'text'. If it is json, the string will be 'eval'ed before it is returned it. Defaults to 'text'.
- method
- GET or POST. Defaults to 'GET'.
[edit] Example
JSL.ajax("http://www.example.com/get_data.php?hello=world&foo=bar").load(function(data) { alert(data); }, "text", "POST");
[edit] Code
// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_ajax.js, Line 57 function (callback,format,method) { this._init(); //The XMLHttpRequest object is recreated at every call - to defeat Cache problem in IE var url = this.url; if(!this.http||!url) return; //XML Format need this for some Mozilla Browsers if (this.http.overrideMimeType) this.http.overrideMimeType('text/xml'); this.callback=callback; method = method||"GET";//Default method is GET format = format||"text";//Default return type is 'text' this.format = format.toLowerCase(); method = method.toUpperCase(); var ths = this;//Closure //Kill the Cache problem in IE. var now = "uid=" + new Date().getTime(); url += (url.indexOf("?")+1) ? "&" : "?"; url += now; var parameters = null; if(method=="POST") { var parts = url.split("\?"); url = parts[0]; parameters = parts[1]; } this.http.open(method, url, true); if(method=="POST") { this.http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); this.http.setRequestHeader("Content-length", parameters.length); this.http.setRequestHeader("Connection", "close"); } if(this.handler) { //If a custom handler is defined, use it this.http.onreadystatechange = this.handler; } else { this.http.onreadystatechange = function () { /// [IGNORE] Call a function when the state changes. if(!ths) return; var http = ths.http; if (http.readyState == 4) {//Ready State will be 4 when the document is loaded. if(http.status == 200) { var result = ""; if(http.responseText) result = http.responseText; //If the return is in JSON format, eval the result before returning it. if(ths.format.charAt(0) == "j") { //\n's in JSON string, when evaluated will create errors in IE result = result.replace(/[\n\r]/g|>,""); result = eval('('+result+')'); } else if(ths.format.charAt(0) == "x") { //XML Return result = http.responseXML; } //Give the data to the callback function. if(ths.callback) ths.callback(result); } else { if(ths.opt.loading_text) document.getElementsByTagName("body")[0].removeChild(ths.opt.loading_text); //Remove the loading indicator element if(ths.opt.loading_indicator && document.getElementById(ths.opt.loading_indicator)) { document.getElementById(ths.opt.loading_indicator).style.display="none"; //Hide the given loading indicator. } if(ths.error) ths.error(http.status); } } } } this.http.send(parameters); }
[edit] JSL.ajax.bind( options )
bind is one all encompassing function for ajax. The first argument is an associative array and different details can be passed as that argument. First this hash must be created...
var options = { 'onSuccess':alert, //other options go here... }
Then it can be passed on to the bind() like this...
JSL.ajax("http://www.example.com/get_data.php?hello=world&foo=bar").bind(options);
The possible option values are listed below.
[edit] Arguments
- options
- A associative array with these possible values.
- options['onSuccess'] - Function that should be called at success - ie. readyState=4 and status=200
- options['onError'] - Function that should be called at error
- options['format'] - Return type of the ajax data - could be 'xml','json' or 'text'. If none is specified, it will default to 'text'
- options['method'] - This decides with method should be used in sending the data - 'GET' or 'POST'. Defaults to 'GET'
- options['update'] - If the ID of a valid element is given here, then the ajax call will be made, the data fetched and fed into this element using innerHTML.
- options['loading_indicator'] - The id of the loading indicator. This will be set to display:block when the url is loading and to display:none when the data has finished loading.
- options['loading_text'] - HTML that would be inserted into the document once the url starts loading and removed when the data has finished loading. This will be inserted into a div with class name 'loading-indicator' and will be placed at 'top:0px;left:0px;'
[edit] Example
JSL.ajax('data.php?fetch=true&num=42&name=marvin').bind({ "onSuccess":alert, "onError":function(status){alert("Something went wrong. Error : "+status)}, "loading":"loading" });
[edit] Code
// File /var/www/html/Sites/openjs/openjs.com/scripts/jslibrary/code/jsl_ajax.js, Line 152 function(user_options) { var opt = { 'onSuccess':false, 'onError':false, 'format':"text", 'method':"GET", 'update':"", 'loading_indicator':"", 'loading_text':"" } for(var key in opt) { if(user_options[key]) {//If the user given options contain any valid option, ... opt[key] = user_options[key];// ..that option will be put in the opt array. } } this.opt = opt; opt.url = this.url; if(opt.onError) this.error = opt.onError; var div = false; if(opt.loading_text) { //Show a loading indicator from the given HTML if(opt.loading_indicator) div = document.getElementById(opt.loading_indicator); // If both loading_indicator and loading_text is given, use the 'loading_indicator' element as the holder for loading_text else { div = document.createElement("div"); div.setAttribute("style","position:absolute;top:0px;left:0px;"); div.setAttribute("class","loading-indicator"); document.getElementsByTagName("body")[0].appendChild(div); } div.innerHTML = opt.loading_text; opt.loading_text=div; } if(opt.loading_indicator) document.getElementById(opt.loading_indicator).style.display="block"; //Show the given loading indicator. this.load(function(data) { if(opt.update) document.getElementById(opt.update).innerHTML = data; if(div && !opt.loading_indicator) document.getElementsByTagName("body")[0].removeChild(div); //Remove the loading indicator if(opt.loading_indicator) document.getElementById(opt.loading_indicator).style.display="none"; //Hide the given loading indicator. if(opt.onSuccess) opt.onSuccess(data);// Call the onSuccess function },opt.format,opt.method); }

