YouTip

# AJAX JSON Example * * * AJAX can be used for interactive communication with JSON files. * * * ## AJAX JSON Example The following example demonstrates how a webpage can use AJAX to read information from a JSON file: ## Example Get Course Data [Try it »](#) * * * ## Example Explanation - loadXMLDoc() Function When the user clicks the "Get Course Data" button above, the loadXMLDoc() function is executed. The loadXMLDoc() function creates an XMLHttpRequest object, adds a function to execute when the server response is ready, and sends the request to the server. When the server response is ready, we use the [JSON.parse()](#) method to convert the data into a JavaScript object: ## Asynchronously Load JSON Document function loadXMLDoc(){var xmlhttp; if(window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari browser execute code xmlhttp=new XMLHttpRequest(); }else{// IE6, IE5 browser execute code xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4&&xmlhttp.status==200){var myArr = JSON.parse(this.responseText); myFunction(myArr)}}xmlhttp.open("GET","/try/ajax/json_ajax.json",true); xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xmlhttp.send(); }function myFunction(arr){var out = ""; var i; for(i = 0; i<arr.length; i++){out += '' + arr.title + '
'; }document.getElementById("myDiv").innerHTML=out; } * * * ## AJAX Server Page The server page used in the above example is actually a JSON file named "[json_ajax.json](#)". The JSON data is as follows: ## json_ajax.json file: [{"title": "JavaScript Tutorial", "url": ""}, {"title": "HTML Tutorial", "url": ""}, {"title": "CSS Tutorial", "url": ""}] Send JSON data: xmlhttp.send(JSON.stringify({ "email": "admin@", "response": { "name": "" } }));