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.
eventthis 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.onloadAn EventHandler that is called whenever the readyState attribute changes.
XMLHttp.readyStateThe XMLHttpRequest.readyState property returns the state an XMLHttpRequest client is in.
XMLHttp.statusThe read-only XMLHttpRequest.status property returns the numerical HTTP status code of the XMLHttpRequest's response.
XMLHttp.statusTextThe read-only XMLHttpRequest.statusText property returns a DOMString containing the response's status message as returned by the HTTP server.
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.
|0||request not initialized|
|1||server connection established|
|4||request finished and response is ready|
Prime number: 0
Contain 0 prime numbers
Time spent: 0 sec