iam testing ajax on a wamp server but its saying that send() is an anonmyous function and iam getting blank document.
the console is logging: XHR finished loading: GET "http://localhost/json/main.json".(anonymous function) @ widget.js:21(which is xhr.send();)
my htmL:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="employees">
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/widget.js"></script>
<script type="text/javascript" src="json/main.JSON"></script>
</body>
</html>
the json object:
[
{
"name": "Joe Consterdine",
"workstatus": true
},
{
"name": "Roberto Baggio",
"workstatus": true
},
{
"name": "Michael Smith",
"workstatus": false
},
{
"name": "Darren Huckerby",
"workstatus": true
},
{
"name": "Dean Blackwell",
"workstatus": false
},
{
"name": "Neil Sullivan",
"workstatus": false
},
{
"name": "Mark Fish",
"workstatus": true
},
{
"name": "Dean Holdsworth",
"workstatus": true
}
]
my js code:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.onreadystate === 4){
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for(var i = 0; i<employees.length; i++ ){
if(employees[i].workstatus === true){
statusHTML += '<li class="in">';
}else{
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name + '</li>';
}
statusHTML += '</ul>';
document.getElementById('employees').innerHTML = statusHTML;
}
}
xhr.open('GET', 'json/main.json');
xhr.send();
it's if(xhr.readyState ==4) not what you have
you also should check the xhr.status in onreadystatechange
So, your code would be
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i = 0; i < employees.length; i++) {
if (employees[i].workstatus === true) {
statusHTML += '<li class="in">';
} else {
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name + '</li>';
}
statusHTML += '</ul>';
document.getElementById('employees').innerHTML = statusHTML;
}
};
xhr.open('GET', 'json/main.json');
xhr.send();
I prefer using onload/onerror
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i = 0; i < employees.length; i++) {
if (employees[i].workstatus === true) {
statusHTML += '<li class="in">';
} else {
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name + '</li>';
}
statusHTML += '</ul>';
document.getElementById('employees').innerHTML = statusHTML;
};
xhr.onerror = function(e) {
console.log(e);
};
xhr.open('GET', 'json/main.json');
xhr.send();
But onload/onerror may not be available in old broken browsers i.e. IE