JSL.ajax

From Projects Wiki

Jump to: navigation, search

This class has all the ajax functions. Based on jxs(V2.01.A) - http://www.openjs.com/scripts/jx/

JLS.ajax Source Code

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);
}
Personal tools