Getting Data From Another HTML Page with Ajax and Gears

Ajax Gears allows to load an HTML page on the same site, or locally when offline, extract data from this other page and display the extracted data into the current page.

The demo actually takes a table that holds the list of Anaa Gear's functions, and adds the table into the demo page.

How to use the demo

1. Load the demo page.
2. Go offline by a click on the first button.
3. You can now close the Internet connection and load this page again
4. Click on "submit" to try the demo without connection.

How it works

This makes use of a special function of Anaa Gears, AALoadHTML, that loads a page as a text file, stores it into a <div> in the calling page and uses DOM's methods to get tags inside the <div>.

The structure of the Gears page

These fields are required (the name is the ID of a <div> tag:

• textOut: Displays Gears message. Manage it as you want.
• storage: The content of the other HTML page is stored here. Of course it is not displayed.
  <div id="storage" style="display:none;"> </div>
• viewed: The data extracted from the other page are stored here and displayed.
  

The buttons

Go offline: Allows to view the page without connection.
Return online: Synchronizes the content on the server with the local version.
Submit: Add the content of another HTML page to the demo page.

 <button onClick="createStore()"> Go offline </button>
 <button onClick="removeStore()"> Return online </button>
 <button onClick="submitForm('anaa-gears-functions.html', 'storage', 'viewed')">Submit</button>

The scripts

These scripts are required:

<script src="gears_init.js">
<script src="gears_offline.js">
<script src="anaa-gears.js">
<script src="demo-html.js">

The demo-html.js file holds two functions:

submitForm is called by the submit button.

processHTML is passed as parameter to the Ajax method AALoadHTML, its purpose is to process the file once loaded (another HTML page), to extract its content and put it into the current page.

MANIFEST_FILENAME = "demo-gears-get-html.json";

function processHTML(storage, viewedID)
{
     var z = storage.getElementsByTagName("table").item(0).innerHTML;
     var target = document.getElementById(viewedID);
     target.innerHTML =  "<table>" + z + "</table>";
}

function submitForm(url, storageID, viewedID)
{ 
     var y = AALoadHTML(url, processHTML, storageID, viewedID);
}
window.onload=init;   // starts Gears

The manifest file

This file tells to Gears which files have to be stored locally:

{
 "betaManifestVersion": 1,
 "version": "1.0",
 "entries": [
 { "url": "demo-gears-get-html.html"},
 { "url": "gears_offline.js"},
 { "url": "gears_init.js"},
 { "url": "anaa-gears.js"},
 { "url": "demo-html.js"},
 { "url": "demo-html.txt"},
 { "url": "anaa-gears-functions.html"}
 ]
}

The first file is the demo, the last one is the HTML page where data are taken.

Try the demo.

All the files are included in the archive of the Anaa Gears framework.