Json Object Loading using pure Javascript and Ajax
How to load Json object using pure Javascript and Ajax. I would like to see full example.
Add Comment
HTML File
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Json Loading</title>
<script type="text/javascript" src="mydata.json"></script>
<script type="text/javascript">
function loadJSON(callback) {
var xobj;
if (window.XMLHttpRequest) {
xobj = new XMLHttpRequest();
} else {
// code for IE6, IE5
xobj = new ActiveXObject("Microsoft.XMLHTTP");
}
xobj.overrideMimeType("application/json");
xobj.open('GET', 'tree_list.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
function init() {
loadJSON(function(response) {
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
document.getElementById('result').innerHTML = actual_JSON[root];
});
}
</script>
</head>
<body>
<p id="result"></p>
<input onClick="loadJSON()" value="Ajax Call" name="" type="button" />
</body>
</html>
Use any Json object to see the result.
