Copy and Paste JavaScript With an Ajax Engine

Digg This Add to del.icio.us

It's not necessary to understand the characteristics of Ajax in order to use it. This article provides copy and paste JavaScript with an Ajax engine. No modifications are necessary.

If you really want to get into the nitty-gritty of Ajax, here are a few pages with good information. Google "Ajax tutorial" for more.

• Understanding Ajax: Getting Started
• AJAX Components
• Database-enabled Ajax with PHP
• Professional Ajax: XML, XPath, and XSLT, Pt. 1

Copy the following JavaScript and paste it into the HEAD area of your Web page source code.

The JavaScript could go pretty much anywhere, in the HEAD or BODY area, so long as it's not pasted within other JavaScript or inside an HTML tag. In the HEAD it's easier to manage, with less clutter in the BODY area, where you'll be working with the examples.

<script type="text/javascript" language="javascript"> function ReplaceElementID(url,id) { var httpRequest; if (window.XMLHttpRequest) { try { httpRequest = new XMLHttpRequest(); } catch(e) {} } else if (window.ActiveXObject) { try { httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} } } if(! httpRequest) { alert('\n\nGiving up :(\n\nCannot create an AJAX connection.'); return false; } httpRequest.onreadystatechange = function() { ContainerContents(httpRequest,id); }; httpRequest.open('GET',url,true); httpRequest.send(''); } // function makeRequestGET() function ContainerContents(content,id) { try { if (content.readyState == 4) { if(content.status == 200) { document.getElementById(id).innerHTML=content.responseText; } else { alert('\n\nThere was a problem with the request.\n\nStatus code: '+content.status+'\n'+content.statusText); } } } catch(error) { alert('Error: '+error.name+' -- '+error.message); } } // function ContainerContents() </script>

Congratulations. You have completed placing JavaScript with an Ajax engine on your Web page.

Now, let's learn how to use it.

Three things are required to use the JavaScript Ajax engine:

1. The URL(s) of the content to be retrieved.
2. A place on your Web page to put the content.
3. A link to trigger the JavaScript, causing it to retrieve the content and put it where you want it.

The URLs of the Content to Be Retrieved

The content to be retrieved can be pretty much whatever you want it to be — text, images, forms, JavaScript, sound — any valid HTML source code.

It's important that the file with the content must be on the same domain as the Web page with the JavaScript Ajax engine. This is a restriction of the JavaScript XMLHttpRequest function, the heart of Ajax. (Work-arounds require relay software on the server. This is addressed later.)

The examples in this article assume you have two files on your server, fileone.html and filetwo.html. They will contain content for the JavaScript Ajax engine to retrieve.

For use in the examples, let fileone.html contain:

<h1>I am fileone.html</h1>

And, let filetwo.html contain:

<h1>I am filetwo.html</h1>

Upload files fileone.html and filetwo.html into the document root of your server (the directory where your domain's main or index Web page file is located). The files could be in other directories. The examples below assume they are in the document root.

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both