(9 امتیاز از 2 رای)
Loading...
استفاده از JSON در AJAX
AJAX کوتاه شده عبارت Asynchronous JavaScript and XML است، و به منظور ایجاد برنامه های Asynchronous سمت کاربر مورد استفاده قرار می گیرد. مطابق مدل AJAX، برنامه های وب می توانند داده ها را بدون اینکه دخالتی در رفتار صفحه داشته باشند، از یک سرور به صورت Asynchronous دریافت/ارسال کنند.
بسیاری از توسعه دهندگان هنگام ارسال/دریافت داده ها از طریق AJAX از فرمت داده ای JSON استفاده می کنند. برای مثال وب سایت هایی که نتایج مسابقات ورزشی را به طور لحظه ای به روز رسانی می کنند، از AJAX بهره می برند. هر داده های که با استفاده از AJAX به روز می شود را می توان با فرمت JSON در سرور ذخیره کرد.
مثال
مثال زیر نحوه استفاده از JSON با AJAX را نشان می دهد. تابع loadJson برای به روز کردن دادهای JSON به صورت Asynchronous استفاده می شود. کدهای زیر را با نام ajax.htm ذخیره کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <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> |
ما در مسیر http://www.tutorialspoint.com/json/data.json یک فایل JSON شامل داده های زیر را ایجاد کرده ایم که توسط کد بالا دریافت و نمایش داده می شوند:
1 | {"name": "Brett", "country": "Australia"} |
هیچ نظری ثبت نشده است