Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object. When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions.
Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.
AJAX is not a programming language. Neither is it a software. AJAX is a programming paradigm – a technique.
Modern browsers have an inbuilt object called the XMLHttpRequest object. This object makes it quite easy for a JavaScript to communicate with the server.
To create an instance of XHR, you simply need to assign to a variable the XMLHttpRequest () method with the operator new to create the instance. So, we'll create an instance as follows:
var xhr = new XMLHttpRequest();The method open() is used to specify the kind of data an object wants from the server. It takes three arguments the type of request, the location of the file on the server, and a synchronous indicator.
- request ‐ This is the type of request you are sending to the server. It takes the value
GETorPOST. In simple terms,GETis for retrieving something from the server.POSTis for sending something to the server. - url ‐ This is the URL of the file on the server. It is can be static or relative URL or simply the path from the folder which contains the web page.
- async ‐ This is used to determine whether or not the request should be executed asynchronously. It takes the value "true" or "false". True is for asynchronous execution. False is for synchronous execution.
// open(request, url, async);
xhr.open('GET', 'source/test.txt', true); An XHR object has many inbuilt variables in which it stores data retrieved from the server. One of these variables is called responseText. Usually contains any text information retrieved from the server.
When we call xhr.open(), it will fetch the text information stored test.txt and store it in its responseText variable. So, to access the data, we simply have to call xhr.responseText.
Our goal is to populate <div id="container"> with the new text read from the server, we use the document.getElementById(). So, we shall create an anonymous function as follows:
function() {
document.getElementById("container").innerHTML = xhr.responseText;
}This function basically replaces the HTML found in the <div> container with the text fetched from the server.
The send() method is used to send the request to the server. It doesn’t take any parameters, so you simply call it as follows:
xhr.send(null);The XHR has two properties are used to indicate a response from the server. The first is readyState, and the second is status.
The readyState property records how the request is progressing. It returns a numerical value, numbered 0 to 4 which indicate different states of progress.
- 0 ‐ request not initialized
- 1 ‐ connection to server established
- 2 ‐ request received by server
- 3 ‐ server is processing the request
- 4 ‐ the request has been processed, and the response is ready
The status property indicates whether or not the request was successfully executed.
- 200 ‐ request successfully executed and response delivered
- 404 ‐ page not found
You can access these properties by referencing them from the XHR variable as follows: xhr.readyState or xhr.status.
Before retrieving any of the XHR's other variables how responseText, we have to ensure that the readyState is 4 and status is 200.
In the example the `initXhr() ', serve only to demonstrate what needed to be done to support for IE prior to 7. This function can be disregarded and use only:
var xhr = new XMLHttpRequest();Check script.js
The difference for the type POST is just the setRequestHeader()(Define the header for an HTTP request) and use parameters in the send().
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// <input id="example" name="name" type="text">
xhr..send(document.getElementById("example").value);
// or
// var file = 'hemersonvianna.io';
// var name = 'Hemerson Vianna';
// var data = "file=" + url + "&name=" + name;
xhr..send(data); We have to talk some more variables:
responseXml - holds an XML loaded file, DOM's method allows to extract data.
onreadystatechange - property that takes a function as value that is invoked when the readystatechange event is dispatched.
There are many variables and methods available in the XMLHttpRequest object, but most do not support all browsers (IE :/). basic were presented for a good run in all browsers.
Requires Node.js installed on the machine
npm install
Routes:
- text - http://localhost:9000/
- json - http://localhost:9000/json
- xml - http://localhost:9000/xml
- jquery - http://localhost:9000/jquery
- SuperAgent
- Razaxjs
- Aja.js
- Wjs
- Marmottajax
- Nanoajax
- psQuery
- ajax
- Reqwest
- majaX.js
- qwest
- http.js
- intercooler.js
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
Check Releases for detailed changelog.
MIT license © Hemerson Vianna