Ajax
Mississippi College
Computer Science
Dr. Bennet
  1. JavaScript runs in the browser.
    1. Interacts with the user, but does not talk to the network.
    2. JavaScript cannot add anything to the page that isn't local.
    3. When data is needed from the server, a new page must be loaded by clicking a link or a page load commanded from JavaScript.
  2. Enter the XMLHttpRequest object.
    1. Originally invented by MS for Internet Explorer.
    2. It allows JavaScript to create and send an HTTP request, and collect the result.
    3. So JavaScript can retreive data from a server and add it to the current page without the overhead of a full round-trip, HTML parse and display.
    4. Allows pages to be much more interactive.
    5. XMLHttpRequest remains part of JavaScript, but its always been clunky to use.
    6. This technique goes by the name AJAX, for “Asynchronous JavaScript and XML,” even though XML is rarely used anymore.
  3. JavaScript Object Notation (JSON)
    1. AJAX using XMLHttpRequest imagines the JavaScript client exchanging data in XML format with the server. Today, more common to use JSON.
    2. A much simpler text format use to represent a structured data value. Could be a single value, but almost always something larger.
    3. Usually an array or simple object, and each value may also be an array or simple object.
    4. JSON expressions are often used to transfer information between a JavaScript client and a server.
    5. While a JSON string is legal JavaScript constant, it's usually not safe to simply let the JavaScript interpreter execute some string that came from who-knows-where.
    6. Examples:
      {"remaining":18, "first":["snail","wombat","emu"], "last":["game show host","lawyer"]}
      [5,15.4,37.11,-873.145,0.23488,10.0,"zulu",{"type":"A","domain":"www.example.com" }]
    7. Keys are limited to quoted strings, and values must be objects or arrays, or single strings, numbers, booleans or null.
  4. JavaScript has since introduced the newer fetch method to replace the XMLHttpRequest object.
    1. 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 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.
    2. The then and catch methods also return promises, so the calls may be chained.
    3. Like this: [chat pageSource]
  5. The JavaScript fetch URL reaches this PHP script
    1. The script does not generate or send HTML and is not intended to be visited in a browser.
    2. Depending on the query part of the URL, the script 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.)
  6. Interaction:
    1. The client sends requests to the server.
    2. Simple responses are plain text, more complicated ones are JSON.