GMgKe586q6suSQnyqZLlGCooeWM

Pages

Search

Wednesday, March 9, 2011

JS - AJAX and XML

Here's a demo on how to use xml and ajax as data transport service.
The xml file: data.xml
<?xml version="1.0" ?>
<data>
    <name>Luna Maya</name>
    <city>Denpasar</city>
    <age>27</age>
</data>

The client processing script:
<h1>AJAX and XML</h1>
<div id="name"></div>
<div id="city"></div>
<div id="age"></div>

<script>
function getData(){
    var ajax = new XMLHttpRequest();
    ajax.open("GET","lola.xml",false);
    ajax.send();
    var data = ajax.responseXML;

    var name = document.getElementById('name');
    var city = document.getElementById('city');
    var age = document.getElementById('age');

    name.innerHTML = data.getElementsByTagName('name')[0].
                     childNodes[0].nodeValue;
    city.innerHTML = data.getElementsByTagName('city')[0].
                     childNodes[0].nodeValue;
    age.innerHTML = data.getElementsByTagName('age')[0].
                    childNodes[0].nodeValue;

}

getData();
</script>
Share/Bookmark

No comments:

Post a Comment