XML ( एक्सएमएल) भाग -३

 वेबसाईट डिझाईनमध्ये आपण html म्हणजे Hyper Text markup Language  वापरतो त्याची रचनाही xml  सारखीच असते मात्र त्यातील टॅग ठराविक असतात. xml मध्ये टॅगचे नाव आपण काहीही ठेऊ शकतो. यात टॅगचा उपयोग फक्त माहिती चा प्रारंभ व शेवट दाखविणे एवढाच असतो.  मात्र जर आपण वेबडिझाईनच्या टेबलमधील टॅग  वापरून xml लिहिली तर नावांच्या साधर्म्यामुळे घोटाळा होण्याची शक्यता असते  समजा एका अशा xml मध्ये table टॅग दोन प्रकारची माहिती लिहिण्यासाठी वापरला असेल तर नावांच्या साधर्म्यामुळे चूक होईल. अशावेळी टॅगचे नाव पूर्वप्रत्यय (prefix) वापरून बदलले जाते.


--------------------------
चुकीची रचना
<table>
 <tr>
    <td>Apples</td>
    <td>10</td>
    </tr>
</table>
 <table>
    <name>Window</td>
    <width>1.5</td>
    <height>2.5</td>
 </table>
---------------------------------
बदललेले सुधारित स्वरूप
<a:table>
 <a:tr>
    <a:td>Apples</a:td>
    <a:td>10</a:td>
    </a:tr>
</a:table>
 <b:table>
    <b:name>Board</b:name>
    <b:width>1.5</b:width>
    <b:height>2.5</b:height>
 </b:table>
----------------------------

XML Namespaces - The xmlns Attribute

 वरील xml फाईलमध्ये   Table हा टॅग एकदा html table मधील माहिती लिहिण्यासाठी तर दुसर्‍यावेळी साधा xml tag  म्हणून वापरला आहे. टॅगच्या नामसाधर्म्यामुळे होणारी चूक टाळण्यासाठी prefix लावून हा दोष काढला आहे. मात्र  html  माहिती व दुसरी माहिती  यातील फरक कळण्यासाठी xml टॅगच्या xmlns या गुणविशेषाचा वापर केला जातो. xmlns म्हणजे xml namespace सुरुवातीच्या टॅग मध्ये माहितीच्या प्रकाराविषयी माहिती दिली जाते. 
<a:table xmlns:a="http://www.w3.org/TR/html4/">
 <a:tr>
    <a:td>Apples</a:td>
    <a:td>10</a:td>
    </a:tr>
</a:table>
 <b:table xmlns:b="http://www.w3schools.com/board">
    <b:name>Board</b:name>
    <b:width>1.5</b:width>
    <b:height>2.5</b:height>
 </b:table>

XML ( एक्सएमएल) भाग -२

 xml फाईलमधील सर्व टॅगना node  असे म्हटले जाते.  डिक्लेरेशन स्टेटमेंटनंतर पहिला मुख्य टॅग असतो त्याला root असे म्हटले जाते. आतील टॅगना  child म्हटले जाते. नेहमीच्या नातेसंबंधात जसे आपण parent, child, firstChild  असे शब्द वापरतो. त्याच नावानी  xml फाईलचे tree structure  ओळखले जाते. उदाहरणार्थ
----
<root>
  <child>
    <subchild>..... </subchild>
  </child>
<child>
    <subchild>.....</subchild>
  </child>
<child>
    <subchild>.....</subchild>
  </child>
</root>
----
असे xml फाईलचे स्वरूप असते.

 xml फाईलमध्ये लिहिलेल्य़ा माहितीचे अक्षरसंच (character encoding) विविध भाषा वा चिन्हांच्या स्वरुपात असू शकतात त्याची माहिती पहिल्या व्याख्येतच देणे श्रेयस्कर असते.

उदाहरणार्थ विंडोजच्या नोटपॅडमध्ये लिहिलेला मजकूर single-byte ANSI (ASCII) मध्ये save केला जातो. जर मजकुरात ANSI, UTF-8, Unicode(UTF-16), or Unicode Big अक्षरसंच वापरले असतील तर save as हा पर्याय वापरून योग्य तो अक्षरसंच निवडावा लागतो.

 xml फाईलमध्ये लिहिलेल्य़ा माहितीचे अक्षरसंच खालीलप्रकारे दाखविले जातात.<?xml version="1.0" encoding="us-ascii"?>
<?xml version="1.0" encoding="windows-1252"?>
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-16"?>
मराठीतील मजकुरासाठी UTF-8 या प्रकारचा अक्षरसंच लागत असल्याने फाईलच्या पहिल्या ओळीत त्याचा खालीलप्रकारे उल्लेख करावा लागतो. <?xml version="1.0" encoding="UTF-8"?>

XML ( एक्सएमएल) भाग -१

XML म्हणजे eXtensible Markup Language ( वाढविता यॆणारा व प्रत्येक माहिती एककासाठी  सूचक चिन्हे असणारा माहिती कोष)

डाटाबेसमध्ये माहिती साठविण्यासाठी अनेक टेबल किंवा तक्ते असतात. त्यातील प्रत्येक ओळीत एक रेकॉर्ड असते. तेथे विविध रकान्यांमध्ये योग्य त्याप्रकारची माहिती भरलेली असते. त्यामुळे डाटाबेसचा वापर केल्यास आपल्याला हव्या त्या रेकॉर्डमधील हवी ती माहिती वा अशा माहितीचा संच चटकन मिळविता येतो. मात्र यासाठी डाटाबेस व  डाटा वाचणारे विशिष्ठ प्रोग्रॅम वापरावे लागतात.

XML मध्ये डाटाबेसप्रमाणेच माहिती वर्गीकरण करून ठेवता येते व त्यातील कोणतीही  माहिती वा अशा माहितीचा संच आपणास मिळविता येतो. शिवाय याची रचना अगदी साधी असून साध्या नोटपॅडच्या साहाय्यानेही आपल्याला एक्सएमएल फाईल बनविता येते.

एक्सएमएल फाईलच्या सुरुवातीस <?xml version="1.0"?> लिहिले की पुढील माहिती  एक्सएमएल स्वरुपात आहे हे कॉम्प्युटरला समजते. व त्या माहितीचे पृथ:करण त्याला टॅगच्या साहाय्याने करता येते.
उदाहरणार्थ खालील xml फाईल पहा.
--------------
<?xml version="1.0" ?>
<Websites>
    <Website>
        <name>www.dnyandeep.net</name>
        <description>Dnyandeep Foundation main  website</description>
        </Website>
    <Website><name>www.mymarathi.com</name>
        <description>Marathi literature and Maharashtra information in Marathi</description>
        </Website>
    <Website><name>www.sanskritdeepika.org</name>
        <description>Sanskrit Dictionary, Grammar with audio clips </description>
        </Website>
 </Websites>
-------------
 यात पहिल्या टॅगचा प्रारंभ <Websites> हा आहे व त्याचा शेवट फाईलच्या शेवटी </Websites> ने केला आहे.  Websites हा टॅग एकदाच आला आहे. त्यात तीन  Website टॅग्स आहेत. प्रत्येक Website टॅगमध्ये name आणि description हे टॅग्स आहेत व त्यात प्रत्यक्ष माहिती आहे.

 म्हणजे Websites नावाच्या डाटाबेस टेबलमधील प्रत्येक ओळ म्हणजे Website  टॅग व प्रत्येक ओळीत name आणि description या नावांच्या दोन फील्डमध्ये ( रकान्यांमध्ये) प्रत्यक्ष माहिती अशा स्वरुपातही ह्या websites.xml या फाईलची रचना समजता येईल.

AJAX (अजॅक्स) भाग-५

समजा आपल्याला ज्ञानदीपच्या वेबसाईट्समधील मराठी माध्यमातील वेबसाईटचीच माहिती हवी असेल तर मागील प्रोग्रॅममध्ये खालील बदल करून हे आपल्याला साध्य करता येईल.
----
 for (i=0;i<x.length;i++)
      {
   
      xx=x[i].getElementsByTagName("description");
      
          z=xx[0].firstChild.nodeValue;
         if (z.indexOf("Marathi") >= 0)
         {
         xx=x[i].getElementsByTagName("name");
       
         txt=txt+"<li>"+xx[0].firstChild.nodeValue +"<br />";
          xx=x[i].getElementsByTagName("description");
           txt=txt+xx[0].firstChild.nodeValue +"</li>";
       
         }
       
       
    }   
       
    txt=txt+"</ul>";   
------
 अशा प्रोग्रॅमचे उत्तर खालीलप्रमाणे येईल.

AJAX (अजॅक्स) भाग-४

भाग ३ मध्ये   अजॅक्सच्या xmlhttp.responseText या फंक्शनचा उपयोग करून साहाय्याने foundation_websites.txt या फाईलमधील मजकूर सर्व्हरवरून घेऊन  वेबपेजमधील योग्य त्याठिकाणी ही माहिती कशी दाखविता येईल हे आपण पाहिले. मात्र अशा माहितीतील आवश्यक तेवढाच भाग म्हणजे एखाद्या विशिष्ट वेबसाईटचे नाव दाखवायचे असेल तर responseText चा वापर करता येत नाही.
 सर्व्हरवरील माहिती xml प्रकारच्या फाईलमध्ये असेल तर xmlhttp.responseXML चा उपयोग करून माहितीतील आवश्यक  भाग  निवडून तो वेबपेजमध्ये दाखविणे शक्य होते. यासाठी xmlhttp.responseXMLच्या getElementsByTagName या  गुणविशेषाचा (प्रॉपर्टीचा) वापर करावा लागतो.
उदाहरणार्थ  खाली foundation_websites.xml या फाईलमधील माहिती दाखविली आहे.
<?xml version="1.0" ?>
    <Websites>
        <Website>
        <name>www.dnyandeep.net</name>
        <description>Dnyandeep Foundation main  website</description>
        </Website>
        <Website><name>www.mymarathi.com</name>
        <description>Marathi literature and Maharashtra information in Marathi</description>
        </Website>
        <Website><name>www.sanskritdeepika.org</name>
        <description>Sanskrit Dictionary, Grammar with audio clips </description>
        </Website>
        <Website><name>www.vidnyan.net</name>
        <description>Science Education  in Marathi</description>
        </Website>
        <Website><name>www.mysangli.com</name>
        <description>Sangli informationa portal  in Marathi</description>
        </Website>
        <Website><name>www.mykolhapur.net</name>
        <description>Kolhapur informationa portal  in Marathi</description>
        </Website>
        <Website><name>www.envis.org</name>
        <description>Environmental Education and Awareness</description>
        </Website>
        <Website><name>www.green-tech.biz</name>
        <description>Green Technology Seminars and Workshops Information</description>
        </Website>
        <Website><name>www.school4all.org</name>
        <description>All subjects education at school level   in Marathi</description>
        </Website>
        <Website><name>www.mykolhapurilive.com</name>
        <description>First video based news portal for Kolhapur district</description>
        </Website>
    </Websites>
-----
वरील XML फाईलमधील सर्व माहिती तक्त्याच्या स्वरुपात दाखविण्यासाठी खालील प्रोग्रॅम लिहिला आहे.
----
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Name</th><th>Description</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("Website");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("name");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("description");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
        
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onClick="loadXMLDoc('foundation_websites.xml')">Get Website info</button>
</div>

</body>
</html>
--------
त्याचे उत्तर असे येईल.

 

आता या तक्त्यातील मधल्या दोन ओळीच ( पाचवी व सहावी - येथे i शून्यपासून सुरू होतो हे लक्षात ठेवले पाहिजे. म्हणजे i=4 व i=5 ) फक्त दाखवायच्या असल्यास प्रोग्रॅममध्ये खालील बदल करावा लागेल.

  for (i=4;i<6;i++)

त्याचे उत्तर असे येईल.

 

AJAX (अजॅक्स) भाग-३

भाग २ मध्ये दाखविल्याप्रमाणे सर्व्हरवर foundation_websites.txt या फाईलमध्ये खालील मजकूर लिहिला
---
<p><strong>Dnyandeep Foundation Websites</strong></p>
<ol>
  <li>www.dnyandeep.net</li>
  <li>www.mymarathi.com</li>
  <li>www.sanskritdeepika.org</li>
  <li>www.vidnyan.net</li>
  <li>www.mysangli.com</li>
  <li>www.mykolhapur.net</li>
  <li>www.envis.org</li>
  <li>www.green-tech.biz</li>
  <li>www.school4all.org</li>
  <li>www.mykolhapurilive.com</li>
</ol>
----
व मागील प्रोग्रॅममध्ये त्यानुसार खालीलप्रमाणे बदल केले की अजॅक्सच्या साहाय्याने आपल्याला वेबपेजचे टेक्ट टॅगसहीत दाखविता येईल.
xmlhttp.open("GET","foundation_websites.txt",true);
...
<div id="myDiv">Dnyandeep Foundation Websites</div>
<button type="button" onclick="loadXMLDoc()">Show Dnyandeep Foundation Websites</button>


ब्राउजरमध्ये या प्रोग्रॅमचा स्क्रीन असा दिसेल.

बटन दाबून इव्हेंट पाठविला की त्याचे उत्तर खालीलप्रमाणे दिसेल. 

AJAX (अजॅक्स) भाग-२

 सर्व्हरवर info.txt  नावाची फाईल असून त्यात New information असा मजकूर लिहिला आहे असे गृहीत धरले तर ती माहिती ( टेक्स्ट) वाचण्यासाठी मागील पहिल्या भागात दिलेल्या माहिती वर आधारित प्रोग्रॅम खालील प्रमाणे लिहिता येईल. 
------------------
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv">Information to be changed</div>
<button type="button" onclick="loadXMLDoc()">Change information in div</button>

</body>
</html>
--------------
 ब्राउजरमध्ये या प्रोग्रॅमचा स्क्रीन असा दिसेल.

बटन दाबून इव्हेंट पाठविला की त्याचे उत्तर खालीलप्रमाणे दिसेल.

आता वरील मजकुरात वेगवेगळे टॅग वापरून पाहिजे त्याप्रमाणे मजकुराची मांडणी करता येईल.

AJAX (अजॅक्स) भाग १

डायनॅमिक वेबपेजेस तयार करताना स्थानिक पातळीवर जावास्क्रिप्टचा वापर केला जातो. मात्र सर्व्हरवरील माहिती वापरून वेबपेज तयार करताना पीएचपी किंवा एएसपी डॉट नेट यासारख्या प्रोग्रॅमिंग लँग्वेजेसचा वापर करावा लागतो. जावास्क्रिप्ट वापरून वेबपेजमध्ये बदल केल्यास स्थानिक कॉम्प्युटरवरील माहिती साठ्याचा वापर केला जात असल्याने या कृतीस अत्यंत कमी वेळ लागतो. याउलट सर्व्हरवरील माहितीचा वापर करावयाचा असल्यास संपूर्ण वेबपेजची माहिती सर्व्हरकडे पाठवायची व तेथे नव्या माहितीसह वेबपेजचे नूतनीकरण करून ते वेबपेज सर्व्हरकडून स्थानिक कॉम्प्युटरकडॆ परत पाठवायचे अशी पद्धत वापरावी लागते. यासाठी साहजिकच अधिक वेळ लागतो. माहितीतील छोट्या छोट्या बदलांसाठीही संपूर्ण वेबपेज सर्व्हरकडे पाठवून बदल करण्यात वेळ जातॊच शिवाय बाकी सर्व माहिती स्थानिक कॉम्प्युटरवर उपलब्ध असूनही ती सर्व्हरकडे पाठवून परत मागवावी लागते.

