You wouldn’t believe it’s the fifth excerpt from the book “Build Mobile Websites and Apps for Smart Devices” by Earle Castledine, Myles Eftos and Max Wheeler. BuildMobile is publishing the chapter “Mobile Web Apps” from the book, this section is called “Ajax” and its getting serious.
5. Ajax
We’ve now learned how to transition between pages smoothly and without reloading, but so far we’ve only done this with static content. We need to be able to load our pages dynamically, and then transition to them.
The good news is that there’s comparatively excellent support for Ajax on high-end mobile devices—so Ajax work remains largely the same as you’re used to on the desktop. Of course, you have to consider that the average data connection will be an order of magnitude slower (and more expensive), so it’s best to keep your bandwidth use to an absolute minimum.
There are two approaches we could take to loading dynamic data into our application. We could load in the raw data (such as a list of JSON objects representing recently spotted celebrities) and merge it into the application’s HTML—creating list elements and appending them to the page. Or, we could load the entire HTML contents straight from the server and dump it directly into our page. The latter approach sounds more straightforward—so let’s try that first to become familiar with Ajax in the mobile environment. After that, we’ll take a look at handling other data formats.
5.1. Fetching HTML
The first thing we’ll need if we want to retrieve data from a server is … a server! If you try and grab data from a file://
protocol URL (which will be the case if you’re testing pages by double-clicking an index.html
file), you’ll hit the dreaded “Access-Control-Allow-Origin” error.
Servers
As this is a book about building mobile web apps in HTML, CSS, and JavaScript, covering the details of setting up a server to deliver your data is unfortunately beyond our scope. We’ll spend the rest of this chapter looking at examples of Ajax functionality we can add to Startrackr, but if you want to try these examples for yourself, you’ll need to set up a server to deliver the appropriate data.
Assuming we have a server—be it running on our machine locally, on a VM, or on the Internet—we now need somewhere to dump the HTML chunks when they’re returned from the server. For this we only require a skeleton of the page we’ve been working with, to act as a container that we fill. Because we’ll be returning the same markup as before, our original CSS will apply to the contents without needing to be modified. Here’s that skeleton:
Example 4.52. ch4/13-ajax.html
(excerpt)
<div id="pages">
<div id="page-spots" class="page-spots"></div>
<div id="page-spot" class="page-spots"></div>
<div id="page-sightings" class="page-sightings"></div>
<div id="page-stars" class="page-stars"></div>
<div id="page-star" class="page-stars"></div>
</div>
All the content for each of those sections is back in the spots.html
, new.html
, and stars.html
files—just like a regular website, except that now we’ll be using Ajax to load that content into this empty skeleton.
With this basic HTML in place, the next step is to stop the link from being followed when clicked, as we did with our transition function earlier—with preventDefault()
. Then we can execute our Ajax. The jQuery load()
function is perfect for our needs: it loads HTML from a URL, and provides a mechanism for choosing which part of the document to return. This is great, because we have no need for the whole page, with the head and meta tags—we only want the contents of the body
. Using load()
means we don’t need a special version of our HTML page for Ajax, and any updates will only have to be made in one place.
To accomplish this, we use the load()
function with a string parameter consisting of the URL we want, followed by a space, followed by a jQuery selector string. The contents of the element matched by that selector will be inserted into the element from which load()
was called. The content we want to insert is contained in the .wrapper div of the target page. So, when the Spots link is clicked, we want to call load()
on our #spots container and pass in the string “spots.html .wrapper”:
Example 4.53. javascripts/ch4/13-ajax.js
(excerpt)
$("#tab-spots a").click(function(e){
e.preventDefault();
$("#page-spots").load("spots.html .wrapper");
});
Loading HTML Snippets
If you’re unfamiliar with jQuery, you might be wondering how it loads in a small section of HTML via Ajax. There’s no magic here; it actually loads the entire page and dumps it into a div
element that exists outside the DOM. The filtering is done on this element, and the results are inserted in the correct position. Very handy, although of course it means transmitting more data over the network than you actually end up using. For most real-world applications, you’ll probably want to pull data in XML or JSON format and insert it into your HTML on the client side. We’ll be looking at how this can be done shortly. For now, though, we’ll stick with using load()
to keep it simple, and focus on demonstrating how the various Ajax methods work, as well as how they’re best used in the context of a mobile app.
This will load the relevant HTML into the right container, but there are a few more tasks that need attention—most notably, making the new content visible! Fortunately, load()
allows you to specify a callback function that will be executed once the Ajax call has completed. Inside this callback, we’ll transition the page into view:
Example 4.54. javascripts/ch4/13-ajax.js
(excerpt)
$("#tab-spots a").click(function(e){
e.preventDefault();
$("#page-spots").load("spots.html .wrapper", function() {
transition('#page-spots', "fade", false);
});
});
5.2. Ajaxifying Links
Adding events to each navigation item is a tedious way to wire up our site. We made an Ajax loader for the Spots page just now, but we’d have to duplicate this code multiple times for it to work for all the links. Instead, we can take advantage of our site’s consistent structure and concoct a system to do it programmatically, based on the contents of the navigation elements. Doing this gives us a level of progressive enhancement: our links are designed to work as normal, but our system intercepts them when clicked and loads the content via Ajax. This method is sometimes known as Hijax.
We’ll then generalize the Ajax code we wrote so that it can be applied to any link we pass it. There are two pieces of data needed for that: the URL to load, and the name of the container to dump it in. This is where having conventions is important. As long as our pages and classes are named in a consistent manner, we can easily create code that targets all our links:
Example 4.5### 5. javascripts/ch4/14-hijax.js
(excerpt)
function loadPage(url, pageName) {
$("#" + pageName).load(url + " .wrapper", function(){
console.log(this);
transition("#" + pageName, "fade", false);
});
};
This function is almost identical to the code from before, except we’ve replaced the page names and URLs with variables. Now we can load a page programmatically, for example:
loadPage(“spots.html”, “spots”);
If fact, we need to load a page by default when the application loads, so we can place that line of code inside the document.ready
handler. This will load up the Spots page via Ajax as our home page.
Data Caching
Because the load()
method pulls in an entire HTML file, the results can be cached by the browser, which means that changes you make in the page being loaded may not be reflected right away. You can disable the cache globally (for all Ajax requests) with $.ajaxSetup({ cache: false });
, or, if it’s just for one particular call, you can append a timestamp to the URL so that each request will be seen by the browser as different. So, instead of loading url + " #wrapper"
, you can load url + "?" + new Date().getTime() + " #wrapper"
.
Finally, we want to call our function whenever any navigation items are clicked. Remember, we have to extract two pieces of data to pass to our function: the URL and the page name. The URL is simple—it’s the href value of the link itself. For the page name, there are many approaches we could take: we could give our containers the same names as the files (minus the .html
), or we could add some extra data into the link itself. The latter has become easier with the addition of custom data attributes in HTML5, which let us annotate elements with key/value pairs:
Example 4.56. ch4/14-hijax.html
(excerpt)
<ul id="tab-bar">
<li>
<a data-load="spots" href="spots.html">Spots</a>
</li>
<li>
<a data-load="sightings" href="new.html">Add a sighting</a>
</li>
<li>
<a data-load="stars" href="stars.html">Stars</a>
</li>
</ul>
A data attribute starts with data-
and is followed by your key name. You can then provide it with whatever value you like. According to the spec, these values should be retrieved using the element’s dataset property; however, this is yet to be widely supported, so your best bet is to use the standard getAttribute()
function (as in, myElement.getAttribute("data-load")
), or, if you’re using jQuery, the attr()
method:
Example 4.57. javascripts/ch4/14-hijax.js
(excerpt)
$("#tab-bar a").click(function(e){
e.preventDefault();
var url = e.target.href;
var pageName = $(this).attr("data-load");
loadPage(url, pageName);
});
Et voilà! Any link inside the #tab-bar
element will fire our loadPage()
function, and we’ll transition from the current page to the new page. You can easily extend this system to also specify the transition type, if you like.
One current problem is that if the page takes a long time to load, the user has no idea what’s going on (and they’ll probably become click-happy and try to load another page). The obvious solution is a “loading” indicator; jump over to Chapter 6, “Polishing Up Our App” if you’re keen to add one now…
[Ed: Which means you can either buy the book “Build Mobile Websites and Apps for Smart Devices” or wait until we release Section 6 of Chapter 4, “Polishing Up Our App” in the future.]
Build Mobile Book
You can purchase the book “Build Mobile Websites and Apps for Smart Devices” from Sitepoint. Read the whole of Chapter 4. Mobile Web Apps, exclusively here at BuildMobile, for free, in the following sections.
- Setting Up Shop
- Events
- Quick Wins
- Loading Pages
- Ajax
- Templating
- We Have an App!
Frequently Asked Questions about Mobile Web Apps and AJAX
What is the role of AJAX in mobile web apps?
AJAX, which stands for Asynchronous JavaScript and XML, plays a crucial role in the development of mobile web apps. It is a set of web development techniques that allows a web page to update and retrieve data from a server asynchronously, without interfering with the display and behavior of the existing page. This means that parts of a web page can be updated without requiring the entire page to reload – making the user experience smoother and more efficient. AJAX is particularly useful in mobile web apps where network efficiency and speed are paramount.
How does AJAX improve the performance of mobile web apps?
AJAX improves the performance of mobile web apps by reducing the amount of data that needs to be transferred between the client and the server. Instead of reloading the entire page every time a user makes a request, AJAX allows for the updating of only specific parts of the page. This results in faster load times, less data usage, and a more responsive user interface.
What are the challenges in implementing AJAX in mobile web apps?
While AJAX offers many benefits, it also presents some challenges. One of the main challenges is ensuring compatibility across different browsers and devices. AJAX relies heavily on JavaScript, which can be interpreted differently by different browsers. Additionally, some mobile devices may have limited support for JavaScript or may handle AJAX requests differently. Therefore, developers need to thoroughly test their apps on various platforms to ensure consistent performance.
How does AJAX compare to other technologies for mobile web app development?
AJAX is often compared to other technologies like HTML5, CSS3, and JavaScript for mobile web app development. While these technologies are often used together, AJAX stands out for its ability to update web pages asynchronously. This makes it a powerful tool for creating dynamic, interactive web applications. However, it’s important to note that AJAX is not a standalone technology, but a technique that leverages these other technologies.
Can AJAX be used in combination with other technologies for mobile web app development?
Yes, AJAX can be used in combination with other technologies for mobile web app development. In fact, AJAX is often used alongside HTML, CSS, and JavaScript to create dynamic, interactive web applications. AJAX can also be used with server-side scripting languages like PHP or ASP.NET to handle requests and responses.
What are some examples of mobile web apps that use AJAX?
Many popular mobile web apps use AJAX to enhance user experience. Examples include Google Maps, which uses AJAX to update map data without reloading the page, and Facebook, which uses AJAX to load new posts and notifications.
How can I learn more about using AJAX in mobile web app development?
There are many resources available for learning about AJAX and mobile web app development. Online tutorials, courses, and documentation are all great places to start. Additionally, experimenting with AJAX in your own projects can be a great way to learn and gain practical experience.
What are the security considerations when using AJAX in mobile web apps?
Like any web technology, AJAX comes with its own set of security considerations. Because AJAX involves sending data between the client and the server, it’s important to ensure that this data is secure. This can involve validating and sanitizing input to prevent injection attacks, using secure protocols like HTTPS, and implementing proper error handling.
How does AJAX affect SEO for mobile web apps?
AJAX can potentially affect SEO for mobile web apps. Because AJAX content is loaded dynamically, it may not be indexed by search engines in the same way as static content. However, there are techniques that can be used to ensure that AJAX content is crawlable, such as using pushState and hashbang URLs.
What is the future of AJAX in mobile web app development?
The future of AJAX in mobile web app development looks promising. As web technologies continue to evolve, AJAX is likely to remain a key tool for creating dynamic, interactive web applications. However, developers will need to stay up-to-date with the latest best practices and techniques to ensure that they are using AJAX effectively and securely.
Sporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr Speaker) holds an interest in everything computery. Raised in the wild by various 8-bit home computers, he settled in the Internet during the mid-nineties and has been living and working there ever since. As co-creator of the client-side opus TurnTubelist, as well as countless web-based experiments, Earle recognizes the Internet not as a lubricant for social change but as a vehicle for unleashing frivolous ECMAScript gadgets and interesting time-wasting technologies.