0

我制作了一个 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;

它会正常工作。

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

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

4

1 回答 1

1

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

ajax.result = XMLHttpRequestObject.responseText;

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

send : function()
    {
       var self = this;

并像这样使用它：

self.result = XMLHttpRequestObject.responseText;

您的代码还有一个问题。因为 ajax 是异步的，所以当你调用alert(ajax.result);. 来自服务器的响应可能尚未到达。要解决异步问题，您可以通过将最终参数设置为来使用同步请求false（虽然不建议使用这种方法，因为它会阻塞浏览器，如果请求需要很长时间才能完成，应用程序会出现挂起）

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);
});
于 2013-06-09T10:41:50.143 回答