2015-11-18 4 views
0

iam тестирование ajax на сервере Wamp, но его утверждение о том, что send() является анонимной функцией и iam получает пустой документ.send() является анонимной функцией?

консоль регистрации: XHR завершения загрузки: GET "http://localhost/json/main.json" (анонимные функции) @ widget.js:. 21 (который xhr.send();)

мой 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> 

JSON объект:

[ 
{ 
    "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 
} 

] 

мой JS код:

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

Почему бы не [$ .ajax] (http://api.jquery.com/jquery.ajax/), когда вы загрузили jQuery на странице – Tushar

+0

i'm учиться, поэтому я просто хочу узнать исходный синтаксис вначале –

ответ

1

это if(xhr.readyState ==4) не то, что у вас есть

вы также должны проверить xhr.status в onreadystatechange

Итак, ваш код будет

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

Я предпочитаю использовать 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(); 

Но onload/oner ror может быть недоступен в старых сломанных браузерах, т.е. IE

+0

спасибо за загрузку работы :) –

Смежные вопросы