Ajax

The oddly-named JavaScript XMLHttpRequest object allows JavaScript to send its own HTTP request to a server, and collect the response.
The JavaScript can then update the page with the data from the server.
This technique goes by the name AJAX, for “Asynchronous JavaScript and XML,” even when no XML is involved.
1. Create an object var req = new XMLHttpRequest();
2. Set event callback functions, mainly
  req.onreadystatechange = function() { ... } req.ontimeout = function() { ... }
3. Unfortunately, the state change is called several times, usually when you don't care, and you have to check when the new stat is request completed
4. Call the the open and specify the method and URL.
5. Call send to actually perform the operation.
6. The work is done asynchronously by the callbacks. The callback codes enter the task list when the associated networking events occur.
The interface of this stuff is screwy to say the least. Third-party frameworks have usually provided some cleaner version.
JavaScript has since introduced a newer fetch method to perform a similar operation more cleanly.
Here is a simple XMLHttpRequest AJAX [chat page Source]
1. Do go ahead and try it, especially during class so you'll have someone to talk to. Enter any handle you like, a message, and send it.
2. When you send a message, the JavaScript makes an HTTP request to a PHP script on the server to deliver the message.
3. Note that the onstatechange event must check an object variable to see if the state is one it is interested in.
4. The PHP script stores it in a file.
5. The JavaScript keeps its message area up to date by polling the server twice a second to request new messages. This would not scale well.
6. Messages are numbered internally. The JavaScript remembers the number of the last message it received, and asks for all newer ones.
On the server side is this PHP [message exchange script Source].
1. It does not generate or send HTML and is not intended to be visited in a browser.
2. It generates either plain text or JSON.
3. The PHP accepts messages from the JavaScript which are sent as request data, and stores them in a file. It responds with just a plain text OK or error message.
4. It accepts polls and responds with an error or a JSON document reporting any requested messages. (This could be zero messages.)
Here is an alternate version using fetch. [chat page Source]
1. This one is definitely shorter.
2. The send method uses a newer feature called a “promise”.
  1. A promise is an improved way of managing callbacks. It essentially represents some task that is in queue (pending), competed (fulfilled) or failed (rejected). (Failure essentially means it threw an exception.)
  2. The then method runs a callback with the result if and when the task succeeds.
  3. The catch method (not statement) runs a callback if and when the task fails.
  4. This allows the chaining.