Mobile AJAX

From HTML5 Builder
Jump to: navigation, search

You can use AJAX on any page of your mobile application so you can call PHP code from it, but it works a bit differently from AJAX on web applications.

Before you choose to use AJAX on any MPage of your application, you should consider these facts:

  • The page will be unusable on devices without a working internet connection.
  • The page will be unusable if the server hosting your web application is unreachable, be it because the server itself is down, a DNS issue, etc.
  • The page will freeze, with a loading message box, while it retrieves each new status from the server. Depending on your user’s internet connection, that can make the application feel slow or unresponsive.

Hence, you should only use AJAX on an MPage whose functionality completely depends on PHP code. If PHP code is only used for certain features of minor relevance, you can develop a common mobile application, with JavaScript and its libraries, then develop a server-side PHP application, and whenever your mobile application has access to the internet (which you can check with MConnection), use common AJAX calls to make those features work. That way, if your mobile application has no access to the internet, you can just disable those features.

Requirements

In order to use AJAX with mobile application, you will need a web server you can deploy to.

Usage

To use AJAX on an MPage:

  1. Set MPage’s UseAjax property to true.
  2. Point MPage’s UseAjaxUri property to the URL of the twin page on the web server where you will deploy the server-side version of your application. For example: http://example.com/unit6.php.

That will enable PHP events on the target MPage.

Note: You don’t need to print the return value of ajaxCall() on JavaScript events like for web applications, just use standard PHP events.

Testing

Run on a Web Browser

When testing a mobile application with MPage containers using AJAX, you should empty their UseAjaxUri property. When empty, UseAjaxUri points to your local web server, that way your mobile and web twin applications will be the same.

If UseAjaxUri is already pointing to the location where the web twin will be hosted, whenever you run your application on a web browser to test it, your mobile twin running in your web browser will try to synchronize with whatever UseAjaxUri is pointing to, probably a previous version of your web application, or maybe an empty location. Anyway, it will probably cause your MPage containers using AJAX to misbehave.

It is once you are about to deploy your application that you have to set the final values of those UseAjaxUri properties.

Deployment

On mobile applications, when you use AJAX, you will have to deploy two twin applications:

Those two applications will then work in synchronization whenever your users perform an action requiring PHP code:

  1. Your mobile application will send its state to its web twin on your web server. Each mobile page’s UseAjaxUri property must point to the URL of its twin page in the server.
  2. Your web application will retrieve the data, perform any needed operation, and send back a new state to your mobile application.
  3. Your mobile application will retrieve and render that new state.

Mobile Application

You can generate your mobile application with the Wizard for PhoneGap, the steps will depend on the platform you target: Android, iOS or BlackBerry. You can deploy your mobile application to as many supported platforms as you like, though.

Web Application

You can deploy your web application and place it on the web server pointed by the UseAjaxUri property.

Note: Do not forget to set UseAjaxUri to the right value if you changed it for testing purposes.

See Also