Question

今天，我遇到了以下问题，我正在提出一种新方法，该方法要应用于Ajax请求。

我必须解释说，我通常使用JQuery来处理这种类型的请求，但是我正在使用这种新方法进行一些测试，以查看是否可以解决一些我无法使用JQuery解决的情况。

我正在使用一个正在开发的类，并且该类只是从最基础的类开始的，即请求纯文本。

这是我到目前为止开发的基本ajax类。

class Ajax {

  constructor () {

    this.xhr = null;
    if ( XMLHttpRequest ) {

      this.xhr = new XMLHttpRequest ();

    } else if ( ActiveXObject ) {

      try {

        this.xhr = new ActiveXObject ( "MSXML2.XMLHTTP" );

      } catch ( e ) {

        try {

          this.xhr = new ActiveXObject ( "Microsoft.XMLHTTP" );

        } catch ( e ) {

          // throws error log
        }
      }
    }
    if ( !this.xhr ) {

      alert ( "The browser does not have support to make this type of requests to the server." );
    }
  }

  send ( method, event, url ) {

    var textoAjax = "";
    this.xhr.open ( method, url, true );
    this.xhr.setRequestHeader ( 'X-Requested-With', 'XMLHttpRequest');
    this.xhr.setRequestHeader ( "Content-Type", "text/plain" );
    this.xhr.onreadystatechange = this.readyStateChange ();
    this.xhr.send ( event );
  }

  readyStateChange () {

    if ( ( this.xhr.readyState == 4 ) && ( this.xhr.status == "200" ) ) {

      document.getElementById ( "responsePhp" ).innerHTML = this.xhr.responseText;
    }
  }
}

function sendRequest () {

  let ajax = new Ajax ();
  ajax.send ( "POST", null, "sys/libs/common/PhpAjaxBridge.php" );
}

这是测试html。

<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Ajax Request</title>
    <script type="text/javascript" src="http://localhost/ecomod/indexes/Ajax.js"></script>
  </head>
  <body>
    <div id="responsePhp"></div>
    <button onclick="sendRequest();">Send Simple Ajax Request</button>
  </body>
</html>

这是测试php文件。

header ( 'Content-type: text/plain' );
echo "Hi. What did you expect? ;P";

问题是，当我单击我的ajax请求的启动器按钮时，尽管这已到达我的测试php文件中，但该请求的答案却从未到达。我知道奇怪的是，由于这是一个非常简单的示例，因此该请求没有返回，但是实际上是这种情况。

我尝试使用回调函数原样制作一些其他小工具，但仍然没有得到答案。

在这里执行回调。

class Ajax {

  constructor () {

    this.xhr = null;
    if ( XMLHttpRequest ) {

      this.xhr = new XMLHttpRequest ();

    } else if ( ActiveXObject ) {

      try {

        this.xhr = new ActiveXObject ( "MSXML2.XMLHTTP" );

      } catch ( e ) {

        try {

          this.xhr = new ActiveXObject ( "Microsoft.XMLHTTP" );

        } catch ( e ) {

          // throws error log
        }
      }
    }
    if ( !this.xhr ) {

      alert ( "The browser does not have support to make this type of requests to the server." );
    }
  }

  send ( method, event, url ) {

    var textoAjax = "";
    this.xhr.open ( method, url, true );
    this.xhr.setRequestHeader ( 'X-Requested-With', 'XMLHttpRequest');
    this.xhr.setRequestHeader ( "Content-Type", "text/plain" );
    this.xhr.onreadystatechange = this.readyStateChange ( this.readyStateChangeCallback );
    this.xhr.send ( event );
  }

  readyStateChange ( callback ) {

    callback ( this.xhr.readyState );
  }

  readyStateChangeCallback ( state ) {

    if ( state == 4 ) {

      if ( this.xhr.status == 200 ) {

        document.getElementById ( "responsePhp" ).innerHTML = this.xhr.responseText;
      }
    }
  }
}

function sendRequest () {

  let ajax = new Ajax ();
  ajax.send ( "POST", null, "sys/libs/common/PhpAjaxBridge.php" );
}

正如您在这里看到的那样，我向您展示了服务器的响应，但它从未到达客户端

会发生什么？我会忘记什么？

谢谢。

PD：我已经审查了该论坛中的许多主题，但没有其他主题可以解释正在发生的事情，或者至少不能解释我发生了什么，我尝试了他们提出的任何解决方案，但没有一个能够揭开谜底它发生在我身上。：s 抱歉，长度太长了，但我想非常明确，将代码按原样放置，并描述错误

更新：如果我消除了行中的括号

this.xhr.onreadystatechange = this.readyStateChange ();

如Phil所建议的，发生以下错误

未捕获的TypeError：无法读取XMLHttpRequest.readyStateChange（Ajax.js：84）上未定义的属性'readyState'

Ajax请求未收到任何响应

0 个答案: