getJSON vs .open在调用API时产生两个不同的结果

Question

试图理解为什么一个有效，另一个无效。当用户单击该名称时，将显示一个新引号，但仅在.getJSON下才能生效。在.open方法下，引号显示，但在单击名称后不会更改。为什么是这样？两者都使用完全相同的api url和key。

.getson method

.open method

WITH .OPEN METHOD

＆＃13;

＆＃13;

var xhr=new XMLHttpRequest();

 $(".name").on('click', function() {

   responseObject = JSON.parse(xhr.responseText);
   $(".quote1").html(responseObject.quote);
   console.log(responseObject);

 });

 xhr.open('GET', 'https://andruxnet-random-famous-quotes.p.mashape.com/', true);
 xhr.setRequestHeader("X-Mashape-Key", "fjZoisqRfomshkDSNH1AZLpFCS6gp1yVxU8jsn3fPleq6TIPeF")
 xhr.send(null);
      

＆＃13;

＆＃13;

＆＃13;

WITH .getJSON METHOD

＆＃13;

＆＃13;

$(".name").on("click", function(){
$.getJSON('https://andruxnet-random-famous-quotes.p.mashape.com/',{"mashape-key": "fjZoisqRfomshkDSNH1AZLpFCS6gp1yVxU8jsn3fPleq6TIPeF"}, function(json){
  
  console.log('json response: ', json);
$(".quote1").html(json.quote);
});
  
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来当我使用.open时，我应该使用带有匿名函数的onload来在每次用户单击名称时加载新的引号。但我不确定为什么会这样，如果有人能解释会很棒！

 $(".name").on('click', function() {
   
  var xhr=new XMLHttpRequest();
  xhr.onload=function(){


   responseObject = JSON.parse(xhr.responseText);
   $(".quote1").html(responseObject.quote);
   console.log(responseObject);
  };
   xhr.open('GET', 'https://andruxnet-random-famous-quotes.p.mashape.com/', true);
 xhr.setRequestHeader('X-Mashape-Key', 'fjZoisqRfomshkDSNH1AZLpFCS6gp1yVxU8jsn3fPleq6TIPeF')
 xhr.send(null);
 });