Question

在以下代码中，我请求将两个数据文件插入两个不同的页面。

我正在使用不同的var（s）（这里是第二大代码块）执行相同的功能但我不知道为什么我得到相同的数据 - 一个。 html而不是数据 - 两个 .html。

数据-one.html

var x = document.getElementById("datahandeler"); /*save html element in var*/
x.addEventListener("click", reqListener); /*attach event listener to the element*/

/*event listener function*/
function reqListener () {
  var y = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener); /*attach event listener to the http request*/
oReq.open("GET", "data/data-one.html"); /*get data */
oReq.send(); /*send data*/

数据-two.html

var x1 = document.getElementById("datahandeler1"); /*save html element in var*/
x1.addEventListener("click", reqListener); /*attach event listener to the element*/

/*event listener function*/
function reqListener () {
  var y1 = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var oReq1 = new XMLHttpRequest();
oReq1.addEventListener("load", reqListener); /*attach event listener to the http request*/
oReq1.open("GET", "data/data-two.html"); /*get data */
oReq1.send(); /*send data*/

Answer 1

当您定义与第一个regListener同名的第二个函数时，它会覆盖第一个定义。在特定范围内只能有一个具有给定名称的函数。

因此，当您定义reqListener()的第二个副本时，它会覆盖并替换第一个定义，并且您最终只得到一个reqListener()副本，其行为与第二个类似。

将您的功能名称更改为唯一：

/*event listener function*/
function reqListener1 () {
  var y = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var x = document.getElementById("datahandeler"); /*save html element in var*/
x.addEventListener("click", reqListener1); /*attach event listener to the element*/


var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener1); /*attach event listener to the http request*/
oReq.open("GET", "data/data-one.html"); /*get data */
oReq.send(); /*send data*/



/*event listener function*/
function reqListener2 () {
  var y1 = document.getElementById("content").innerHTML = (this.responseText); 
}  /*grab the insertable content area replace response */

var x1 = document.getElementById("datahandeler1"); /*save html element in var*/
x1.addEventListener("click", reqListener2); /*attach event listener to the element*/

var oReq1 = new XMLHttpRequest();
oReq1.addEventListener("load", reqListener2); /*attach event listener to the http request*/
oReq1.open("GET", "data/data-two.html"); /*get data */
oReq1.send(); /*send data*/

仅供参考，您的代码评论风格难以阅读和遵循。我很高兴看到这些评论，但是插入评论的一些风格比其他风格更容易理解。

此外，还不清楚为什么要尝试为Ajax事件和click事件使用相同的事件处理程序。这些是不同的事件。事件处理程序将具有this的不同值，并且客户端事件上不会有this.responseText。所以，客户端事件出现了问题，但目前尚不清楚你要做什么，我不确定该建议究竟是什么。

也许，所有这些应该只是内联，匿名和单独的事件处理程序，因此没有命名冲突：

document.getElementById("datahandeler").addEventListener("click", function(e) {
    // handle the click event for datahandeler here
    // not sure what you expected to do here
});

var oReq = new XMLHttpRequest();

// attach event listener to the http request
oReq.addEventListener("load", function() {'
    // put ajax result into content area
    document.getElementById("content").innerHTML = this.responseText;
}); 
// get data
oReq.open("GET", "data/data-one.html");
// send data
oReq.send();

或者（这只是猜测），如果您在单击元素时尝试运行ajax调用，则可以这样做：

document.getElementById("datahandeler").addEventListener("click", function(e) {
    var oReq = new XMLHttpRequest();
    // attach event listener to the http request
    oReq.addEventListener("load", function() {'
        // put ajax result into content area
        document.getElementById("content").innerHTML = this.responseText;
    }); 
    // get data
    oReq.open("GET", "data/data-one.html");
    // send data
    oReq.send();
});

获取第一个data.html而不是第二个。为什么？

1 个答案: