Question

我正在尝试通过编写一些基本的API查询来学习vanilla JS AJAX。但是，我收到请求的状态为0。这是什么意思，我该如何解决这个问题？

var x = document.getElementsByClassName("btn")

for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('click', makeRequest);
}

var httpRequest;

function makeRequest() {
  httpRequest = new XMLHttpRequest();

  if (!httpRequest) {
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }

  document.getElementsByClassName(".text").innerHTML= 'Loading Data ... '

  httpRequest.onreadystatechange = alertContents;
  httpRequest.open('GET', 'https://api.meetup.com/2/cities');
  httpRequest.send(null);

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.' + httpRequest.status);
      }
    }
  }
}

以下jQuery代码完成了这项工作。我仍然很好奇为什么上面的代码不起作用。

$('.btn').click(function(){
  $('.text').text('Loading data . . . ');
  $.ajax({
    type: "GET",
    url: 'https://api.meetup.com/2/cities',
    success: function(data) {
      $('.text').text(JSON.stringify(data));
    }, 
    dataType: "jsonp",
  })
});

Answer 1

因为此时未定义“alertContents”。您应该在将函数分配给onreadystatechange之前声明该函数。

您可以在分配之前使用console.log（typeof alertContents）进行检查。

XMLHttpRequest状态在简单AJAX调用时返回零

1 个答案: