JavaScriptを使用したAJAX呼び出し

Question

バニラのJavaScriptを使用してAJAX呼び出しを行う方法を学びたいと思っています。私が取り組んでいる小さなプロジェクトではJQueryから離れるように努力していますが、 xmlhttp.onreadystatechange。誰でも私が間違っていることを指摘できますか（DOMContentLoadedでgetDVDsAndBluRays()関数が呼び出されています）？ありがとう！

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

「それは返信するときサービスを呼び出す」し、

onreadystatechange（）ハンドラの中に.open（）と.send（）があります。 onreadystatechange機能の外に置いておいてください。

Onreadystatechange（）は、xmlhttp要求の状態が変更されたときのイベントハンドラで、要求を開いて送信するまで呼び出されません。

これが役に立った！

Answer 2

それは、そのようなことオープンの場所に気づくと機能を送信する必要があります：onreadystatechangeには、呼び出しの後に実行される

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"); 
    } 
} 

、あなたが実際に

Answer 3

彼らは呼び出されませんので、あなたは内openとsendにonreadystatechangeイベントハンドラを呼び出しを入れています。

外に移動します。