使用Javascript和回调函数的OOP

时间:2014-03-14 03:38:22

标签: javascript ajax oop

不知道如何制定问题,如果您愿意,可以随意更改问题。

那么我的代码有什么问题?

(function() {
//--> DOM is ready

  var _$ = {
    g: function(u,c){              // c is callback function
      x=new XMLHttpRequest();
      x.onreadystatechange = function(c){ // same c isn't it?!
        d="", e=null;
        if (x.readyState==4) {
          if (x.status==200) { d = x.responseText; }
          else { e = x.statusText; }
          c(e,d);                  // how come c is an object
                                   // and not a function here?!
        }
      }
      x.open("GET",u,true); x.send(null);
    }
  }

  //--> Call our method:
  _$.g("http://copy.com/K8UjOnVoyUCiNmPC/qcm/0/1/2.json",
    function(e,d){
      if(!e){
        window.alert(d);
      }
    }
  );

//--> .DOM
})();

有什么线索我在这里错过了什么?怎么做对了?

谢谢!

2 个答案:

答案 0 :(得分:2)

您实际上没有将c传入x.onreadstatechange函数,而是定义了onreadystatechange事件指定的参数。以下是您需要做的事情:

.
.
.
var _$ = {
    g: function(u, c) {
        x = new XMLHttpRequest();
        x.onreadystatechange = function() { // <== REMOVE: c as parameter
            d = "", e = null;
            if (x.readyState == 4) {
                if (x.status == 200) { d = x.responseText; }
                else { e = x.statusText; }
                c(e, d); // Now c is the c that you passed into g
            }
        }
        x.open("GET", u, true);
        x.send(null);
    }
}
.
.
.

答案 1 :(得分:1)

问题是onreadystatechange回调中的c是一个进度事件对象。该问题的解决方案是简单地删除该参数,并让父方法_$.g及其c参数提供一个闭包,让您可以像这样引用回调:

 (function() {
//--> DOM is ready

  var _$ = {
    g: function(u,c){              // c is callback function
      x=new XMLHttpRequest();
      x.onreadystatechange = function(){ // same c isn't it?! No, it's a progress event object
        d="", e=null;
        if (x.readyState==4) {
          if (x.status==200) { x.responseText; }
          else { e = x.statusText; }
          c(e,x.response);                  // how come c is an object
                                   // and not a function here?!
        }
      }
      x.open("GET",u,true); x.send(null);
    }
  }

  //--> Call our method:
  _$.g("http://copy.com/K8UjOnVoyUCiNmPC/qcm/0/1/2.json",
    function(e,d){
      if(!e){
        window.alert(d);
      }
    }
  );

//--> .DOM
})();

我希望这有帮助!