यावर उपाय म्हणजे जेवढी माहिती बदलायची आहे अथवा नवीन घालायची आहे त्यासंबंधीची मागणी सर्व्हरकडे केली तर वेबपेज नूतनीकरणास अगदी कमी वेळ लागेल. उदाहरणच द्यायचे झाले तर समजा आपल्या घरातील फ्रीज वा वॉशिंग मशिनमधील छोटा पार्ट बदलण्यासाठी  तेवढाच पार्ट बाहेरून दुरुस्त करून  वा नवीन आणणे श्रेयस्कर असते.   वेबपेज नूतनीकरणात  हेच कार्य  अजॅक्स प्रोग्रॅममध्ये केले जाते.
AJAX या नावाची फोड पुढील प्रमाणे करता येईल

 Asynchronous ( transfer of information using) Javascript (and) XML.
अजॅक्स म्हणजे जावास्क्रिप्ट व एक्सएमएल यांचा वापर करून वेबपेजमधील काही छोट्या माहितीची सर्व्हरबरोबर देवाणघेवाण करणे. यात Asynchronous चा अर्थ एकसंध माहितीऎवजी त्या माहितीतील आंशिक माहितीचे नूतनीकरण.

AJAX मध्ये XMLHttpRequest या सांकेतिक शब्दाचा वापर केला जातो. जावास्क्रिप्टचा वापर करून आपल्याला div टॅगमध्ये बदल करता येतात. त्यासाठी आपण  button चा  onclick इव्हेंट वापरतो. AJAX मध्ये loadXMLDoc() अशी आज्ञा onclick इव्हेंटने दिली जाते. उदाहरणार्थ

----------------------------------
<!DOCTYPE html>
<html>
<head>
<script>
    function loadXMLDoc()
        {
         AJAX script
        }
</script>
</head>
<body>
<div id="myDiv"><h2>Information to be  changed </h2></div>
<button type="button" onclick="loadXMLDoc()">Change information in div</button>
</body>
</html>
---------------------------------
XMLHttpRequest हे  IE7+, Firefox, Chrome, Opera, Safari अशा नव्या ब्राउजर्ससाठी windows प्लॅटफार्मवरील एक ऑब्जेक्ट आहे.
variable=new XMLHttpRequest();
मात्र जुन्या IE6 किंवा  IE5 ब्राउजरमध्ये हे चालत नसल्याने त्यासाठी ActiveXObject("Microsoft.XMLHTTP") हे ऑब्जेक्ट वापरावे लागते.
variable=new ActiveXObject("Microsoft.XMLHTTP");


xmlhttp  या  variable नावाने ते वापरण्यासाठी खालील प्रोग्रॅम लिहिला जातो.

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
------
XMLHttpRequest या फंक्शनचे महत्वाचे गुणविशेष
readyState म्हणजे सर्व्हरकडे पाठविलेल्या मागणी(विनंती)ची स्थिती दाखविणे. ही स्थिती ० ते ४ अशा अंकांनी दर्शविली जाते. ० म्हणजे मागणी अजून नोंदविली गेली नाही.
१ म्हणजे सर्व्हरशी संपर्क झाला आहे
२ म्हणजे मागणीची नोंद झाली आहे
३ म्हणजे प्रत्यक्ष कृतीची सुरुवात झाली आहे.
४ म्हणजे मागणीप्रमाणे कृती पूर्ण झाली आहे व उत्तर तयार आहे.
status म्हणजे  मागणीचे उत्तर -  बरोबर माहिती आल्यास status=200 ("OK") व ती न आल्यास status=404 ("Page not found ") असे उत्तर येते.
आता xmlhttp या ऑब्जेक्टच्या onreadystatechange या गुणविशेषाचा वापर करून आपल्याला readyState व status तपासून पाहता येते.
readyState=4 आणि status=200 असेल तर responseXML  /  responseText या गुणविशेषाच्या साहाय्याने  आणि  सर्व्हरवरील XML  / Text  फाईल वाचता येते.

                               क्रमश:  पुढे --