Ajax.requesttop #

Jelo.Ajax.request allows a webpage to send a "behind the scenes" request to its server, then do something with the response, all without refreshing the page or going to a new page. Ajax.request is easy to use but offers a lot of flexibility if you need it.

// basic request
Jelo.Ajax.request({
    url: 'getData.php',
    success: function() {
        alert('data: ' + this.responseText);
    }
});

Passing Data to the Servertop #

// save.php, our target page on the server
<?php
    echo 'Hello, ' . $_POST['name'] . '!'; // JavaScript receives this text
?>

Jelo.Ajax.request({
    url: 'save.php',
    method: 'post', // default is "get", either can pass data
    data: {
        name: 'HB Stone'
    },
    success: function() {
        alert(this.responseText); // "Hello, HB Stone!"
    }
});

Callbacks and Error Detectiontop #

// different types of callback functions
Jelo.Ajax.request({
    url: 'jelo.html',
    success: function() {
        // this gets called when the page returns successfully
    },
    failure: function() {
        // this gets called when the page times out, is not found, etc.
    },
    callback: function() {
        // this ALWAYS gets called (if specified). useful for cleanup.
        // callback occurs AFTER success (or failure)
    }
});

// notfound.php does not exist in this example
Jelo.Ajax.request({
    url: 'notfound.php',
    success: function() {
        alert(this.responseText); // this will NOT get called
    },
    failure: function() {
        alert('Error ' + this.status); // "Error 404"
    }
});