Hosting Solutions
mobile_logo Table of Contents

External JSON Data File Call In Using Ajax Tutorial

In part 2 we focus on the Ajax request and parsing return objects in a smart compact JavaScript for loop. mylist.json { "u1":{ "user":"John", "age":22, "country":"United States" }, "u2":{ "user":"Will", "age":27, "country":"United Kingdom" }, "u3":{ "user":"Abiel", "age":19, "country":"Mexico" }, "u4":{ "user":"Rick", "age":34, "country":"Panama" }, "u5":{ "user":"Susan", "age":23, "country":"Germany" }, "u6":{ "user":"Amy", "age":43, "country":"France" }, "u7":{ "user":"Pete", "age":18, "country":"Italy" }, "u8":{ "user":"Chris", "age":25, "country":"United States" }, "u9":{ "user":"Louis", "age":31, "country":"Spain" }, "u10":{ "user":"Emily", "age":38, "country":"Uraguay" }, "u11":{ "user":"Shawn", "age":52, "country":"Chile" }, "u12":{ "user":"Greg", "age":24, "country":"Romania" } } JSON_tutorial_2.html <!DOCTYPE html> <html> <head> <script> function ajax_get_json(){ var results = document.getElementById("results"); var hr = new XMLHttpRequest();"GET", "mylist.json", true); hr.setRequestHeader("Content-type", "application/json", true); hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var data = JSON.parse(hr.responseText); results.innerHTML = ""; for(var obj in data){ results.innerHTML += data[obj].user+" is "+data[obj].age+" and lives in "+data[obj].country+"<hr />"; } } } hr.send(null); results.innerHTML = "requesting..."; } </script> </head> <body> <div id="results"></div> <script>ajax_get_json();</script> </body> </html>

JavaScript Videos

JSON Programming

JSON Tutorial for Beginners Learn How to ProgramExternal JSON Data File Call In Using Ajax TutorialPHP Dynamic JSON Data File with Ajax ProcessingJSON PHP Ajax Post Dynamic Variable Data TutorialDynamic Photo Gallery JSON Ajax PHP TutorialMultiple Album Photo Gallery Ajax PHP JSON TutorialJSON Timed Ajax PHP MySQL Data Request Web ApplicationImage Cycle Application Programming Tutorial