JSON و AJAX

JSON و AJAX

AJAX که مخفف واژگان Asynchronous JavaScript and XML (ترکیب ناهمزمان XML و JavaScript) است، یک تکنولوژی قدرتمند در سمت کلاینت برای تولید اپلیکیشن های تحت وب نامتقارن می باشد به طوری که بتوانند اطلاعات مورد نظر را به سرور ارسال و از آن (به صورت ناهمزمان) دریافت کنند بدون اینکه لازم باشد صفحه ی جاری از نو بارگذاری یا به اصطلاح refresh شود.
امروزه بسیاری از توسعه دهندگان برای تبادل آپدیت ها (و اطلاعات جدید) بین کلاینت و سرور از فرمت JSON و تکنولوژی AJAX بهره می گیرند. به عنوان مثال می توان به سایت های خبری اشاره کرد که با استفاده از تکنولوژی AJAX جدول امتیاز و تعداد گل های یک تیم ورزشی را به صورت زنده (بدون بارگذاری مجدد کل صفحه ی وب) بروز رسانی می کنند. در واقع برای اینکه این اطلاعات (امتیاز تیم ها) در وب سایت بروز رسانی شوند، می بایست بر روی رایانه ی سرور ذخیره شده تا صفحه ی وب بتواند آن ها را در زمان مورد نیاز واکشی کند. در اینجا است که توسعه دهنده اطلاعات را در فرمت JSON ذخیره کرده و آماده ی ارسال به کلاینت نگه می دارد.
تمامی اطلاعاتی که با AJAX بین کلاینت و سرور تبادل (و بروز رسانی) می شود را می توان در قالب JSON ریخت و در سمت سرور ذخیره کرد. بدین وسیله JavaScript می تواند اطلاعات مورد نیاز را در زمان لازم در قالب فایل های JSON دریافت کرده و پس از parse، یکی از عملیات زیر را بر روی آن ها اجرا کند:

1. مقادیر parse (تفسیر و تبدیل) شده را برای پردازش بیشتر در متغیر ذخیره کرده و سپس آن ها در صفحه ی وب به نمایش بگذارد.
2. داده ها را در صفحه ی وب مستقیما به المان های DOM تخصیص داده تا در وب سایت به نمایش درآیند.

در مثال زیر تکنولوژی AJAX با JSON بکار رفته است. این فایل را با نام ajax.htm ذخیره می کنیم.
همان طور که می بینید در نمونه ی حاضر برای آپلود فایل از نوع JSON به صورت ناهمزمان از تابع ()loadJSON استفاده شده است.

                              content = "text/html;charset = ISO-8859-1" http-equiv = "content-type">                                     
      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();
        }                                     
Cricketer Details
                         
      class = "src">
        NameCountry
         id = "Name">Sachin
         id = "Country">India
     
      class = "central">
         type = "button" onclick = "loadJSON()">Update Details 

زمانی که بر روی دکمه ی Update Detail کلیک می کنید، اطلاعات جدول (بدون اینکه کل صفحه از نو بارگذاری شود) بروز رسانی شده و به صورت زیر در می آید.

Cricketer Details

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.