w3schools    w3Schools
Search W3Schools :
   
HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...   References Examples Forum About
ADVERTISEMENTS

XML Certification
Download XML editor
Custom Programming
 
Table of contents
AJAX Basic
AJAX HOME
AJAX Intro
AJAX HTTP Request
AJAX Example
AJAX Browsers
AJAX XMLHttpRequest
AJAX Server
AJAX Server Script

AJAX Advanced
AJAX Suggest
AJAX Source
AJAX Database
AJAX XML File
AJAX ResponseXML

AJAX Examples
AJAX Examples

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Tutorials
W3Schools Forum

Helping W3Schools

 

AJAX XML Example

Previous Next

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 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 ("Your browser does not support AJAX!");
  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)
{ 
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 XML File

The XML file is "cd_catalog.xml". This document contains a CD collection.


The AJAX Server Page

The server page 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. Look at a corresponding example in PHP.

The code runs a query against an XML file and returns the result as HTML:

<%
response.expires=-1
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
%>


Previous Next


Altova® MissionKit® - Integrated suite of XML tools

The Altova MissionKit is a suite of intelligent XML tools, including:

XMLSpy® – industry-leading XML editor

  • Support for all XML-based technologies
  • Graphical editing views, powerful debuggers, code generation, & more

MapForce® – graphical data mapping tool

  • Drag-and-drop data conversion with code generation
  • Support for XML, DBs, EDI, Excel® 2007, text, Web services

StyleVision® – visual stylesheet designer

  • Drag-and-drop stylesheet design for XML & databases
  • Output to HTML, PDF, RTF, Word 2007, & more

And more…

Try before you buy with a free fully functional 30-day trial

Download today




diploma   

Get Your Diploma!

W3Schools' Online Certification Program is the perfect solution for busy professionals who need to balance work, family, and career building.

The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.

The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.

The XML Certificate is for developers who want to document their knowledge of XML, XML DOM and XSLT.

The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.

The PHP Certificate is for developers who want to document their knowledge of PHP and SQL (MySQL).


 
WEB HOSTING
ASP.NET Web Hosting
ASP.NET
Web Hosting
$15 Domain Name
Registration
Save $20 / year!
Buy UK Domain Names
Register Domain Names
Cheap Domain Names
Cheap Web Hosting
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting
WEB BUILDING
Website Templates
Flash Templates
Website Builder
Internet Business Opportunity
Custom Programming
FREE Trial or Demo
Web Content Manager
Forms,Web Alerts,RSS
Download XML editor
FREE Flash Website
FREE Web Templates
EDUCATION
US Web Design Schools
HTML Certification
JavaScript Certification
XML Certification
PHP Certification
ASP Certification
Home HOME or Top of Page Validate   Validate   W3C-WAI level A conformance icon Printer Friendly  Printer Friendly

W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our terms of use and privacy policy.
Copyright 1999-2009 by Refsnes Data. All Rights Reserved.