Question

我已经创建了一个JavaScript类来简化Ajax请求。

我的课程：

var ajax =
{
    method:"GET",
    action:"",
    data : "",
    result: "",

    setResult : function(re){this.result = re;},
    setMethod : function(method){this.method = method.toUpperCase();},
    setAction : function(page){this.action = page;},
    addData : function(name,value){data_for_setting_data = name+"="+value+"&";this.data += data_for_setting_data;},

    send : function()
    {
        var XMLHttpRequestObject = false;
        if(window.XMLHttpRequest)
            XMLHttpRequestObject = new XMLHttpRequest();
        else if(window.ActiveXObject)
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        else
        {
            try
            {
                XMLHttpRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e)
            {
                return false;
            }
        }
        if(XMLHttpRequestObject)
        {
            var resulter;
            datalength = this.data.length;
            datasender = this.data.substr(0,datalength-1);
            switch(this.method)
            {
                case "GET" :
                    XMLHttpRequestObject.open("GET",this.action+"?"+datasender,true);
                    XMLHttpRequestObject.onreadystatechange = function()
                    {
                        if(XMLHttpRequestObject.readyState == 4)
                        {
                            this.result = XMLHttpRequestObject.responseText;
                        }
                    }
                    XMLHttpRequestObject.send(null);
                ;
                break;
                case "POST" :
                    XMLHttpRequestObject.open("POST",this.action,true);
                    XMLHttpRequestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    XMLHttpRequestObject.send(datasender);
                    XMLHttpRequestObject.onreadystatechange = function()
                    {
                        if(XMLHttpRequestObject.readyState == 4)
                        {
                            this.result = XMLHttpRequestObject.responseText;
                        }
                    }                   
                ;break;
            }
        }
    }
}

当我发送这样的数据时：

ajax.setAction("a.php");
ajax.setMethod("get");
ajax.addData("myname","mohsen");
ajax.send();
alert(ajax.result);

结果将一无所获。

但是，例如，在第44行，如果我使用

alert(XMLHttpRequestObject.responseText)

而不是

this.result = XMLHttpRequestObject.responseText;

它会正常工作。

我该怎么做才能解决这个问题？

还有一个问题：它是否会降低加载速度？

Answer 1

问题是this.result，this未引用您的ajax变量。要解决此问题，请更改为：

ajax.result = XMLHttpRequestObject.responseText;

或者声明一个变量来保存当前的上下文对象：

send : function()
    {
       var self = this;

并像这样使用它：

self.result = XMLHttpRequestObject.responseText;

您的代码还有一个问题。因为ajax是asyn，所以当你致电alert(ajax.result);时。服务器的响应可能尚未到达。要修复asyn问题，您可以通过将最终参数设置为false来使用syn请求（尽管建议不要使用此方法，因为它会阻止浏览器，如果请求需要很长时间才能完成，应用程序将显示为挂起）

XMLHttpRequestObject.open("GET",this.action+"?"+datasender,false);

或传入回调函数。当ajax响应到达时，请将其命名为：

 send : function(callback){
  ....your code
      if(XMLHttpRequestObject.readyState == 4)
      {
            if (typeof callback === "function"){ 
                callback(XMLHttpRequestObject.responseText);
            }
      }
 }

像这样使用：

ajax.send(function(result){
      alert(result);
});

我的Ajax类不起作用

1 个答案: