| One of Ajax's primary capabilities is that it facilitates grabbing raw HTML or text from a file located on the server. So you can load the shell of your basic Web page and then pull in additional content as needed. In this simple example (Figure 22.1), when the visitor clicks on an HTML link, the page pulls one of three blocks of HTML code from the server and places the new chunk of HTML code into the existing page (Figure 22.2). Figure 22.1. When the page first loads, it displays Chapter 1. 
Figure 22.2. Using Ajax, the link fetches the content for Chapter 2 or Chapter 3 without ever reloading the page. 
To import external content using Ajax: | | 1. | externalContent.js
Create a new external JavaScript file and save it as externalContent.js (Code 22.1). Steps 2 and 3 apply to this file.
Code 22.1. externalContent.js: Functions used for importing external content using Ajax.| [View full width] function changePage(pageName, objectID) { fetchData(pageName,null,objectID); } function filterData(pageRequest, objectID){ if (pageRequest.readyState == 4 && (pageRequest.status==200 || window.location.href.  indexOf ("http")==-1)) document.getElementById (objectID).innerHTML=pageRequest.responseText; }
|
| 2. | function changePage(pageName, objectID) {…}
Add the function changePage() to your JavaScript.
This function takes the URL for the page of content to be loaded and the ID of the object it is being placed into, and passes this info to the basic Ajax fetchData() function from Chapter 20 (see Code 20.6).
The fetchData() function grabs from the server the contents of the file specified by pageName, and passes it to the filterData() function, along with the ID of the object the content should be placed into.
| | | 3. | function filterData(pageRequest, objectID){…}
Add the filterData() function to your JavaScript code. This function overrides the default version in the ajaxBasics.js file we will be adding to the code later.
After being processed, the data from the fetchData() function needs to be filtered and placed on the page. This function simply places the data received into the indicated object, as defined by objectID.
| 4. | externalContent.css
Create a new external style sheet and save it as externalContent.css (Code 22.2). Step 5 applies to this file.
Code 22.2. externalContent.css: Styles to be used with the external content. #col-A { width: 240px; margin: 0px 8px 8px 0px; background-color: #ccc; float: left; } #col-B { width: 490px; float: left; background-color: #fff; padding: 8px; }
|
| 5. | #col-A {…} #col-B {…}
Add ID selector rules to create two columns, one to hold the links used to trigger the changePage() function (A), and the other (B) to hold the results. In this example, I float them next to each other so that they appear side-by-side.
| 6. | external/chapter01.html
Set up the external files that you will be importing into your main Web page using Ajax (Code 22.3). You only need to include the HTML code found between the <body> tags of a typical HTML page. You do not need to include the doctype or the <html> and <head> elements. In this example, I've placed all the external content into a common directory to keep things organized.
Code 22.3. external/chapter01.html: A sample of external HTML code imported using Ajax. <h2>CHAPTER I <span >Down the Rabbit-Hole</span> </h2> <div > <div > <img src="/books/3/292/1/html/2/images/alice02a.gif" height="285" width="190" alt="" /> Oh dear! I shall be late!</div> <p>Alice was beginning to get very tired of sitting by her sister on the bank…</p>
|
| | | 7. | index.html
Start a new HTML file and save it as index.html (Code 22.4). Steps 8 through 14 apply to this file.
Code 22.4. index.html: The HTML "envelope" page that external content is imported into. | 8. | src="/books/3/292/1/html/2/ajaxBasics.js"
Add a call to the ajaxBasics.js file created in Chapter 20 (Code 20.6). You will need to add a copy of this file to the directory or change the src value to the path where your ajaxBasics.js file is located.
| 9. | src="/books/3/292/1/html/2/externalContent.js"
Add a call to the externalContent.js file created in Step 1.
| 10. | href="externalContent.css"
Add a link to the externalContent.css file from Step 4.
| | | 11. | onload= "changePage('chapter01.html', 'col-B');"
In the <body> tag, add an onload event handler to trigger the changePage() function from Step 2, which then passes the function the name of the first page to be displayed, as well as information about where it should be displayed.
| 12. | <div >…</div>
Create column A by adding a <div> element and giving it the col-A ID.
| 13. | <a href="#" onclick="changePage ('chapter01.html', 'col-B');">…</a>
In column A, add controls that trigger the changePage() function, passing it the URL of the content to be retrieved from the server and the ID for the object into which it should be placed.
| 14. | <div > </div>
Create column B by adding a <div> element and giving it the col-B ID. This identifies the area that the content being grabbed from the server should be inserted into.
|
 Tip
Of course, the example in this section brings up issues of search engine optimization. If the content is dynamically loaded by Ajax, then it will not get crawled by search engine spiders that ignore JavaScript. If you are worried about being found by search engines, never place important content in dynamically loaded files. Instead, code loaded in this way should include information that is changed on a daily basis or is open-ended, such as a map, where it is not feasible to load all of the data in a single server call.
|
