Question

我正在尝试学习如何使用vanilla JavaScript进行AJAX调用，以便从我正在处理的一个小项目中移开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

应该是这样，请注意打开和发送功能的位置：

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在通话结束后执行，实际上是＃34;在回复时调用服务＆＃34;

Answer 2

你的onreadystatechange（）处理程序中有你的.open（）和.send（）。把它们放在onreadystatechange函数之外，你应该好好去。

Onreadystatechange（）是xmlhttp请求中状态发生变化时的事件处理程序，在您打开请求并发送请求之前不会被调用。

希望这有帮助！

Answer 3

您已将open和send 的调用置于<{1}}事件处理程序中，因此永远不会调用它们。

将它们移到它外面。

用JavaScript调用AJAX

3 个答案: