AJAX 中 HTTP 对象的更简洁语法？答案

【问题标题】：Cleaner Syntax for HTTP Object in AJAX?AJAX 中 HTTP 对象的更简洁语法？
【发布时间】：2013-09-14 22:42:18
【问题描述】：

AJAX noob here...所以下面的这段代码适用于我，它在 onclick 事件期间被调用：

function updateText() {
  var http = getHTTPObject();    
  http.open("GET","ajax_info.asp",true);
  http.onreadystatechange = function() {
    if (http.readyState == 4) {
      document.getElementById("myDiv").innerHTML=http.responseText; 
    }
  }
  http.send();      
}

但是，当我尝试像下面这样清洁它时，它不再起作用。下面的代码是不是正确的回调语法？

function handleHTTPResponse() {
  if (http.readyState == 4) {
    document.getElementById("myDiv").innerHTML=http.responseText;
  }
}

function updateText() {
  var http = getHTTPObject();    
  http.open("GET","ajax_info.asp",true);           
  http.onreadystatechange = handleHTTPResponse;
  http.send();
}

【问题讨论】：

标签： javascript ajax html callback

【解决方案1】：

函数handleHTTPResponse() 不知道http 变量是什么。在其作用域中没有使用该名称声明的变量。

作为参数传入

function handleHTTPResponse(http) {
    if (http.readyState == 4) {
        document.getElementById("myDiv").innerHTML=http.responseText;
    }
}

...

http.onreadystatechange = function() { handleHTTPResponse(http) };

或者，正如@dc5 在另一个答案中所指出的，使用this

http.onreadystatechange = function() { handleHTTPResponse(this) };

或者等价且更干净

function handleHTTPResponse() {
    if (this.readyState == 4) {
        document.getElementById("myDiv").innerHTML=this.responseText;
    }
}

...

http.onreadystatechange = handleHTTPResponse;

或者，将函数放在作用域中，这样它就可以“看到”http

function updateText() {

    function handleHTTPResponse() {
        if (http.readyState == 4) {
            document.getElementById("myDiv").innerHTML=http.responseText;
        }
    }

    var http = getHTTPObject();    
    http.open("GET","ajax_info.asp",true);           
    http.onreadystatechange = handleHTTPResponse;
    http.send();
}

或者，将 http 设为全局

var http;    

function handleHTTPResponse() {
    if (http.readyState == 4) {
        document.getElementById("myDiv").innerHTML=http.responseText;
    }
}

function updateText() {
    http = getHTTPObject();    
    http.open("GET","ajax_info.asp",true);           
    http.onreadystatechange = handleHTTPResponse;
    http.send();
}

【讨论】：

感谢您提供多种解决方案。我对您的第三个解决方案很感兴趣：function handleHTTPResponse(http) { if (http.readyState == 4) { document.getElementById("myDiv").innerHTML=this.responseText; } } ... http.onreadystatechange = handleHTTPResponse; 为什么我们在调用 handleHTTPResponse 时不需要传递参数，但函数定义似乎在要求参数？谢谢！
哦，您不需要在此处将 http 作为参数传递（这很重要）- 这是一个错字！更正:)
那么，您拥有的第三个选项不起作用 - 它与我提到的问题中的语法相同，因为 onreadystate 是 http 的子项。
啊，另一个错字 - 证明你不应该复制/粘贴代码；） - 已编辑

【解决方案2】：

您的回调无权访问变量 http，但是，在调用时，其上下文是变量引用的值。

将您的回调更改为使用this：

function handleHTTPResponse() {
    if (this.readyState == 4) {
        document.getElementById("myDiv").innerHTML=this.responseText;
    }
}

【讨论】：