JavaScript AJAX for Sitemagic CMS

Sending and receiving data using either synchronous or asynchronous calls (AJAX) is really simple using Sitemagic CMS - the functionality is available through the SMHttpRequest class.

Get data

The following is an example of a synchronous call to receive data.

// Create synchronous request (notice false argument) and send it
var request = new SMHttpRequest("data.txt", false);
request->Start();

// Display the result when the server sends back a response
SMMessageDialog.ShowMessageDialog("Data received: " + request.GetResponseText());

The code above has the obvious disadvantages of being synchronous, which causes the client to lock up while waiting for the server to process and send back the data. This is not a problem if the server is fast or the amount of data is small. But for super responsive applications we should use an asynchronous call instead:

// Create asynchrenous request (notice true argument)
var request = new SMHttpRequest("data.txt", true);

// Register state listener
request.SetStateListener(function()
{
    // This function is invoked every time the state of the request is changed.

    // Get current state of connection
    var state = "";
    if (request.GetCurrentState() === 1)
        state = "Connection established";
    else if (request.GetCurrentState() === 2)
        state = "Headers received";
    else if (request.GetCurrentState() === 3)
        state = "Loading data..";
    else if (request.GetCurrentState() === 4)
        state = "Request completed";

    // Display connection state
    SMMessageDialog.ShowMessageDialog("State: " + state);

    // Display response from server if data is ready
    if (request.GetCurrentState() === 4)
    {
        if (request.GetHttpStatus() === 200) // Server request processed successfully
            SMMessageDialog.ShowMessageDialog("Data received: " + request.GetResponseText());
        else // An error occured (e.g. a PHP script terminated with a fatal error or similar)
            SMMessageDialog.ShowMessageDialog("Server error code: " + request.GetHttpStatus());
    }
});

// Send request
request->Start();

Send data

Sending data is equally simple. In the example below we use the SMHttpRequest class to send a request to signup.php to sign up for a newsletter.

// Create asynchrenous request (notice true argument)
var request = new SMHttpRequest("signup.php", true);

// Set data to send (name and e-mail address)
request.SetData("name=Michael&email=michael376@domain.com");

// Register state listener
request.SetStateListener(function()
{
    // Only do something when the request is complete
    if (request.GetCurrentState() === 4)
    {
        if (request.GetHttpStatus() === 200) // Server responded with no errors
        {
            // signup.php may output some value (using print/echo). This can
            // be used to send back a message to the user as shown below:

            if (request.GetResponseText() === "OK")
                SMMessageDialog.ShowMessageDialog("Signup completed successfully");
            else
                SMMessageDialog.ShowMessageDialog(request.GetResponseText());
        }
        else // A server error occured (e.g. a PHP Fatal error)
        {
            SMMessageDialog.ShowMessageDialog("Server error occured - try again!");
        }
    }
});

// Send request
request->Start();