با سلام به شما دوستان خوب، امیدوارم که حال همگی شما خوب باشه و شاد باشید. با اموزش امروزما که در مورد json و ajax درخدمت شما هستم.
AJAX که مخفف واژگان Asynchronous JavaScript and XML (ترکیب ناهمزمان XML و JavaScript) است، یک تکنولوژی قدرتمند در سمت کلاینت برای تولید اپلیکیشن های تحت وب نامتقارن می باشد به طوری که بتوانند اطلاعات مورد نظر را به سرور ارسال و از آن (به صورت ناهمزمان) دریافت کنند بدون اینکه لازم باشد صفحه ی جاری از نو بارگذاری یا به اصطلاح refresh شود.
امروزه بسیاری از توسعه دهندگان برای تبادل آپدیت ها (و اطلاعات جدید) بین کلاینت و سرور از فرمت JSON و تکنولوژی AJAX بهره می گیرند. به عنوان مثال می توان به سایت های خبری اشاره کرد که با استفاده از تکنولوژی AJAX جدول امتیاز و تعداد گل های یک تیم ورزشی را به صورت زنده (بدون بارگذاری مجدد کل صفحه ی وب) بروز رسانی می کنند. در واقع برای اینکه این اطلاعات (امتیاز تیم ها) در وب سایت بروز رسانی شوند، می بایست بر روی رایانه ی سرور ذخیره شده تا صفحه ی وب بتواند آن ها را در زمان مورد نیاز واکشی کند. در اینجا است که توسعه دهنده اطلاعات را در فرمت JSON ذخیره کرده و آماده ی ارسال به کلاینت نگه می دارد.
تمامی اطلاعاتی که با AJAX بین کلاینت و سرور تبادل (و بروز رسانی) می شود را می توان در قالب JSON ریخت و در سمت سرور ذخیره کرد. بدین وسیله JavaScript می تواند اطلاعات مورد نیاز را در زمان لازم در قالب فایل های JSON دریافت کرده و پس از parse، یکی از عملیات زیر را بر روی آن ها اجرا کند:
۱٫ مقادیر parse (تفسیر و تبدیل) شده را برای پردازش بیشتر در متغیر ذخیره کرده و سپس آن ها در صفحه ی وب به نمایش بگذارد.
۲٫ داده ها را در صفحه ی وب مستقیما به المان های 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
در زیر فایل ورودی data.json را مشاهده می کنید که داده های آن در قالب JSON ریخته شده و به مجرد کلیک بر روی دکمه ی Update Detail، به صورت نامتقارن و بدون بارگذاری مجدد کل صفحه (توسط تکنولوژی AJAX) بر روی سایت بارگذاری می شود. این فایل در آدرس http://www.tutorialspoint.com/json/ ذخیره شده است.
{“name”: “brett”, “country”: “Australia”}
کد HTML فوق خروجی زیر تولید می کند. با این مثال قابلیت تکنولوژی AJAX را به واقع مشاهده می کنید:
clip_image001
زمانی که بر روی دکمه ی Update Detail کلیک می کنید، اطلاعات جدول (بدون اینکه کل صفحه از نو بارگذاری شود) بروز رسانی شده و به صورت زیر در می آید.
Cricketer Details
Name
Country
brett
Australia
