| AJAX is not a new language, but just a new way to use existing standards.
With AJAX you can create better, faster, and more user friendly web applications. AJAX is based on JavaScript and HTTP requests. |
AJAX = Asynchronous JavaScript And XML
AJAX is an acronym for Asynchronous JavaScript And XML.>
AJAX is not a new programming language, but simply a new technique for creating better, faster, and more interactive web applications.
AJAX uses JavaScript to send and receive data between a web browser and a web server.
The AJAX technique makes web pages more responsive by exchanging data with the web server behind the scenes, instead of reloading an entire web page each time a user makes a change.
AJAX Is A Browser Technology
AJAX is a technology that runs in your browser. It uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The technology makes Internet applications smaller, faster and more user friendly.
AJAX is a web browser technology independent of web server software.
AJAX Is Based On Open Standards
AJAX is based on the following open standards:
· JavaScript
· XML
· HTML
· CSS The open standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent. (Cross-Platform, Cross-Browser technology)
AJAX Is About Better Internet Applications
Web applications have many benefits over desktop applications, they can reach a larger audience, they are easier to install and support, and easier to develop.
However, Internet applications are not always as “rich” and user-friendly as traditional desktop applications.
With AJAX, Internet applications can be made richer (smaller, faster, and easier to use).
You Can Start Using AJAX Today
There is nothing new to learn.
AJAX is based on open standards. These standards have been used by most developers for several years.
Most existing web applications can be rewritten to use AJAX technology instead of traditional HTML forms.
AJAX Uses XML And HTTP Requests
A traditional web application will submit input (using an HTML form) to a web server. After the web server has processed the data, it will return a completely new web page to the user.
Because the server returns a new web page each time the user submits input, traditional web applications often run slowly and tend to be less user friendly.
With AJAX, web applications can send and retrieve data without reloading the whole web page. This is done by sending HTTP requests to the server (behind the scenes), and by modifying only parts of the web page using JavaScript when the server returns data.
XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
You will learn more about how this is done in the next chapters of this tutorial
Example Explained – The HTML Form
The form above has the following HTML code:
| <form>
First Name: <input type=”text” id=”txt1″ onkeyup=”showHint(this.value)”> </form> <p>Suggestions: <span id=”txtHint”></span></p> |
As you can see it is just a simple HTML form with an input field called “txt1”.
An event attribute for the input field defines a function to be triggered by the onkeyup event.
The paragraph below the form contains a span called “txtHint”. The span is used as a placeholder for data retrieved from the web server.
When the user inputs data, a function called “showHint()” is executed. The execution of the function is triggered by the “onkeyup” event. In other words: Each time the user moves his finger away from a keyboard key inside the input field, the function showHint is called.
Example Explained – The showHint() Function
The showHint() function is a very simple JavaScript function placed in the <head> section of the HTML page.
The function contains the following code:
| function showHint(str)
{ if (str.length==0) { document.getElementById(“txtHint”).innerHTML=”” return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert (“Browser does not support HTTP Request”) return } var url=”gethint.asp” url=url+”?q=”+str url=url+”&sid=”+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open(“GET”,url,true) xmlHttp.send(null) } |
The function executes every time a character is entered in the input field.
If there is some input in the text field (str.length > 0) the function executes the following:
· Defines the url (filename) to send to the server
· Adds a parameter (q) to the url with the content of the input field
· Adds a random number to prevent the server from using a cached file
· Creates an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
· Opens the XMLHTTP object with the given url.
· Sends an HTTP request to the server If the input field is empty, the function simply clears the content of the txtHint placeholder.
Example Explained – The stateChanged() Function
The stateChanged() function contains the following code:
| function stateChanged()
{ if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”) { document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText } } |
The stateChanged() function executes every time the state of the XMLHTTP object changes.
When the state changes to 4 (or to “complete”), the content of the txtHint placeholder is filled with the response text.
AJAX applications can only run in web browsers with XML support.
AJAX Browser Support
AJAX applications can only run in web browsers with complete XML support.
Only two web browsers available today – Internet Explorer (IE) and Mozilla Firefox.- have complete enough support for XML to run AJAX applications.
Since other browsers like Safari and Opera have limited, incomplete or incorrect XML support, this tutorial will focus on IE and Firefox examples.
The example on the previous page called a function called GetXmlHttpObject.
The purpose of the function is to solve the problem of creating different XMPHTTP objects for different browsers.
The function is listed below:
| function GetXmlHttpObject(handler)
{ var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”) } return objXMLHttp } |
AJAX Example – AJAX Source
The source code below belongs to the AJAX example on the previous pages.
You can copy and paste it, and try it yourself.
The AJAX HTML Page
This is the HTML page. It contains a simple HTML form and a link to a JavaScript.
| <html>
<head> <script src=”clienthint.js”></script> </head> <body> <form> First Name: <input type=”text” id=”txt1″ onkeyup=”showHint(this.value)”> </form> <p>Suggestions: <span id=”txtHint”></span></p> </body> </html> |
The JavaScript code is listed below.
The AJAX JavaScript
This is the JavaScript code, stored in the file “clienthint.js”:
| var xmlHttp
function showHint(str) { if (str.length==0) { document.getElementById(“txtHint”).innerHTML=”” return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert (“Browser does not support HTTP Request”) return } var url=”gethint.asp” url=url+”?q=”+str url=url+”&sid=”+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open(“GET”,url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”) { document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”) } return objXMLHttp } |
The AJAX server page is explained in the next chapter.
There is no such thing as an AJAX server.
AJAX pages can be served by any internet server.
AJAX can be used for interactive communication with a database.
AJAX Database Example
In the AJAX example below we will demonstrate how a web page can fetch information from a database using AJAX technology.
Select a Name in the Box Below
Top of Form
Select a Customer:
Bottom of Form
Customer info will be listed here.
AJAX Example Explained
The example above contains a simple HTML form and a link to a JavaScript:
| <html>
<head> <script src=”selectcustomer.js”></script> </head> <body> <form> Select a Customer: <select name=”customers” onchange=”showCustomer(this.value)”> <option value=”ALFKI”>Alfreds Futterkiste <option value=”NORTS “>North/South <option value=”WOLZA”>Wolski Zajazd </select> </form> <p> <div id=”txtHint”><b>Customer info will be listed here.</b></div> </p> </body> </html> |
As you can see it is just a simple HTML form with a drop down box called “customers”.
The paragraph below the form contains a div called “txtHint”. The div is used as a placeholder for info retrieved from the web server.
When the user selects data, a function called “showCustomer()” is executed. The execution of the function is triggered by the “onchange” event. In other words: Each time the user change the value in the drop down box, the function showCustomer is called.
The JavaScript code is listed below.
The AJAX JavaScript
This is the JavaScript code stored in the file “selectcustomer.js”:
| var xmlHttp
function showCustomer(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert (“Browser does not support HTTP Request”) return } var url=”getcustomer.asp” url=url+”?q=”+str url=url+”&sid=”+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open(“GET”,url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”) { document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”) } return objXMLHttp } |
The AJAX Server Page
The server paged called by the JavaScript, is a simple ASP file called “getcustomer.asp”.
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
The code runs an SQL against a database and returns the result as an HTML table:
| sql=”SELECT * FROM CUSTOMERS WHERE CUSTOMERID=”
sql=sql & request.querystring(“q”) set conn=Server.CreateObject(“ADODB.Connection”) conn.Provider=”Microsoft.Jet.OLEDB.4.0″ conn.Open(Server.Mappath(“/db/northwind.mdb”)) set rs = Server.CreateObject(“ADODB.recordset”) rs.Open sql, conn response.write(“<table>”) do until rs.EOF for each x in rs.Fields response.write(“<tr><td><b>” & x.name & “</b></td>”) response.write(“<td>” & x.value & “</td></tr>”) next rs.MoveNext loop response.write(“</table>”) |
AJAX can be used for interactive communication with an XML file.
AJAX XML Example
In the AJAX example below we will demonstrate how a web page can fetch information from an XML file using AJAX technology.
Select a CD in the Box Below
Top of Form
Select a CD:
Bottom of Form
CD info will be listed here.
AJAX Example Explained
The example above contains a simple HTML form and a link to a JavaScript:
| <html>
<head> <script src=”selectcd.js”></script> </head> <body> <form> Select a CD: <select name=”cds” onchange=”showCD(this.value)”> <option value=”Bob Dylan”>Bob Dylan</option> <option value=”Bonnie Tyler”>Bonnie Tyler</option> <option value=”Dolly Parton”>Dolly Parton</option> </select> </form> <p> <div id=”txtHint”><b>CD info will be listed here.</b></div> </p> </body> </html> |
As you can see it is just a simple HTML form with a simple drop down box called “cds”.
The paragraph below the form contains a div called “txtHint”. The div is used as a placeholder for info retrieved from the web server.
When the user selects data, a function called “showCD” is executed. The execution of the function is triggered by the “onchange” event. In other words: Each time the user change the value in the drop down box, the function showCD is called.
The JavaScript code is listed below.
The AJAX JavaScript
This is the JavaScript code stored in the file “selectcd.js”:
| var xmlHttp
function showCD(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert (“Browser does not support HTTP Request”) return } var url=”getcd.asp” url=url+”?q=”+str url=url+”&sid=”+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open(“GET”,url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”) { document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”) } return objXMLHttp } |
The AJAX Server Page
The server paged called by the JavaScript, is a simple ASP file called “getcd.asp”.
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
The code runs a query against an XML file and returns the result as HTML:
| q=request.querystring(“q”)
set xmlDoc=Server.CreateObject(“Microsoft.XMLDOM”) xmlDoc.async=”false” xmlDoc.load(Server.MapPath(“cd_catalog.xml”)) set nodes=xmlDoc.selectNodes(“CATALOG/CD[ARTIST='” & q & “‘]”) for each x in nodes for each y in x.childnodes response.write(“<b>” & y.nodename & “:</b> “) response.write(y.text) response.write(“<br />”) next next |
The XMLHttpRequest object makes AJAX possible.
The XMLHttpRequest
To create AJAX web applications you have to become familiar with the JavaScript object called the XMLHttpRequest.
The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.
Below is listed some of the methods and properties you have to become familiar with.
Creating An XMLHttpRequest Object
Different browsers use different methods to create an XMLHttpRequest object.
Internet Explorer uses an ActiveXObject.
Other browsers uses a built in JavaScript object called XMLHttpRequest.
Here is the simplest code you can use overcome this problem:
| var XMLHttp=null
if (window.XMLHttpRequest) { XMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { XMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”) } |
Example above explained:
First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
Then test if the object window.XMLHttpRequest is available. This object is available in newer versions of browsers like Firefox, Mozilla, and Opera.
If it’s available, use it to create a new object:
XMLHttp=new XMLHttpRequest().
If it’s not available, test if an object window.ActiveXObject is available. This object is available in Internet Explorer version 5.5 and later.
If it is available, use it to create a new object:
XMLHttp=new ActiveXObject().
A Better Example?
Some programmers will prefer to use the newest and fastest version of the XMLHttpRequest object.
The example below tries to load Microsoft’s the latest version “Msxml2.XMLHTTP”, available in Internet Explorer 6, before it falls back to “Microsoft.XMLHTTP”, available in Internet Explorer 5.5 and later.
| var XMLHttp=null
try { XMLHttp=new ActiveXObject(“Msxml2.XMLHTTP”) } catch(e) { try { XMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”) } } if (XMLHttp==null) { XMLHttp=new XMLHttpRequest() } |
Example above explained:
First create a variable XMLHttp to use as your XMLHttpRequest object. Set the value to null.
Then try to create the object the Microsoft way, available in Internet Explorer 6 and later:
XMLHttp=new ActiveXObject(“Msxml2.XMLHTTP”)
If this catches an error, try the older (Internet Explorer 5.5) way:
XMLHttp=new ActiveXObject(“Microsoft.XMLHTTP”)
If XMLHttp still has a null value, try to create the object the “standard” way:
XMLHttp=new XMLHttpRequest()
XMLHttpRequest Methods
The open() method.
The open() method sets up a request to a web server.
The send() method.
The send() method sends a request to the server.
The abort() method.
The abort() method aborts the current server request.
XMLHttpRequest readyState Property
The readyState property defines the current state of the XMLHttpRequest object.
Here are the possible values for the readyState propery:
| State | Description |
| 0 | The request is not initialized |
| 1 | The request has been set up |
| 2 | The request has been sent |
| 3 | The request is in process |
| 4 | The request is completed |
readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
Different browsers treat the ready state differently. Don’t expect all browsers to report all states. Some will not report 0 and 1.
For Your AJAX applications you will actually only be interested state 4. That is when the request is completed and it is safe use the received data.
XMLHttpRequest responseText Property
The responseText property contains the text returned by the server.
javaweblog 
Leave a comment