To explain AJAX, you need to understand the non-AJAX method and see the difference, so I will give the same example in a regular mail method and AJAX path.
In the script there is a list of phone numbers into which you want to add any number of phone numbers for the client, each entry has two fields, type and number. Type is a description, for example. Mobile homework.
Traditional
The user sees a list of phone numbers, the last of which is empty and editable. They want to add another phone number to fill in the empty fields and click the "Add" button. The form is submitted, so the data is transferred to the http message and sent to the server, the server code adds the phone record to the database and starts constructing html for the new page, so it starts with htm, head, includes the whole script, and then the data table, including a new line with a new phone number and another empty field.
Inquiry
POST /addPhoneNumberForm Http 1.1 HOST:www.host.com USER-AGENT:... ... newPhoneType=Home&newPhoneNumber=00649123456
answer
<DOCTYPE ....> <html> <head> <title="..."> <link type="text/css" href="standard.css" /> <script type="text/javascript" src="jQuery1.4.js"></script> ... </head> <body> <div id="headerAndNav"> .... </div> <div id="content"> .... <table id="addPhoneRecords" class="dataentry"> <tr><th>Description</th><th>Number</th></tr> <tr><td>Mobile</td><td>0044987654331</td></tr> <tr><td>Work</td><td>0044987654332</td></tr> <tr><td>Holiday</td><td>0044987654333</td></tr> <tr><td>Home</td><td>00649123456</td></tr> <tr><td><input type=text .../></td><td><input type=text .../></td></tr> </table> .... </div> <div id="footer"> ... </div> </body> </html>
As soon as the user’s browser receives this answer, it discards everything that the user sees, replaces it with a white, blank screen. And start the html parsing obtained as a brand new page. Any image files / Css / Javascript should be re-rendered (or at least check if the cache is valid). Any javascript files should be fired, and all accompanying DOM events should be recorded (document.onLoad, etc.).
So what happened, the user sent the data, and the server responded with a completely new page. So much time was spent on network activity, time and processor cycles both on the server and on the client, since they had to generate and analyze a full html page.
AJAX Way
The user sees a list of phone numbers, the last of which is empty and editable. They want to add another phone number to fill in the empty fields and click the "Add" button. This beat was the same as the traditional one, now it becomes different. When the user clicks the button instead of the form sending the javascript piece, collects the information received from the form, and makes an AJAX request to the server using XMLHttpRequest, it sends a request that looks like a form message, but the result will be returned as a javascript string not like a web page.
Inquiry
POST /addPhoneNumberAJAX Http 1.1 HOST:www.host.com USER-AGENT:... ... newPhoneType=Home&newPhoneNumber=00649123456&ajax=true&type=json
There are a large number of options that the server can return, I chose one example answer
{phoneType:"home",phoneNumber:"00649123456"};
This is in JavaScript Object Notation (JSON) and represents an object with two types phoneType and numberNumber. Once this is received, JavaScript is used to dynamically add a new row to an existing table. Javascript will look something like this.
addPhoneViaAjax(type, number, reqObj, xmlhttp){ // Construct url and declare parameters for our request xmlhttp.open("POST","addPhoneNumberAJAX?newPhoneType="+type ...,false); // Send the request and wait for the response xmlhttp.send(null); // For example assume response successful // Get the response as text var responseStr = xmlhttp.responseText; // Convert the response to object, preferably using one of the JSON parsing libaries var responseObj = eval(responseStr); // Please use one of the JSON parsing libaries look at Jquery.forms plugin // Use jquery javascript libary to update the table in place. // by finding the last row of the table and instering html before it. jQuery("table#addPhoneRecords tr:last-child").before( "<tr><td>" + responseObj.phoneType + "</td><td>" + responseObj.phoneNumber + "</td></tr>"); }
Summary Thus, using the traditional method, the browser considers the answer to the whole new page and must do everything necessary to draw a new page. Using the ajax approach, the browser stays on one page and you use javascript to change one very small fragment of the page.