AJAX XML

|  | 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

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
    %>

## 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

## 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
$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 or Top of Page |  | 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.