send() is an anonmyous function?

341
December 10, 2016, at 1:16 PM

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();
Answer 1

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

Rent Charter Buses Company
READ ALSO
Table Overflow Fixed Horizontal Scrollbar

Table Overflow Fixed Horizontal Scrollbar

I have a table with a fixed initial columnIs it possible to have a horizontal scrollbar that is always visible when the table overflows vertically?

422
jQuery Sort nested JSON objects by date?

jQuery Sort nested JSON objects by date?

I've searched StackOverflow before I made this question but I can't find the solutions to my caseI'm receiving objects from multiple Facebook Graph API calls (see first image)

468
Why isn&#39;t my jquery slideshow showing up&hellip;?

Why isn't my jquery slideshow showing up…?

It should show up between Speaker of the month and Ticket Prices

216
How to Create Variable Padding

How to Create Variable Padding

When I view my website on a smartphone, some of my menu items are flowing off the pageAs a result, I want to give these menu items variable padding widths

282