AJAX XML(Extensible Markup Language)

Uncategorized

XML stands for Extensible Markup Language. It is a markup language defines a set of rules to encoding the document. XML can used to store and transport data and those are self descriptive in nature. XML stores data in plain text format. Extension of XML file is ‘.xml’. Moreover XMLs are similar to HTML, but XML does not have a predefined structure like HTML. Developers can define the structure and tags in XML.
XML language is designed to read both human and machine readable format.

AJAX-Asynchronous Javascript and XML are designed to exchange data from client to server without reloading the webpage.

This article shows how can we fetch XML data using AJAX method. The use of  XML saves time taken to fetch data from database. Ajax, loads data without refreshing the entire web page. Here shows an example of loading district under each state while changing States. This is done without using a database connection.

step-1 : First create an XML document similar to  shown below, name it as dist.XML .


<?xml version="1.0" encoding="UTF-8"?>
<sample>
   <place>
       <state>Kerala</state>
       <district>Thiruvananthapuram</district>
   </place>
   <place>
       <state>Kerala</state>
       <district>Ernakualm</district>
   </place>
   <place>
       <state>Kerala</state>
       <district>Kasargod</district>
   </place>
   <place>
       <state>Tamilnad</state>
       <district>Chennai</district>
   </place>
   <place>
       <state>Tamilnad</state>
       <district>Dindigal</district>
   </place>
   <place>
       <state>Tmailnad</state>
       <district>Saelam</district>
    </place>
    <place>
       <state>Karnataka</state>
       <district>Bangloore</district>
    </place>
    <place>
       <state>Karnataka</state>
       <district>Kodagu</district>
    </place>
    <place>
       <state>Karnataka</state>
       <district>Bagalkot</district>
    </place>
    <place>
       <state>Karnataka</state>
       <district>Dharwad</district>
    </place>
    <place>
       <state>Karnataka</state>
       <district>Gadag</district>
    </place>
</sample>

 

In the XML document, <sample> is the root element and its child elements are <place>. Where <state> and <district> are the subchild of root element.

step-2: After Create an HTML page for view the result. Copy below code and paste it in your editor. Name the html document as load_district.html.


<html>
   <head>
   <title>AJAX XML</title>
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

   <!-- jQuery library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <!-- Latest compiled JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <style type="text/css"> 
   h2
   {
      text-align: center;
   }
   </style>
   </head>
   <body>
      <h2>Load XML Data Using AJAX</h2>
      <div class="container-fluid">
         <div class="row">
            <div class="col-md-6">
               <label> Select State:</label>
               <div class="form-group">
                   <select name="state" onchange="district(this.value)" id="state" class="form-control">
                      <option value="" selected disabled="disabled">Select State:</option>
                      <option value="Kerala">Kerala</option>
                      <option value="Tamilnad">Tamilnad</option>
                      <option value="Karnataka">Karnataka</option>
                   </select>
              </div>
            </div>
            <div class="col-md-6">
               <label> Select District:</label>
               <div class="form-group">
                  <select name="district" id="dist" class="form-control">
                     <option>Select District</option>
                  </select>
           </div>
        </div>
      </div>
<script>
function district(state) {
  if(window.XMLHttpRequest){
          xmlhttp=new XMLHttpRequest();
   }else{
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function(){
       if (this.readyState==4 && this.status==200){
             loadDistrict(this);
       }
   }
   xmlhttp.open("GET","dist.xml",true);
   xmlhttp.send();

function loadDistrict(state){
    var dist = '';
    var xmlDoc = state.responseXML;
    var x = xmlDoc.getElementsByTagName("place");
    i = 0;
    var node = document.getElementById('state').value;
    while(i <x.length){ 
        if( x[i].getElementsByTagName("state")[0].childNodes[0].nodeValue == node){
             dist += "<option>" + x[i].getElementsByTagName("district")[0].childNodes[0].nodeValue+"</option>";
        }
        i++;
    }
    document.getElementById("dist").innerHTML = dist;
}
}
</script>
     </div>
   </body>
</html>

Onchnage event in javascript is detect the selection of state names. Based on the value selected on state dropdown, load districts.

  •  In district() function,xmlhttp object specifies the type of request and send to dist.xml.
  • get the response data as XML data
  • loadDistrict() function will filter the XML data based on user requirement.
  • nodeValue contains the text and append this nodeValue to district dropdown box.

step-3:Finally execute the code and view the result.

Leave a Reply

Your email address will not be published. Required fields are marked *