JS Ajax in a nutshell

The following instruction will show you how to send, receive and handler information from a server using AJAX and Javascript.

This posts is related with sandorBlog(Dynamic Table) to explain how to communicate with the server via AJAX using Javascript

With the collection of Ajax objects, we can request information to the server without refreshing the page. That allows the user to stay on the page during the loading.

.how to trigger a JS event to send a request using Ajax

Before sending a request to the server, a User has to trigger an event clicking on a button or activating one of the DOM events.

In the following, examples is shown how to trigger an event clicking on a button:

• <button type="button" id="ID-15978" onclick="ajaxFunction('DELETE-DATA', event)">DELETE</button> The function "ajaxFunction()" will receive the action 'DELETE-DATA' and the event's data.
• onclick="ajaxFunction('action', event)" Trigger an event with JS whom will be execute the function
• 'action' this variable is used to know what kind of action or command, the user wants to send. With this variable you can use the same function and handle the different behaviour at the frontend side or server side.
• event this variable is use to pass the information about the element that trigger the event, the DOM events (E.g. var id = event.target.id)

.JS AJAX structure

We can divide the structure in three sections:

.1 Initialize the request

• var XMLHttp = new XMLHttpRequest(); Use XMLHttpRequest (XHR) objects to interact with servers.
• var sendRequest = new FormData(); The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest.

.2 Finalize and send the request data

• sendRequest.append('userName', userName); The append() method of the FormData interface appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.
• XMLHttp.open('POST', 'http://www.url.com', true); The XMLHttpRequest method open() initializes a newly-created request, or re-initializes an existing one.
• XMLHttp.send(sendRequest); The XMLHttpRequest method send() sends the request to the server.

.3 Track the status and changes of the request

• XMLHttp.onreadystatechange or XMLHttp.onload An EventHandler that is called whenever the readyState attribute changes.
• XMLHttp.readyState The XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in.
• XMLHttp.status The read-only XMLHttpRequest.status property returns the numerical HTTP status code of the XMLHttpRequest's response.
• XMLHttp.statusText The read-only XMLHttpRequest.statusText property returns a DOMString containing the response's status message as returned by the HTTP server.

.ajaxFunction()

.ajaxFunction('example')

The following example showings an Ajax request to the server about searching all prime numbers that the number you choose contains. If the number is small, the server could handle and send back the result with the server response 200 OK.

If the number is big, the default timeout will be triggered and the connection will be lost with the ERROR 500 - Internal Server Error. The timeout of the browser is normally about 30 seconds.

There is also a button to simulate the ERROR 404 - Not Found.

.more Articles