today I come for the following problem that I'm presenting with a new approach that I want to apply with the Ajax requests.
I have to explain that I commonly work with JQuery this type of requests, but I'm doing some tests with this new approach to see if I can solve some situations that I have not been able to solve with JQuery.
I'm working with a class that I'm developing and with which I'm just starting with the most basic, which is to make a request for plain text.
This is the basic ajax class that I have developed so far.
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" );
}
This is the test 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>
And this is the test php file.
header ( 'Content-type: text/plain' );
echo "Hi. What did you expect? ;P";
The problem is that when I click on the launcher button of my ajax request, although this arrives in my test php file, the answer to that request never arrives. I know that it is strange that there is no return on this request, given that it is a very simple example, but in fact that is the case.
I have tried to make some additional gadget as it is, to make use of the callback functions, but I still do not get an answer.
Here the implementation of the callback.
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" );
}
As you can see here I show you the response from the server, but it never reaches the client
What can be happening? What can I be forgetting or forgetting?
Thanks in advance.
PD: I have reviewed many threads in this forum and many others but none can explain what is happening or at least do not explain what happens to me, I have tried any solution that they have presented but none manages to unveil the mystery that it happens to me. :s Sorry for the length but I wanted to be very explicit and place the code as is with the errors described
update: if I eliminate the parentheses in the line
this.xhr.onreadystatechange = this.readyStateChange ();
as suggested by Phil, the following error occurs
Uncaught TypeError: Cannot read property 'readyState' of undefined at XMLHttpRequest.readyStateChange (Ajax.js:84)
where the line in question is this
if ( ( this.xhr.readyState == 4 ) && ( this.xhr.status == 200 ) ) {
On the other hand I must note that this.xhr.readyState only comes to take the value 1. The values 2, 3 and 4 never get to receive
