AJAX звонок с JavaScript

Question

Я пытаюсь узнать, как сделать вызов AJAX с использованием ванильного JavaScript в попытке отойти от JQuery для небольшого проекта, над которым я работаю, но, похоже, xmlhttp.onreadystatechange. Может ли кто-нибудь указать на то, что я делаю неправильно (функция getDVDsAndBluRays() вызывается на DOMContentLoaded)? Благодаря!

function getDVDsAndBluRays() { 
    console.log("Getting logged"); 
    var xmlhttp = new XMLHttpRequest(); 
    var url = 'http://www.omdbapi.com/?t=metropolis&y=&plot=short&r=json'; 

    xmlhttp.onreadystatechange = function() { 
    console.log("Not getting logged"); 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     console.log('responseText:' + xmlhttp.responseText); 
     var myMovies = JSON.parse(xmlhttp.responseText); 
     myFunction(myMovies); 

    } 
    xmlhttp.open('GET', url, true); 
    xmlhttp.send(); 
    }; 
}  

function myFunction(myMovies) { 
    for (var i = 0; i < myMovies.length; i++) { 
    var title = myMovies[i].Title.toLowerCase().split(' ').join('+'); 
    var year = myMovies[i].Year; 
    console.log(title + ", " + "year"); 
    } 
} 

Answer 1

У вас есть ваши .open() и .send() внутри обработчика onreadystatechange(). Поместите те, которые находятся за пределами функции onreadystatechange, и вам должно быть хорошо идти.

Onreadystatechange() - это обработчик события, когда в запросе xmlhttp есть изменение состояния, и он не будет вызван, пока вы не откроете запрос и не отправите его.

Надеюсь, это помогло!

Answer 2

Это должно быть так, обратите внимание на расположение открытых и отправить функции:

function getDVDsAndBluRays() { 

    console.log("Getting logged"); 
    var xmlhttp = new XMLHttpRequest(); 
    var url = 'http://www.omdbapi.com/?t=metropolis&y=&plot=short&r=json'; 
    xmlhttp.open('GET', url, true); 
    xmlhttp.send(); 

    xmlhttp.onreadystatechange = function() { 
    console.log("Not getting logged"); 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     console.log('responseText:' + xmlhttp.responseText); 
     var myMovies = JSON.parse(xmlhttp.responseText); 
     myFunction(myMovies); 

    } 

    }; 
}  

function myFunction(myMovies) { 
    for (var i = 0; i < myMovies.length; i++) { 
    var title = myMovies[i].Title.toLowerCase().split(' ').join('+'); 
    var year = myMovies[i].Year; 
    console.log(title + ", " + "year"); 
    } 
} 

onreadystatechange выполняется после вызова, вы на самом деле «вызова службы, когда он отвечает»

Answer 3

Вы поставили звонки open и sendвнутри обработчика событий onreadystatechange поэтому они никогда не будут называться.

Переместить их за его пределы.