AJAX XML Example
0AJAX 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: Bob Dylan Bonnie Tyler Dolly Parton
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 More >
AJAX Database Example
0AJAX 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: Alfreds Futterkiste North/South Wolski Zajazd
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. More >
AJAX Suggest Source Code
0AJAX Source Code to Suggest Example
The source code below belongs to the AJAX example on the previous page.
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 ("Your browser does not support AJAX!"); 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.responseText;}}
function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }return xmlHttp;}
The AJAX Server Page – ASP and PHP
There is More >
AJAX Suggest Example
0We have seen that AJAX can be used to create more interactive applications.
AJAX Suggest 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 standard HTML form.
Type a Name in the Box Below
First Name:
Suggestions:
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()" More >
AJAX – The Server-Side Script
0Now we are going to create the script that displays the current server time.
The responseText property (explained in the previous chapter) will store the data returned from the server. Here we want to send back the current time. The code in "time.asp" looks like this:
<%response.expires=-1response.write(time)%>
Note: The Expires property sets how long (in minutes) a page will be cached on a browser before it expires. If a user returns to the same page before it expires, the cached version is displayed. Response.Expires=-1 indicates that the page will never be cached.
Run Your AJAX Application
Try the AJAX application by typing some text into the Name text box below, then click inside the Time text box:
Name: Time:
The Time text box gets the server’s time from "time.asp" file without reloading the page!
AJAX – Request a Server
0AJAX – Sending a Request to the Server
To send off a request to the server, we use the open() method and the send() method.
The open() method takes three arguments. The first argument defines which method to use when sending the request (GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled asynchronously. The send() method sends the request off to the server. If we assume that the HTML and ASP file are in the same directory, the code would be:
xmlHttp.open("GET","time.asp",true);xmlHttp.send(null);
Now we must decide when the AJAX function should be executed. We will let the function run "behind the scenes" when the user types something in the username text field:
<form name="myForm">Name: <input type="text"onkeyup="ajaxFunction();" name="username" />Time: <input type="text" name="time" /></form>
Our updated AJAX-ready "testAjax.htm" file now looks like this:
<html><body>
<script type="text/javascript">function ajaxFunction(){var AJAX – The XMLHttpRequest Object
0AJAX – More About the XMLHttpRequest Object
Before sending data to the server, we have to explain three important properties of the XMLHttpRequest object.
The onreadystatechange Property
After a request to the server, we need a function that can receive the data that is returned by the server.
The onreadystatechange property stores the function that will process the response from a server. The following code defines an empty function and sets the onreadystatechange property at the same time:
xmlHttp.onreadystatechange=function(){// We are going to write some code here}
The readyState Property
The readyState property holds the status of the server’s response. Each time the readyState changes, the onreadystatechange function will be executed.
Here are the possible values for the readyState property:
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 More >
AJAX Browser Support
0AJAX – Browser Support
The keystone of AJAX is the XMLHttpRequest object.
Different browsers use different methods to create the XMLHttpRequest object.
Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.
To create this object, and deal with different browsers, we are going to use a "try and catch" statement. You can read more about the try and catch statement in our JavaScript tutorial.
Let’s update our "testAjax.htm" file with the JavaScript that creates the XMLHttpRequest object:
<html><body>
<script type="text/javascript">function ajaxFunction(){var xmlHttp;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } }</script>
<form name="myForm">Name: <input type="text" name="username" />Time: <input type="text" name="time" /></form>
</body></html>
Example explained: First create a More >