How to access local json file using ajax in html page using javascript?

Posted by Sangeetha Mani under JavaScript category on 5/20/2014 | Points: 40 | Views : 1732

Post Code |

Search Codes |

Code Home

Hi,
As i have tried to acces local json file using ajax in html page using javascript?

but when i click on the button i could not get the updated json data on the textbox.

below mentioned the Html code with javascript and json file


<!Doctype html>
<html>
<head>

<script>
var xmlHttpRequest;

function GetTime()
{
alert("hi");
    //create XMLHttpRequest object
    xmlHttpRequest = (window.XMLHttpRequest) ? 
	new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

    //If the browser doesn't support Ajax, exit now
    if (xmlHttpRequest == null)
	return;

    //Initiate the XMLHttpRequest object
    xmlHttpRequest.open("GET", "Data.json", true);

    //Setup the callback function
    xmlHttpRequest.onreadystatechange = StateChange;

    //Send the Ajax request to the server with the GET data
    xmlHttpRequest.send(null);
}
function StateChange()
{
    if(xmlHttpRequest.readyState == 4)
    {
	document.getElementById('lblTime').value = xmlHttpRequest.responseText;
    }
}

</script>
</head>
<body>


<form id="form1" runat="server">

<div>
<input type="text" id="lblTime">

<br>
<input type="button" id="btnGetTime" value="Get Time" onclick="GetTime();">

</div>
</form>

</body>
</html>

Data.json file


{"books":
{
"name"":"javascript"

}
}

Please help me , i could not find it out what is my fault in this...

Alert Moderator

Bookmark It

Comments or Responses

Latest Code Snipptes