Input Text :

Server Resp. :

Steps AJAX in JS

  1. Create interface - client loads web page - client.html (=index.html) - this script without fn updateText()
    In fn updateText() are steps 2,3,4 :
  2. Making a request to Server v_req_obj.send() ;
  3. Receiving response from server var response = v_req_obj.responseText ;
  4. Updating Web Page document.getElementById('server_response').value = response ;

Differences POST method vs GET method

  1. In client.html (=index.html) URL QRY params are send parameters : v_req_obj.send(user_text="+current_text)
  2. v_req_obj.open GET -> POST and no URL_QRY_PARAMS "?...&..."
  3. New line v_req_obj.setRequestHeader before line v_req_obj.send
  4. In server.php $_REQUEST ($_POST) instead $_GET
  5. F12 -> Network shows no more URL_QRY_PARAMS

UML diagram of XMLHttpRequest (properties and methods)

We use object XMLHttpRequest to interact with server.
REQUEST PROPERTIES :
  1. readyState : it is used to determine the current status of the request
    0: request not initialized by client yet
    1: connection is established with the server
    2: request is received by the server
    3: server is processing request
    4: response is ready and received at client end
  2. status : it specifies if request was successful or not
    200: OK i.e. request was successful
    404: page was not found
  3. Onreadystatechange : it holds a function which runs (triggers) when (on event) value of readyState changes
RESPONSE PROPERTIES :
  1. v_req_obj.responseText
  2. v_req_obj.responseXML
REQUEST METHODS :
  1. open( method , server url , asynchronous )
  2. send() for GET Method or send(data) for POST method