अजाक्स के साथ JSON

AJAX अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल है, जो अतुल्यकालिक वेब एप्लिकेशन बनाने के लिए क्लाइंट की तरफ से परस्पर संबंधित वेब डेवलपमेंट तकनीकों के समूह के रूप में उपयोग किया जाता है। AJAX मॉडल के अनुसार, वेब एप्लिकेशन एक सर्वर से डेटा को अतुल्यकालिक रूप से प्रदर्शन और मौजूदा पृष्ठ के व्यवहार में हस्तक्षेप किए बिना भेज और पुनः प्राप्त कर सकते हैं।

कई डेवलपर्स क्लाइंट और सर्वर के बीच AJAX अपडेट को पास करने के लिए JSON का उपयोग करते हैं। लाइव स्पोर्ट्स स्कोर को अपडेट करने वाली वेबसाइटों को AJAX का एक उदाहरण माना जा सकता है। यदि इन अंकों को वेबसाइट पर अपडेट करना है, तो उन्हें सर्वर पर संग्रहित किया जाना चाहिए ताकि जब आवश्यक हो, वेबपेज स्कोर को पुनः प्राप्त कर सके। यह वह जगह है जहाँ हम JSON स्वरूपित डेटा का उपयोग कर सकते हैं।

AJAX का उपयोग करके अपडेट किया गया कोई भी डेटा वेब सर्वर पर JSON प्रारूप का उपयोग करके संग्रहीत किया जा सकता है। AJAX का उपयोग इसलिए किया जाता है ताकि जावास्क्रिप्ट को आवश्यक होने पर इन JSON फ़ाइलों को पुनः प्राप्त किया जा सके, उन्हें पार्स किया जा सके और निम्नलिखित में से कोई एक कार्य कर सकें।

वेब पेज पर प्रदर्शित करने से पहले आगे की प्रक्रिया के लिए चर में पार्स किए गए मानों को संग्रहीत करें।
यह सीधे वेबपृष्ठ में DOM तत्वों को डेटा असाइन करता है, ताकि वे वेबसाइट पर प्रदर्शित हों।

उदाहरण

निम्नलिखित कोड AJAX के साथ JSON दिखाता है। इसे इस रूप में सहेजेंajax.htmफ़ाइल। यहाँ लोडिंग फंक्शन loadJSON () का उपयोग एसिंक्रोनस रूप से JSON डेटा अपलोड करने के लिए किया जाता है।

<html>
   <head>
      <meta content = "text/html; charset = ISO-8859-1" http-equiv = "content-type">
		
      <script type = "application/javascript">
         function loadJSON() {
            var data_file = "http://www.tutorialspoint.com/json/data.json";
            var http_request = new XMLHttpRequest();
            try{
               // Opera 8.0+, Firefox, Chrome, Safari
               http_request = new XMLHttpRequest();
            }catch (e) {
               // Internet Explorer Browsers
               try{
                  http_request = new ActiveXObject("Msxml2.XMLHTTP");
					
               }catch (e) {
				
                  try{
                     http_request = new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
					
               }
            }
			
            http_request.onreadystatechange = function() {
			
               if (http_request.readyState == 4  ) {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(http_request.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").innerHTML = jsonObj.name;
                  document.getElementById("Country").innerHTML = jsonObj.country;
               }
            }
			
            http_request.open("GET", data_file, true);
            http_request.send();
         }
		
      </script>
	
      <title>tutorialspoint.com JSON</title>
   </head>
	
   <body>
      <h1>Cricketer Details</h1>
		
      <table class = "src">
         <tr><th>Name</th><th>Country</th></tr>
         <tr><td><div id = "Name">Sachin</div></td>
         <td><div id = "Country">India</div></td></tr>
      </table>

      <div class = "central">
         <button type = "button" onclick = "loadJSON()">Update Details </button>
      </div>
		
   </body>
		
</html>

नीचे दिया गया इनपुट फ़ाइल है data.jsonJSON प्रारूप में डेटा होना, जिसे क्लिक करते ही हम एसिंक्रोनस रूप से अपलोड कर देंगे Update Detailबटन। इस फाइल को अंदर रखा जा रहा हैhttp://www.tutorialspoint.com/json/

{"name": "Brett", "country": "Australia"}

उपरोक्त HTML कोड निम्नलिखित स्क्रीन उत्पन्न करेगा, जहाँ आप कार्रवाई में AJAX की जाँच कर सकते हैं -

क्रिकेटर विवरण

नाम	देश
सचिन	भारत

जब आप पर क्लिक करेंगे Update Detailबटन, आपको कुछ इस प्रकार परिणाम प्राप्त करना चाहिए। आप खुद AJAX के साथ JSON की कोशिश कर सकते हैं , बशर्ते आपका ब्राउज़र जावास्क्रिप्ट का समर्थन करता है।

क्रिकेटर विवरण

नाम	देश
ब्रेट	ऑस्ट्रेलिया