DescriptionNavigation elements embedded in your Web pages can degrade your search engine rankings and reduce the responsiveness of your site. The author of this article would like to explore with you how to use AJAX technology to solve these two problems.
Many well-designed Web sites contain a large amount of navigable information associated with the actual content. HTML tags for navigation can affect your search engine evaluation, and can improve the visitor's page download experience. In this article, you'll see how to use Ajax to create a more centralized, faster-loaded Web page.
I. Separation of navigation and content
Let's use an example as a starting point. Please consider the article you are reading, which has the following elements:
· A header that has some predefined links to various parts of the informit.
· There is a line under the header that puts this article into the INFORMIT directory structure (in fact, this is the only navigable element associated with the directory).
· A sidebar in right-hand side, with links to popular articles and recommended content.
· A footer, and some links that will never change.
The above "blending" is likely to affect the way the search engine indexes your data:
· Because search engines can't differentiate between content and navigation text, they will index everything they find on your page. Since the keywords in the directory are mixed with irrelevant navigable keywords, the association between the contents is greatly reduced. Some search engines claim that they can find duplicate text in the pages they are searching for (for example, fixed headers and footers) and delete them. However, do not rely on this possibility, even if they achieve this technology, it may not always be reliable.
· Outbound links in Web pages affect the page evaluation of your content. Although this may improve the ranking of popular articles (because many pages are linked to them), all the pages that are linked to (for example, privacy policies) usually get the highest page rating-this may not be a concern you have been concerned about. In one of my Web sites, the highest rating page is a form for sending messages to a Web administrator-not what you want users to find on Google first.
attention
Even if you don't use a site map, you can get a look at the page rank of your page through Google's site map user interface.
Navigable elements that are added to a Web page can also affect users who use low speed Internet access, especially if the Web page does not use a DIV element (Informit) to use the table. In this case, the entire table must be loaded into some Web browsers before it is displayed to the user.
Traditionally, web designers typically use a frameset or create a complete set of navigation architectures (widely used JavaScript code) to separate navigation from content. Both of these approaches have their drawbacks, so it is not surprising that many large Web sites avoid using the frameset.
With the technology used in the AJAX framework, you can provide a solution for this problem:
· Each Web page contains only the navigable elements and placeholders for the actual content.
· Loads these navigable elements after the Web page is loaded through an embedded frame (IFRAME) or with a XMLHttpRequest object.
· The contents of the navigable elements are then merged into the content of the Web page to produce a clean page that does not embed any frames.
Before you redesign your Web page in this way, you need to consider the following questions:
· The search engine will only see the initial Web page. You must make sure that the page contains links to related pages or to a site map. The navigation line at the top of the article header in the Informit Web site and the links in the article Information section of the page are just a good way to achieve this.
· Visitors who prohibit the invocation of JavaScript in their browsers will have the same page view as the search engine. You have to make sure that their restricted view does not make a big impact on your site's functionality.
· You may want to keep some static content on your page. For example, the informit identification and copyright information must always be displayed to all visitors.
You can start the next step when you are sure that you want to attach your navigation structure to the page and which parts should be separated from it.
Second, design your Web page
The first step towards separating content and navigation is to create placeholders that will insert navigable elements on a Web page. For each contiguous area of navigable elements, you should create a separate div element with a unique ID, so that you can identify it in your JavaScript code later. To prevent excessive shaking, the size of the DIV elements above or to the right of the TOC should be resized to be very close to the actual size of your navigable elements during the authoring page, so that the content does not move when you use the desired HTML code instead of them. One of the most ingenious ways to do this is to insert an empty, appropriately sized div element into that placeholder.
For informit sites, the page structure is already well designed, and DIV elements are already in place, as shown in Figure 1.
Figure 11 Page structure of Informit article |
You just need to remove the content from the navigable div element and insert an empty box, and the header will appear here (for brevity, we will ignore the discussion of embedding company logos and copyright information in each page). The following code is appropriate:
attention
If your Web page uses tables to achieve the desired page layout, do not reuse table cells as placeholders, and it is better to put DIV elements in table cells.
Navigable elements that have been removed from the Web page must be recreated as separate pages. You should use static HTML files to express static content (this will allow buffered content, no matter what Web server you use) and create a server-side script that displays dynamic elements on the Web page that loads them. For Informit, each Web page has a unique article identifier (the "p=" argument in the URL); Therefore, you need to create a server-side script that accepts the article identifier and creates a column to the right. In most cases, you can reuse the server-side code that creates the embedded navigable elements.
After redesigning these web pages, you can then implement the Ajax section of this scenario. As usual, you can work with an inline frame (an IFRAME element), or you can choose a XMLHttpRequest object.
third, embedded framework
If you care about browser compatibility, you should use an embedded framework. Some older browsers support IFRAME elements, but XMLHttpRequest objects are not supported. There are, of course, some other reasons to use this approach:
· Content that is loaded into an IFRAME is displayed in the browser during loading, which displays a visual process to the end user.
· Page buffering always works with content that is loaded into an IFRAME. Some versions of opera are not good at using XMLHttpRequest objects to handle buffered responses.
To do this, we can insert an empty iframe into each div container and add a short JavaScript statement after each IFRAME, as follows:
The ID of the IFRAME should be equal to the ID of the placeholder with _iframe as the suffix. The Loadiframe function uses two parameters: the ID of the placeholder and the URL to load into.
Skills
If you want to make the iframe content visible during the download process, you should replace the empty div box in the placeholder with an IFRAME element of the appropriate size. However, if you want to keep the IFRAME invisible, you should use the Style property to set its height to 0 to overcome errors in some browsers.
The Loadiframe function to start the load process is simple:
function Loadiframe (id,url) {
try {
var iframeobj = document.getElementById (id+ "_iframe");
iframeobj.src = URL;
} catch (Err) {
Alert ("Cannot load" +url+ "into" +id);
}
} |
attention
All the sample code in this article assumes that the browser-compatible document Object Model (DOM).
However, there is no mechanism to inform the requested page that the desired content has been loaded into the placeholder iframe. Therefore, the loaded content must be notified to the parent page (via a JavaScript call) to use the content. The best time to do this is after the page is loaded. Therefore, the body flag in the IFRAME content should contain an onload event:
Skills
The body portion of the content loaded into the IFRAME should always have 0 margins and padding, otherwise it will migrate slightly when it is integrated into the parent page.
The contentloaded function executed in the context of the IFRAME extracts the corresponding HTML content in the body section and passes it to a function that executes in the context of the parent page, which is used to populate the appropriate placeholder:
The contentloaded is executed in the context of the IFRAME context:
function contentloaded (parentid) {
var mycontent = Document.body.innerHTML;
Parent.copycontent (parentid,mycontent);
} |
Copycontent is executed in the context of the parent Web page:
function Copycontent (id,content) {
try {
var placeholder = document.getElementById (ID);
placeholder.innerhtml = content;
} catch (Err) {
Alert ("Cannot copy HTML content into" +id);
}
} |
Now, attentive readers should be puzzled, why so complicated? Isn't it easier to load navigation elements in an IFRAME element? It turns out that there are some explanations for this approach that should be added to prevent misunderstandings:
· The IFRAME has a fixed height and width. If the content is out of each other, the content will be clipped or the IFRAME will be added with scroll bars. However, HTML tags that are copied to a DIV element in a parent page always keep their size automatically resized.
· When in an IFRAME, the link (an element) in the navigation content will load the new page in the IFRAME unless you add target= "_parent" to each link.
· The JavaScript event handler attached to the navigation element will work in the context of the IFRAME (if this context is retained). If you move the navigation content to the main page, the event handler can access the functions and variables defined in the main page.
iv. use of XMLHttpRequest
If your users are primarily using newer versions of Internet Explorer or based on Gecko browsers (Mozilla,firefox,netscape 7), Then you can decide to use the XMLHttpRequest object to download other content to your Web page. The first step is very similar to the way described earlier. For each placeholder, you need a JavaScript function call to start the load process:
However, the Loadcontent function is fundamentally different: it creates a new XMLHttpRequest object, assigns an event handler to it, and initiates the load process asynchronously:
function Loadcontent (id,url) {
try {
var rq = new XMLHttpRequest ();
Rq.open ("Get", url, True);
Rq.onreadystatechange = function () {contentloaded (Rq,url,id)}
Rq.send (NULL);
} catch (Err) {
Alert ("Cannot load" +url+ "into" +id);
}
} |
attention
Each major browser family implements the XMLHttpRequest object in a different way. The easiest way to handle this compatibility problem is to use a wrapper library, such as Sarissa. We used this library in the example in this article.
The callback function contentloaded is responsible for checking whether the XMLHttpRequest object is ready and finished (if the request is completed) and extracting the HTML markup from the response. The easiest way to extract HTML code (unless you use XHTML, in which case you can use the XMLDOM interface) is to use a string handler function to find the text between the and flags:
function contentloaded (rq,url,id) {
try {
if (rq.readystate!= 4) {return;}
if (Rq.status!=) {alert ("Failed to load" +url); Return }
var txt = rq.responsetext;
Find the starting position of the tag
var Startbodytag = Txt.indexof (" Finds the end of the tag, skipping any properties
var Endofstarttag = Txt.indexof (">", startbodytag+1)
Find the tag
var Endbodytag = Txt.indexof (" if (Endbodytag = = 1) {Endbodytag = Txt.length;}
Extract the actual content
var bodycontent = txt.substring (Endofstarttag+1,endbodytag)
if (bodycontent) {
var placeholder = document.getElementById (ID);
placeholder.innerhtml = bodycontent;
}
} catch (Err) {
Alert ("Cannot load" +url+ "into" +id);
}
} |
Using the XMLHttpRequest object has the following advantages over the IFRAME-based approach described earlier:
· The code is cleaner and does not depend on the context switch of the page.
· The XMLHttpRequest object enables you to detect and handle errors (through its readystate and status attributes). When using an IFRAME to load content, if an error occurs, only very rough error prompts can be displayed, mainly because of the lack of calls to callback functions.
· You can implement parallel loads of content elements (as shown in this section) or sequentially mount requests to minimize bandwidth utilization.
v. Summary
In this article, you learned how to separate your Web page content from the navigable elements that surround the content. Separation results in a more focused description of the page content that search engines are searching for, and also reduces the load time for users to use low speed Internet access (since the actual content is displayed to the user before the navigable elements are downloaded).
When you redesign your Web page to take advantage of this scenario, keep in mind that some basic format navigation must remain on the page to allow search engines and users who decide to ban JavaScript from navigating through the pages of your site.
You can use embedded frames (IFRAME) or use XMLHttpRequest objects implemented in the most modern browsers to implement deferred loading of navigable elements. The IFrame method can be supported by older browsers, so it may be the approach you want to consider if you are very concerned with backward compatibility issues. On the other hand, the use of XMLHttpRequest objects allows you to control the loading process more tightly and to detect and handle download errors.
