Adding AJAX to your website
Adding AJAX to your website.
AJAX stands for Asynchronous JavaScript And XML
AJAX is an acronym for Asynchronous JavaScript And XML.
What AJAX is not, is a new programming language, What it is ,however is simply a new technique for creating better, faster, and more interactive web applications. You are right, Rich Internet Appilcations are in.
AJAX / Ajax is a among other things a Buzz word. In reality its a way to get done more in a single screen . It can also help you save page refreshes. The customers / users who come to you site can see lot of neat stuff into a single page.
While this article gives you a quick intro what it can do is not what is in focus. So essentially it is to let a developer / tech enthusiast how to go about getting started quickly.
To here is what you need to know before hand
1) HTML
2) JavaScript
3) ServerSide Scripting (any ) : JSP/ PHP /ASP.
4) XML
5) CSS
Yeah itsa bunch ! But hey this is the where the brave developer is going.
We will use PHP in this article as it is the most popular web technology.
In the conventionl Web App the web browser is fetching all pages . This is true of AJAX too, the difference is in an AJAX App your code running in the browser does the same.
Imporant functions in JavaScript that you need to know are :
getElementById();
getElementsByTagName();
createElement();
removeElement();
replaceChild() ;
Now that we know what the pre-reads are , let look at the core stuff.
As mentioned before , we need to send requests to the web server form our code. Thats right our code. Here is what we do.
``
// Assuming IE first
<pre class="displaycode">try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
// MOZILLA
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}At this point : xmlHTTP is a valid object. It is this object that sends a reuest out to the web server.
<pre class="displaycode">function sendRequest() {
// Get the city and state from the web form
var city = document.getElementById("city1").value;
var state = document.getElementById("state1").value;
// make sure we get all info
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// make the request
var url = "/region/php/getZipCode.php?citycode=" + escape(city) + "&statecode=" + escape(state);
// get ready to send out the reuest , set request method
xmlHttp.open("GET", url, true);
// Make sure the information is udpated asynchronously.
<pre class="displaycode">// meaning : Call the method updateIt when the server responds. See function below.
xmlHttp.onreadystatechange = updateIt;
// make the request
xmlHttp.send(null);
}
<pre class="displaycode">function updateIt() {
if (xmlHttp.readyState == 4) {
<pre class="displaycode">// ReadyState 4 means your page loaded completely
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}Honestly this is a very simple AJAX operation . There is a lot more to doing AJAX well. But this is pretty much what you do.
Try
Ajax Libraries