PhoneGap AJAX Quick Start Example for Android, BlackBerry WebWorks, Samsung Bada, or Nokia Symbian Mobile App Development using XMLHttpRequest

Latest:
AJAX PhoneGap Example for Android, BlackBerry, Nokia, Samsung
Here is a ready-to-run alternative PhoneGap with AJAX example using simple JavaScript.

It is for starting project development and assumes you have PhoneGap and all tools

already installed and running...  Basically if you are at the quick start stage of your

app development and still trying PhoneGap but need AJAX, this example might interest.

Or if you are having any problems with other AJAX releases you might give this a try.


Note there are only three source code samples required: this PhoneGap index.html,

the JavaScript AJAX source, and the sample XML data file.  Best of luck, hope it helps.


* also note phonegap-1.0.0.js is the latest PhoneGap tested here...

( + all javascript files moved to the javascript subdirectory or folder referenced..

  also any 'phonegap.js' files renamed to include a version number for consistency).


PhoneGap example index.html:
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" id="viewport" content="initial-scale=1.0,user-scalable=no">
    <title>PhoneGap with AJAX Example</title>

    <script type="text/javascript" src="javascript/phonegap-1.0.0.js"></script>
    <script type="text/javascript" src="javascript/simpleMobileAjax.js"></script>

    <script type="text/javascript" charset="utf-8">

    // *** PhoneGap functions:
    var onLoad = function() {
      document.addEventListener("deviceready", onDeviceReady, false);
//      alert("onLoad");
    }

    var onDeviceReady = function() {
//      alert("onDeviceReady");
    }

    // *** custom AJAX functions:
    var showXMLFile = function() {
      $('http://ajamyajax.com/phonegap.xml', 'containerID');
    }
    </script>
</head>

<body onload="onLoad();">
  <input type="button" value="Display PhoneGap OS Platforms" onclick="showXMLFile();"/>

  <div id="containerID" style="border-top:30px solid #ffffff;border-left:100px solid #ffffff;text-align:left;"></div>
</body>
</html>


JavaScript simpleMobileAjax.js:
// Mobile AJAX routine, based on AjaMyAjax.com core js library
var $ = function(url, container) {
  // two arguments: your file and the div or span tag
  var myAjax = new simpleMobileAjax();
  myAjax.ajaxRequest(url, container);
  myAjax = null;
};

var simpleMobileAjax = function() {
  // main ajaxRequest, processResponse, getXmlNodeText only
  this.ajaxRequest = function(url, container) {
    var xhrRequest = null;

    if (window.XMLHttpRequest) {
      xhrRequest = new XMLHttpRequest();
    }

    xhrRequest.open('GET', url);

    if (window.XMLHttpRequest) {
      xhrRequest.source = this;
      xhrRequest.onreadystatechange = function() {
        xhrRequest.source.processResponse(xhrRequest, url, container); };
    }

    if (xhrRequest) {
      xhrRequest.send(null);
    }
  }

  this.processResponse = function(xhrResp, url, container) {
    if (!xhrResp || xhrResp.readyState < 4) {
      return;
    }
    if (xhrResp.readyState == 4) {
      if (xhrResp.status == 200) {
        if (url && container) {
          url = url.toLowerCase();

          try {
            if (url.indexOf('.xml') == -1) {
              // display results as-is
              document.getElementById(container).innerHTML =
                xhrResp.responseText;
            }
            else {
              var xmlDoc = xhrResp.responseXML;
              var allnodes = xmlDoc.getElementsByTagName('*').item(0);

              // for xml, do simple node text display
              var nodetext = this.getXmlNodeText(allnodes);

              if (!window.XMLHttpRequest) {
                // note: no \r\n between some browser node values, only a space.
                // if your xml is simple enough, this replace might work:
                // (if not, ajaMobileAjax has a complete parent/child/cdata
                //  XML node parsing routine)
                nodetext = nodetext.replace(/\s/g, '<br\>');
              }
              else {
                // Mozilla etc support this
                nodetext = nodetext.replace(/\r|\n|\r\n/g, '<br\>');
              }

              document.getElementById(container).innerHTML = nodetext;

              // clean up after:
              xmlDoc = null;
              allnodes = null;
              nodetext = null;
            }
          }
          catch (e) {
            alert('Mobile Ajax.js error with ' + url + '\r\n' +
                  'check url and container ' + container);
          }
        }
        else {
          alert('Mobile Ajax.js error: required parameters are missing');
        }
      }
      else {
        alert('Mobile Ajax.js error with ' + url);
      }
    }
  }

  this.getXmlNodeText = function(xmlnode) {
    try {
      // Mozilla, etc.
      if (xmlnode.textContent) {
        return xmlnode.textContent;
      }
      else {
        return xmlnode.text;
      }
    }
    catch (e) {
      alert(e.description);
      return null;
    }
  }
};
// eop


PhoneGap Mobile OS Platforms phonegap.xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- phonegap.xml from http://ajamyajax.com -->
<root>
   <phonegap>
      <mobile>
         <platform>Apple iOS</platform>
         <platform>Google Android</platform>
         <platform>RIM BlackBerry</platform>
         <platform>Samsung Bada</platform>
         <platform>Nokia Symbian WRT</platform>
      </mobile>
   </phonegap>
</root>


Note this also works with webOS, but you'll probably need to modify the above index.html as follows:
(If you need additional webOS help, see my webOS tips page for more ideas)

 var onLoad = function() {
   if (navigator.userAgent.indexOf("webOS") != -1) {
     navigator.device.deviceReady();
     this.onDeviceReady();
   }
   else {
     document.addEventListener("deviceready", onDeviceReady, false);
   }
 }
Download the above simple Mobile Ajax files for PhoneGap here...

** also available is the more complete Aja Mobile Ajax...
** the FREE JavaScript library that makes AJAX easy for mobile app development.