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/

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

1 个答案: