Ajax on a mobile browser or mobile Ajax (with examples)

Ajax, judging by the trends, more and more captures the minds of developers. Ajax for mobile browsers is now especially actively developing. About this actually talk.

Ajax technology is very much in demand by users of mobile devices. The reason is generally on the surface. Reduced traffic consumption and waste of time. After all, only some parts of the page are loaded, but not all of it (if not in the topic of what Ajax is - I recommend visiting Wikipedia - Ajax ). Accordingly, surfing the network from a mobile device becomes better, faster and less annoying. Moreover, it is cheaper.


Mobile Ajax is still quite strikingly different from the usual, PC'shny. This is due to the specific architecture of mobile operating systems, channel bandwidth, etc. However, nothing is impossible. It is necessary to look only at decent support for SVG and Flash - these are the technologies that you already use or will use literally tomorrow in your phone or PDA.
')
So, now we have a rough idea of ​​what kind of beast it is - mobile Ajax. Let's dive a little.

What are the minimum requirements for a mobile browser? In general, these requirements are not very
differ from the PC browser requirements. XMLHttpRequest or ActiveX, and JS DOM for rendering.

I will translate into Russian - XMLHttpRequest is needed for asynchronous data loading, and the minimum JS DOM is for changing the document in the browser without reloading the page. And who would have thought - there are already mobile browsers that can help us. And not only that their number is nearing ten, so also arrives in their regiment with enviable regularity. More and more companies and corporations understand that mobile Ajax is a useful and necessary thing.

Browser list:

* (Opera Mobile> = 8.x, not Opera Mini)
* Internet Explorer Mobile (WM 5.0 + / 2003)
* S60 3rd edition (WebKit / KHTML core)
* Minimo (Gecko-based)
* OpenWave (> = Mercury)
* NetFront (> = 3.4)
* Safari Mobile (iPhone)

Some experts believe that Ajax can move a monster like J2ME. The truth is still many mobile browsers work differently under different operating systems, and as a result, Ajax is either buggy or does not work at all. But this is a matter of time. This is a note for developers - prepare a sled, but do not ride yet.

Among Ajax platforms for mobile devices, there is a separate class called mojax or bling. But they are used mainly for other devices that require access to the network without human intervention. And as a rule, they require a specific API device.

Ajax PC applications have long ceased to be something that requires dancing with a tambourine and a waste of nerves. Now everything is somewhat simpler - there are a lot of frameworks, take at least Prototype or jQuery.

I will give links to a couple of frameworks at the end of the article :)

Well? Go?

To get started, check out a bundle of mobile OS and your mobile browser here - http://pwmwa.com/frost/ - for Ajax to work in the system.

Create an XMLHttpRequest object:
req = new XMLHttpRequest();

or
req = new ActiveXObject(Microsoft.XMLHTTP);


For peace of mind and convenience, let's wrap everything into a function:
function getXHR()
{
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
return true;
}
else try
{
req = new ActiveXObject('Msxml2.XMLHTTP');
return true;
}
catch(e)
{
try
{
req = new ActiveXObject(“Microsoft.XMLHTTP”);
return true;
}
catch(e)
{
req = false;
return false;
}
}
}


Open HTTP connection:
req.open('POST', url, true);


The first argument specifies the transfer method - GET, POST, etc.

The second url address that is actually requested.

The third argument specifies whether the request should be asynchronous, or processing should stop until a response is received. Most often, of course, use true.

When the request is formed, you must send. You can do it like this:
send(”);


After sending the request, we need to monitor its execution. In particular, you need to know if the server responded with an HTTP code of 200. You can do it like this:
function ajaxCallback()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
//Do something with the response
}
}
}


To process what we received we need to use responseText or responseXml. The first is the presentation of data received from the server, and the second is the DOM-compatible version. Once the XMLHttpRequest is complete, you need to immediately update the XHTML based on the received data. The most convenient way is to use innerHTML.

So we replace the content of the HTML element with id = "someElement" with "some text":
document.getElementById('someElement').innerHTML = 'some text';

And what to replace with the data received from the server:
document.getElementById('someElement').innerHTML = req.responseText;


Based on the above, we can write an Ajax application that will have the following functionality:

* links will have real addresses;
* click to send a request to the server, after processing the server will give the data;
* when the browser receives the data, it will update the content of the page;
* if the Ajax does not happen, because of the JS turned off or for other reasons, then it will be transferred to the specified address

The page itself will look like this:
<?xml version=“1.0″ encoding=“UTF-8″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
/>

dev.mobi mAjax

<a href=“fallbackTime.php”
onclick=“return updateElm('getTime.php', 'timeDiv');” >Get server time
No ajax data yet





majax.js is the JS code itself, and getTime.php is a script that we will contact with a click.

function updateElm(url, id)
{
if(getXHR())
{
req.open('POST', url, true);
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
document.getElementById(id).innerHTML = req.responseText;
}
else
{
document.getElementById(id).innerHTML = 'Could not retrieve data';
}
}
req.send(”);
}
else return true;
return false;
}


When a person clicks on a link, then using the JS script, an asynchronous call to the getTime.php script occurs. After receiving the data will be replaced by the contents of the container timeDiv.

Then updateElem receives a reference to the XMLHttpRequest object (getXHR ()), establishes a link to the URL, and defines the callback function. The recall function verifies that the request is complete (req.readyState == 4) and that the HTTP status is 200. This function also determines whether id = 'id' was updated successfully.

The result is this: if JS is and works fine, then the person receives the updated data using our Ajax application. If not, then go to another link, getting the same data, but with the transition to another page.

The content of getTime.php is simple:
<?php
echo date('l dS \of FY h:i:s A');
?>


Of course, you can replace information with anything. How you will form php - this is your personal concern :)

As a result, we get the same page, but with modified data in the container with id = "someElement"
<?php echo '<?xml version=”1.0″ encoding=”UTF-8″?>'?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.1//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd”>
/>

dev.mobi mAjax

<a href=“fallbackTime.php?uid=<?php echo uniqid(); ?>”
onclick=“return updateElm('getTime.php', 'timeDiv');” >Get server time
<?php echo date('l dS \of FY h:i:s A'); ?>





A functioning example can be viewed by clicking here ( download an example ).

Agree, a bit unlike the usual Ajax - I would say there are no attributes of this method. Now fix:
document.getElementById(id).innerHTML = ' ';


As soon as a request is sent, a picture appears, and disappears only after receiving data from the server.
if(req.readyState == 4)
{
document.getElementById(id).innerHTML = req.responseText;
}
else
{
document.getElementById(id).innerHTML = ' ';
}


An example after the changes can be viewed by clicking here ( download an example ).

For dessert:
FROST framework project
mAJAX FAQ

Details, additions and necessary documentation can be found on the page with the original article (which I translated) to this address .

Cross post from my blog .