Server Page AJAX

From HTML5 Builder
Jump to: navigation, search

AJAX is a way of working with JavaScript where you use it to call (PHP) scripts on your server, and update the content of a page without refreshing it, improving that way the user-experience and response time. AJAX is an integral part of the RPCL, which implements it using Xajax, a lightweith yet powerful JavaScript library. When developing web applications with HTML5 Builder, you can use AJAX on any component.

Workflow

To call PHP code from JavaScript to interact with your components:

  1. Set the UseAjax property to true on the Page container of your form.

    Warning: Before deployment, don't forget to configure the UseAjaxUri property too, so it points to the twin page in the server (e.g. http://example.com/unit1.php).

  2. Server-side, print the output of the ajaxCall(phpEventHandler, phpParameters, involvedComponents) method on the target control ($sender in event handlers) so it gets executed client-side (for example, on an event handler for a JavaScript event), where:
    • phpEventHandler is the name of the PHP event handler of the top-level container to be executed with AJAX. For example, "Button1Click".
    • phpParameters is an optional array of parameters to be passed to the phpEventHandler, that would get them on the $params parameter every event handler gets.
    • involvedComponents is an optional array with the names of the components involved on the execution of phpEventHandler. For example: array("Button1", "Label1"). If you pass the list of involved components, only those will be used during the AJAX call, saving time.

For example:

// Event handler for a Button’s OnClick client-side event.
function Button1JSClick($sender, $params)
{
    echo $sender->ajaxCall("Button1Click"); // Will call Button1Click() on the server.
}

// Server-side event handler.
function Button1Click($sender, $params)
{
    $this->Label1->Caption = $this->Edit1->Text;
}

The output of ajaxCall() is a JavaScript function. When that function is executed client-side, this is what happens in the background:

  1. An AJAX call is made to the server-side version of the webpage (the PHP script that generated it).
  2. The script on the server is updated with the latest client-side data. If involvedComponents are set, only those will be updated.
  3. The phpEventHandler is executed, possibly affecting some components.
  4. The components on the client are updated with the data from their server-side twins. Only involvedComponents if defined.

As you can see, using AJAX is not just more user-friendly, since the page doesn’t even refresh, but it can also be more efficient when using the third parameter of ajaxCall(), involvedComponents, so only those components are loaded, the rest remaining untouched.

Help Resources

Documentation

Sample Applications

See Also