Currently, I am attempting to master the art of making an AJAX call using plain JavaScript with the goal of stepping away from JQuery for a specific project. However, I seem to be encountering a roadblock when it comes to xmlhttp.onreadystatechange. If anyone can provide insight into what I might be doing incorrectly (the function getDVDsAndBluRays() is triggered on DOMContentLoaded), I would greatly appreciate it. Thank you!
function getDVDsAndBluRays() {
console.log("Successfully logged in");
var xmlhttp = new XMLHttpRequest();
var url = 'http://www.omdbapi.com/?t=metropolis&y=&plot=short&r=json';
xmlhttp.onreadystatechange = function() {
console.log("Logging unsuccessful");
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");
}
}