Copy and Paste Ajax Engine
This article provides the source code of an Ajax engine you
can use over and over, on many different web pages. And
shows you how to use it.
The focus is to make Ajax available even to those who have
learned no programming skills.
Ajax technology has been with us for years. The original
excitement and flurry of articles and opinions about it and
how to use it are pretty much over.
It's the perfect time for presenting a solid Ajax engine
built upon the work gone before.
In essence, Ajax is JavaScript written to retrieve
additional content from the server without disturbing the
web page currently in the browser. Usually, the retrieved
content is also published on the web page itself — without
reloading the page.
You will find several working examples.
The code that is the Ajax engine can be imported into a web
page from an external file. Or, it can be pasted directly
into the web page where it will be used.
In a moment, I'll show you how to us the Ajax engine. But
first, here is the source code of the engine itself:
No customization is required. The engine is good to go. Just
paste it where it will be used.
If the Ajax engine will be imported into a web page from an
external file, then do not include the script tags in that
external file. The JavaScript to import the file already has
script tags.
Here is example code to import an external JavaScript file.
It assumes the external file is saved as ajax.js in the
document root.
Using the Ajax Engine
The web page must have the Ajax engine code. As mentioned
earlier, that can be done by pasting the code into the web
page or by importing the code from an external file.
All that's left to do is to tell the Ajax engine what
content to retrieve and where to publish it.
A div tag (or any other HTML tag that can contain web page
content) is provided as the place to put the retrieved
content. The tag must have an id assigned that is unique
on the web page. Example:
The above is an HTML div tag styled with a border. It has an
id value of "MyUniqueID". The content in the example will be
replaced with the content the Ajax engine retrieves.
Here is one way to retrieve content with the Ajax engine, a
clickable link:
You'll notice two parameters for the GetContent() function.
The first parameter is the URL of the web page or script
from which to get the content (in this case, the default web
page at the document root). The second is the unique ID of
the div tag where the retrieved content is to be published.
Go ahead. Try it.
Paste the Ajax engine into your web page source code, along
with the div tag and the link. Upload the web page to your
server. Type the URL of the web page into your browser.
Now, click your link.
The content of your domain's default web page (probably file
index.html) will be published in the container the div tag
provides.
Without a page reload.
It's akin to magic.
Let me give you one more example. After that, I'll talk
about URL restrictions.
This second example automatically retrieves content.
However, it generally does not slow the rest of the
page load.
Three seconds after the above JavaScript loads into the
browser, the Ajax engine starts up to retrieve the content
and publish it into the div container.
The reason for building in the delay is to ensure the Ajax
engine code is fully loaded into the web page before it is
asked to retrieve content. (Were the engine pasted into
the source code of the web page somewhere above the example
JavaScript, instead of imported from an external file, no
delay would be needed.)
Ajax URL Restrictions
Ajax requires content to be retrieved from the same domain
as the web page. Further, the protocol and port number must
be identical. Example protocols are HTTP and HTTPS in
http://... and https://.... And an example port number
is the "255" in URL http://example.com:255/ (port 80 is
default).
What that means is if you specify a protocol, domain, or
port number with the URL for the Ajax engine to retrieve
content from, then they must match exactly the protocol,
domain, or port number of the web page containing the
engine.
Note that the Ajax engine considers www.example.com and
example.com to be different domains.
The URL restrictions are security considerations built into
the JavaScript interpreter of the browser itself.
Something you can do to bypass all that rigamarole is to use
URLs relative to the document root instead of absolute
http://... URLs. With relative URLs, the protocol, domain,
and port number are guaranteed to be identical.
URLs relative to the document root are also called URIs. A
URI is a URL minus the http://... and domain name parts.
Quick Implementation
For a quick implementation, copy the Ajax engine code and
paste it into your web page. The engine is now ready to be
used.
The place where the Ajax engine shall publish to must be an HTML tag that can contain content, and
it must have a unique id value. That is the container.
Examples of HTML tags that can contain content are div,
span, h1, p, and td.
The id's value needs to begin with a letter. The rest of the
id can be any combination of letters and numbers. But no
spaces or punctuation characters or symbols.
Now, you're ready to tell the Ajax engine
which URL to retrieve content from and the id of the
container where the content shall be published.
Earlier in the article are two examples, a clickable link to
tell the engine to retrieve content and an automatic retrieval.
Use either. Or both. A web page can have more than one
container for the Ajax engine to publish into, so long as
each container has a unique id.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
© Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
