javascript - 我应该如何创建两个对象来执行两个不同的 ajax 调用？

Question

我有:

var xhr = new XMLHttpRequest();                 

xhr.onload = function() {                    

  if(xhr.status === 200) {                     
    document.getElementById('content').innerHTML = xhr.responseText; // Update
  }
};

xhr.open('GET', 'data/data-one.html', true);        // Prepare the request
xhr.send(null); 

现在我想对另一个链接执行相同的操作，因此当单击该链接时，在上面的代码中，data-one.html被插入到 HTML 容器中，其 ID 为我的 html 页面中的内容。

现在让图像我的导航中有另一个链接，并且想对 ID 为 content1 的另一个 html 容器执行相同的过程，这次插入 data-two.html .

我必须在此文件或另一个 ajax 文件中创建 httprequest 吗？变量会有所不同吗？

我已经在同一个文件和其他文件中尝试使用相同的变量，但收到一条错误消息，指出我无法将innerHTML 设置为Null。我不知道为什么。请帮忙。

Answer 1

此代码只是为了帮助您入门。它非常冗长，可以改进以重用。为了清楚起见，我决定保持简单。

function reqListener1 () {      
  console.log("listener1 -- html echo", this.responseText);
}

function reqListener2 () {
  console.log("listener2 -- json echo", this.responseText);
}

document.addEventListener("DOMContentLoaded", function () {
    var url1 = "/echo/html/";
    var url2 = "/echo/json/";

    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", reqListener1);
    oReq.open("GET", url1);
    oReq.send();

    // you could use the same variable. but you'll need to instantiate a different object
    var oReq2 = new XMLHttpRequest();
    oReq2.addEventListener("load", reqListener2);
    oReq2.open("GET", url2);
    oReq2.send();        
});

演示:http://jsfiddle.net/pottersky/7dz8r19d/1/