Académique Documents
Professionnel Documents
Culture Documents
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 a server behind the scenes, instead of reloading an entire web page
each time a user makes a change.
With AJAX, web applications can be faster, more interactive, and more user
friendly.
AJAX uses an XMLHTTPRequest object to send data to a web server, and XML
is commonly used as the format for receiving server data, although any
format, including plain text, can be used.
The technology makes Internet applications smaller, faster and more user
friendly.
• 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)
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.
With AJAX, Internet applications can be made richer (smaller, faster, and
easier to use).
AJAX is based on open standards. These standards have been used by most
developers for several years.
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, and
by modifying only parts of the web page using JavaScript.
The preferred way to communicate with the server is by sending data as XML
(but other methods can be used).
You will learn more about how this is done in the next chapters of this
tutorial.
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.
First Name:
Suggestions:
<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".
The paragraph below the form contains a span called "txtHint". The span is
used as a placeholder for hints 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
txt1 field, the function showHint is called.
function showHint(str)
{
if (str.length > 0)
{
var url="gethint.asp?sid="+Math.random()+"&q="+str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
else
{
document.getElementById("txtHint").innerHTML=""
}
}
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:
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
span is filled with the response text.
The source code below belongs to the AJAX example on the previous page.
<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>
var xmlHttp
function showHint(str)
{
if (str.length > 0)
{
var url="gethint.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
}
else
{
document.getElementById("txtHint").innerHTML=""
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
The server page called by the JavaScript, is a simple ASP file called
"gethint.asp".
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 can be used for interactive communication with a database.
In the AJAX example below we will demonstrate how a web page can fetch
information from a database using AJAX technology.
Select a Customer:
Customer info will be listed here.
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.
var xmlHttp
function showCustomer(str)
{
var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXmlHttpObject(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(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("This example doesn't work in Opera")
return
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("Error. Scripting for ActiveX might be disabled")
return
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
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:
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>")