❑ The HTML Form
❑ The showHint() Function
❑ The GetXmlHttpObject() Function
❑ The stateChanged() Function
❑ AJAX Suggest Source Code
AJAX can be used to create more interactive applications.
The following AJAX example demonstrates how a Web page can communicate
with a Web server while a user enters data into an HTML form.
For this example, use the name “Kelly.” Note what happens as you type a name in
the input field,
the htML Form
The preceding form 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>
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 a user inputs data, the function called "showHint()" is executed. The
execution of the function is triggered by the "onkeyup" event. In other words,
each time a user presses and then releases a key inside the input field, the function
showHint is called.
the showhint() Function
The showHint() function is a very simple JavaScript function placed in the
<head> section of the HTML page:
var xmlhttp;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
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 preceding function executes every time a character is entered in the input field.
If there is input in the input field (str.length > 0), the showHint() function
executes the following:
8 Defines the URL (filename) to send to the server
8 Adds a parameter (q) to the URL with the content of the input field
8 Adds a random number to prevent the server from using a cached file
8 Creates an XMLHttp object and tells the object to execute a function called
stateChanged when a change is triggered
8 Opens the XMLHttp object with the given URL
8 Sends an HTTP request to the server
If the input field is empty, the function simply clears the content of the txtHint
placeholder.
the getXmlhttpObject() Function
The showHint() function calls a function named GetXmlHttpObject().
The purpose of the GetXmlHttpObject() function is to solve the problem of
creating different XMLHttp objects for different browsers:
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
the stateChanged() Function
The stateChanged() function contains the following code:
function stateChanged()
{
if (xmlhttp.readyState==4)
(continued)
Learn JavaScript and Ajax with w3schools
178
{
document.getElementById("txtHint").innerHTML=xmlhttp.re-sponseText;
}
}
The stateChanged() function executes every time the state of the XMLHttp
object changes.
When the state changes to 4 (“complete”), the content of the txtHint placeholder
is filled with the response text.
AJAX Suggest Source Code
The following source code belongs to the previous AJAX example.
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>
Be sure to try it on a server with ASP or PHP enabled. N OtE
(continued)
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 ("Your browser does not support XMLHTTP!");
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)
{
document.getElementById("txtHint").innerHTML=xmlhttp.re-sponseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
(continued)
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
the AJAX Server page—ASpand php
There is no such thing as an AJAX server. AJAX pages can be served by any Internet
server.
The server page called by the JavaScript in the previous example is a simple ASP file
called gethint.asp.
Following are two examples of the server page code, one written in ASP and one
in PHP.
AJAX ASpExample
The code in the gethint.asp page is written in VBScript for an Internet Information
Server (IIS). It checks an array of names and returns the corresponding names to
the client:
<%
response.expires=-1
dim a(30)
'Fill up array with names
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"
(continued)
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"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
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
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
(continued)
response.write(hint)
end if
%>
AJAX phpExample
The preceding code can be rewritten in PHP.
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
To run the entire example in PHP, remember to change the value of the url
variable in "clienthint.js"from "gethint.asp"to "gethint.php".
N OtE
(continued)
Chapter 32: AJAX Suggest
183
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen(
$q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
❑ The showHint() Function
❑ The GetXmlHttpObject() Function
❑ The stateChanged() Function
❑ AJAX Suggest Source Code
AJAX can be used to create more interactive applications.
The following AJAX example demonstrates how a Web page can communicate
with a Web server while a user enters data into an HTML form.
For this example, use the name “Kelly.” Note what happens as you type a name in
the input field,
the htML Form
The preceding form 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>
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 a user inputs data, the function called "showHint()" is executed. The
execution of the function is triggered by the "onkeyup" event. In other words,
each time a user presses and then releases a key inside the input field, the function
showHint is called.
the showhint() Function
The showHint() function is a very simple JavaScript function placed in the
<head> section of the HTML page:
var xmlhttp;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
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 preceding function executes every time a character is entered in the input field.
If there is input in the input field (str.length > 0), the showHint() function
executes the following:
8 Defines the URL (filename) to send to the server
8 Adds a parameter (q) to the URL with the content of the input field
8 Adds a random number to prevent the server from using a cached file
8 Creates an XMLHttp object and tells the object to execute a function called
stateChanged when a change is triggered
8 Opens the XMLHttp object with the given URL
8 Sends an HTTP request to the server
If the input field is empty, the function simply clears the content of the txtHint
placeholder.
the getXmlhttpObject() Function
The showHint() function calls a function named GetXmlHttpObject().
The purpose of the GetXmlHttpObject() function is to solve the problem of
creating different XMLHttp objects for different browsers:
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
the stateChanged() Function
The stateChanged() function contains the following code:
function stateChanged()
{
if (xmlhttp.readyState==4)
(continued)
Learn JavaScript and Ajax with w3schools
178
{
document.getElementById("txtHint").innerHTML=xmlhttp.re-sponseText;
}
}
The stateChanged() function executes every time the state of the XMLHttp
object changes.
When the state changes to 4 (“complete”), the content of the txtHint placeholder
is filled with the response text.
AJAX Suggest Source Code
The following source code belongs to the previous AJAX example.
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>
Be sure to try it on a server with ASP or PHP enabled. N OtE
(continued)
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 ("Your browser does not support XMLHTTP!");
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)
{
document.getElementById("txtHint").innerHTML=xmlhttp.re-sponseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
(continued)
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
the AJAX Server page—ASpand php
There is no such thing as an AJAX server. AJAX pages can be served by any Internet
server.
The server page called by the JavaScript in the previous example is a simple ASP file
called gethint.asp.
Following are two examples of the server page code, one written in ASP and one
in PHP.
AJAX ASpExample
The code in the gethint.asp page is written in VBScript for an Internet Information
Server (IIS). It checks an array of names and returns the corresponding names to
the client:
<%
response.expires=-1
dim a(30)
'Fill up array with names
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"
(continued)
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"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
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
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
response.write("no suggestion")
else
(continued)
response.write(hint)
end if
%>
AJAX phpExample
The preceding code can be rewritten in PHP.
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
To run the entire example in PHP, remember to change the value of the url
variable in "clienthint.js"from "gethint.asp"to "gethint.php".
N OtE
(continued)
Chapter 32: AJAX Suggest
183
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen(
$q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
0 comments:
Post a Comment