AJAX Tutorial

AJAX Tutorial
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.
AJAX Example
AJAX can be used to create more interactive applications.
AJAX Example
In the AJAX example below we will demonstrate how a web page can communicate with a web
server online as a user enters data into a web form.
Type a Name in the Box Below

First Name:
Suggestions: Petunia
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 Browsers
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
}
The Full Source Code
The full source code to the example is listed in the next chapter.
AJAX Source
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
}
if (xmlHttp==null)
{
return
}
var url="gethint.asp"
url=url+"?q="+str
xmlHttp.send(null)
}
{
{
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
{
}
{
}
return objXMLHttp
}
The AJAX server page is explained in the next chapter.
AJAX Server
There is no such thing as an AJAX server.
AJAX pages can be served by any internet server.
The AJAX Server Page

The server page called by the JavaScript in the example used in the previous chapters is a simple
ASP file called "gethint.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.
It just checks an array of names and returns the corresponding names to the client:
<%
dim a(30)
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
q=ucase(request.querystring("q"))
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
AJAX Database Example
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

Select a Customer:
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 AJAX JavaScript
This is the JavaScript code stored in the file "selectcustomer.js":
var xmlHttp
function showCustomer(str)
{
if (xmlHttp==null)
{
return
}
var url="getcustomer.asp"
url=url+"?q="+str
xmlHttp.send(null)
}
{
{
}
}
{
var objXMLHttp=null
{
}
{
}
return objXMLHttp
}
The server paged called by the JavaScript, is a simple ASP file called "getcustomer.asp".
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 XML Example
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

Select a CD:
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 AJAX JavaScript
This is the JavaScript code stored in the file "selectcd.js":
var xmlHttp
function showCD(str)
{
if (xmlHttp==null)
{
return
}
var url="getcd.asp"
url=url+"?q="+str
xmlHttp.send(null)
}
{
{
}
}
{
var objXMLHttp=null
{
}
{
}
return objXMLHttp
}

The server paged called by the JavaScript, is a simple ASP file called "getcd.asp".
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
AJAX XMLHttpRequest
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
{
XMLHttp=new XMLHttpRequest()
}
{
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 never
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
{
}
}
if (XMLHttp==null)
{
}
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:
If XMLHttp still has a null value, try to create the object the "standard" way:
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.
Sample codings
//ajax part
var xmlHttp = null; //initialize xmlhttp object
function GetXmlHttpObject(){
var objXMLHttp=null
if (window.XMLHttpRequest){
}
else if (window.ActiveXObject){
}
return objXMLHttp
}
function AjaxUpdater(url,element){
//alert(url);
xmlHttp = GetXmlHttpObject()
if (xmlHttp==null){
return
}
xmlHttp.send(null)
function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById(element).innerHTML=xmlHttp.responseText
}
}
}
Html
<span id="ptab1" class="atab" onclick="javascript: tabClick('ptab1');

AjaxUpdater('priestoptions.php?opt=1&id=<?php echo
$_REQUEST['id']?>','priest_box');">
God Servant Details
</span>
<div id="priest_box"></div>

AJAX Tutorial

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

AJAX Tutorial

Transféré par

Droits d'auteur :

Formats disponibles

AJAX Tutorial

AJAX is based on JavaScript and HTTP requests.

AJAX = Asynchronous JavaScript And XML

AJAX is an acronym for Asynchronous JavaScript And XML.>

AJAX Is A Browser Technology

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:

AJAX Is About Better Internet Applications

You Can Start Using AJAX Today

There is nothing new to learn.

AJAX Uses XML And HTTP Requests

AJAX can be used to create more interactive applications.

Type a Name in the Box Below

Example Explained - The HTML Form

Example Explained - The showHint() Function

The function contains the following code:

• Defines the url (filename) to send to the server

Example Explained - The stateChanged() Function

The stateChanged() function contains the following code:

AJAX Browser Support

The example on the previous page called a function called GetXmlHttpObject.

The function is listed below:

The Full Source Code

AJAX Example - AJAX Source

You can copy and paste it, and try it yourself.

The AJAX HTML Page

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code, stored in the file "clienthint.js":

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.

The AJAX Server Page

AJAX Database Example

AJAX can be used for interactive communication with a database.

AJAX Database Example

Select a Name in the Box Below

AJAX Example Explained

The JavaScript code is listed below.

This is the JavaScript code stored in the file "selectcustomer.js":

The AJAX Server Page

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

AJAX XML Example

AJAX can be used for interactive communication with an XML file.

AJAX XML Example

Select a CD in the Box Below

AJAX Example Explained

The JavaScript code is listed below.

The AJAX JavaScript

This is the JavaScript code stored in the file "selectcd.js":

The AJAX Server Page

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes

The XMLHttpRequest object makes AJAX possible.

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.

Example above explained:

If it's available, use it to create a new object:

If it is available, use it to create a new object:

Example above explained: