জাভাস্ক্রিপ্ট অবজেক্ট নটেশন এইচটিটিপি রিকুয়েস্ট (JSON Http Request)

জেএসওএন এইচটিটিপি রিকুয়েস্ট

রিদওয়ান বিন শামীম

জেএসওএনএর একটি সাধারণ প্রয়োগ হল ওয়েব সার্ভার থেকে ডাটা পড়া ও ওয়েব পেজে তা প্রদর্শন করা।

এই অধ্যায়ে চারটি ছোট ছোট ধাপে দেখানো হবে কীভাবে XMLHttp ব্যবহার করে জেএসওএন ডাটা পড়া হয়।

জেএসওএন উদাহর

এই উদাহরণে myTutorials.txt, থেকে একটি মেনু পড়া হবে ও সেটিকে ওয়েবপেজে দেখানো হবে।

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    } 
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' +
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

উদাহরণের ব্যাখ্যা

প্রথমতঃ অবজেক্টের শ্রেণীবিন্যাস (Array) তৈরি করা হয়ঃ
অক্ষরভিত্তিক শ্রেণীবিন্যাস (Array) নির্ধারণ করে কোনো অবজেক্টের শ্রেণীবিন্যাস (Array) তৈরি করা হয়। প্রত্যেকটি অবজেক্টের দুটি বৈশিষ্ট্য নির্ধারণ করে দেয়া হয়, display এবং url । শ্রেণীবিন্যাস (Array) কে myArray নাম দেয়া হয়।

var myArray = [
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

দ্বিতীয়তঃ শ্রেণীবিন্যাস দেখানোর জন্য জাভাস্ক্রিপ্টের একটি ফাংশন তৈরি করা হয়ঃ myFunction() নামের ফাংশন তৈরি করা হয় যা থেকে অবজেক্টগুলো দৃশ্যমান হয় ও এইচটিএমএল লিঙ্ক জাতীয় উপাদান প্রদর্শন করে।

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

myFunction() কে myArray এর সাথে আর্গুমেন্ট হিসেবে দেখা হয়। যথা,

myFunction(myArray);

তৃতীয়তঃ টেক্সট ফাইল তৈরি করা হয়ঃ

myTutorials.txt: নামক ফাইলের মধ্যে অক্ষরভিত্তিক শ্রেণীবিন্যাসকে রাখা হয়।

[
{
"display": "JavaScript Tutorial",
"url": "http://www.w3schools.com/js/default.asp"
},
{
"display": "HTML Tutorial",
"url": "http://www.w3schools.com/html/default.asp"
},
{
"display": "CSS Tutorial",
"url": "http://www.w3schools.com/css/default.asp"
}
]

চতুর্থতঃ XMLHttpRequest দ্বারা টেক্সট ফাইল পড়া হয়ঃ

XMLHttpRequest লেখা হয় টেক্সট ফাইল পড়ার জন্য, এবং শ্রেণীবিন্যাস দেখানোর জন্য myFunction() ব্যবহার করা হয়।

XMLHttpRequest

var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var myArr = JSON.parse(xmlhttp.responseText);
   myFunction(myArr);
   }
}

xmlhttp.open("GET", url, true);
xmlhttp.send();