var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);
That will send a request to 'example.org/some.file' and nothing else. If you would like to get a response from the PHP file and do something with it, then you need to listen for a response. AJAX stands fo Asynchronous JavaScript and XML.. The important thing to note is "asynchronous." JavaScript doesn't stop and wait for the request to send and come back- that takes a long time. So, instead, we use a "callback" function to grab the result or check for an error (for example, 404 not found error is possible).
An example of code that is not asynchronous is the "alert" function. The alert function will stall all javascript until the alert is closed by the user. Similarly to your dialog menu which pops up so the user can click "ok." Your code is inside of an "if" statement. Until the user deals with the dialog, the if statement sits and waits. This is useful when waiting for a user to respond so we can do something with the data, but not very useful when sending a request to a site- as the entire web-page is stalled and unresponsive. Again, unresponsive is fine when we require the user to click "ok", but when waiting for a web page- it can stall the site for anywhere from half a second to 30 minutes! So, AJAX doesn't stall the site by default- and I won't explain how to do so, because you don't need to.
Now then, here is how to use a callback with AJAX:
Code:
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = function () {
if (httpRequest.readystate === 4 && httpRequest.status = 200) {
alert(httpRequest.responseText); // change this to something more useful...
} else {
alert("There was a problem with the request...");
}
}
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send(null);
With the above code, readystatechange will execute everytime the "state" of the request changes. If the readyState is 4, that means the request is complete. If the status is 200, that means successful. If instead of 200 the status was 404, it would mean the page is not found. There are many other status codes, too. We're checking strictly for '200' in this example. This is a common scenario, but you can modify it to your needs if you don't expect the server to respond with '200'.
When the response is complete, then the "responseText" is alerted. The responseText is the entire response from the server. So if your PHP file echo's out "hello, world" then when you request that file your javascript will alert "hello, world" after the xmlhttprequest is complete--- but you can do whatever you want, the only reason this JS alerts is because I told it to. You can do anything to your site that your heart desires with your response. And if you don't need a response, then you don't need to use "onreadystatechange" at all, and the PHP file will simply be requested, executed, and nothing else.
Bookmarks