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

Written by Administrator

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

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