将变量附加到XMLHttpRequest的最佳实践?

时间:2013-04-01 11:39:41

标签: javascript ajax

var xhr=new XMLHttpRequest();
xhr.open('GET','example.php');
xhr.myVar=0;
xhr.onreadystatechange=function(){
  this.myVar=this.responseText.length;
  var s=this.readyState+":"+this.myVar+":"+this.responseText;
  document.getElementById('x').innerHTML=s;
  };

我在网页上有这个脚本(和<p id="x"></p>)。我想附加一个变量用于onreadystatechange函数(很明显,在实际代码中,我做的事情比我在这里做的更有趣。)

这在我尝试过的浏览器中运行良好,但它让我很紧张。我应该遵循一个约定吗?例如。用下划线或类似的东西为自定义变量添加前缀?

BTW,附加一个成员变量,否则感觉完全正确:主要的选择是使用一个全局变量,我根本不喜欢它(我可能在页面上有两个XMLHttpRequest对象)。

2 个答案:

答案 0 :(得分:2)

您可以使用closures

假设这个ajax请求在函数体内部,那么你可以使用myVar关键字声明var并在onreadystatechange函数中使用它,就像它是一个局部变量一样。

function x() {

    ....
    ....

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'example.php');
    var myVar = 0;
    xhr.onreadystatechange = function() {
        this.myVar = this.responseText.length;
        var s = this.readyState + ":" + myVar + ":" + this.responseText;
        document.getElementById('x').innerHTML = s;
    };

    ....
    ....

}

答案 1 :(得分:1)

你在做什么已经很好了。你没有污染全局范围,附加到你知道你已经在函数中已有的东西(因为函数onreadystatechange被调用,this设置为XHR对象)。但是,您可能希望改进一些事项:

  • 您的变量名称现在很好。如果您需要/需要调用其中一个变量responseText
  • ,该怎么办?
  • 确定范围可能会派上用场。
  • 您真的可能想要了解XHR以及如何做到这一点。现在,您的代码不能在IE7 / 8上运行。

很多问题都不适用于此,因为XHR只回调一次,但想象一下这种情况:你有一个神秘的类C,它有一个叫feedback的回调,接受闭包。此回调触发四次,您需要将相同的变量传递给四个回调,而回调不可能更改此变量。你的代码在这个问题上有所破坏。 我知道,这是微不足道的,但是在第一枪中它是值得的。您也正在遵循DRY方法。

我将如何做到这一点:

function callCObject(_c_init_vars, callback) {
  var tempObject = new C(); // Instantiating my "C" object, whatever it may be
  var tCallback = function() {
     callback.apply(this,_c_init_vars);
  }
  tempObject.callback = tCallback;
  tempObject.run();
}

不是手动实例化C,而是按如下方式进行:

var myCallback = function(a,b,c) { console.log(a); console.log(b); };
callCObject([1,6], myCallback);

只是为了证明实施:http://jsfiddle.net/d3yAg/