Чтобы объяснить AJAX, вы должны понять не-AJAX-путь и увидеть разницу, поэтому я приведу тот же пример в традиционной форме и в AJAX-стиле.
В сценарии у вас есть список телефонных номеров, к которому вы хотите добавить любое количество телефонных номеров для клиента, каждая запись имеет два поля: тип и номер. Тип - это описание, например Мобильный дом Работа.
Традиционный
Пользователь видит список телефонных номеров, последний из которых пуст и доступен для редактирования. Они хотят добавить еще один номер телефона, чтобы заполнить пустые поля и нажать кнопку «Добавить». Форма отправляется, поэтому данные упаковываются в сообщение http и отправляются на сервер, серверный код добавляет запись телефонного номера в базу данных и начинает создавать html для новой страницы, поэтому он начинается с htm, head, все сценарии включают в себя, а затем таблицу с данными, включая новую строку с новым номером телефона и еще одно пустое поле.
Запрос
POST /addPhoneNumberForm Http 1.1
HOST:www.host.com
USER-AGENT:...
...
newPhoneType=Home&newPhoneNumber=00649123456
Ответ
<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>
<!-- Newly Added -->
<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>
Как только пользовательский браузер получает этот ответ, он отбрасывает все, что видит пользователь, заменяет его белым пустым экраном. И начинаем разбирать полученный html как совершенно новую страницу. Любые файлы изображений / Css / Javascript должны быть повторно извлечены (или, по крайней мере, проверить, действителен ли кэш). Любые файлы javascript должны быть запущены, а все сопутствующие события DOM - в файле (document.onLoad и т. Д.).
Итак, пользователь отправил данные, а сервер ответил совершенно новой страницей. Это потребовало больших затрат сетевой активности и времени, а также циклов ЦП на сервере и на клиенте, поскольку они должны были сгенерировать и проанализировать полную HTML-страницу.
AJAX Way
Пользователь видит список телефонных номеров, последний из которых пуст и доступен для редактирования. Они хотят добавить еще один номер телефона, чтобы заполнить пустые поля и нажать кнопку «Добавить».
Этот бит был таким же, как традиционный, теперь он становится другим. Когда пользователь нажимает кнопку вместо формы, отправляющей кусочек javascript, собирает релевантную информацию из формы и отправляет AJAX-запрос на сервер с использованием XMLHttpRequest, это отправляет запрос, похожий на сообщение формы, но результат будет возвращен в виде строки JavaScript, а не веб-страницы.
Запрос
POST /addPhoneNumberAJAX Http 1.1
HOST:www.host.com
USER-AGENT:...
...
newPhoneType=Home&newPhoneNumber=00649123456&ajax=true&type=json
Существует большое количество вариантов того, что может вернуть сервер. Я выбрал один пример.
Ответ
{phoneType:"home",phoneNumber:"00649123456"};
Это в JavaScript Object Notation (JSON) и представляет объект с двумя типами phoneType и phoneNumber. Как только это получено, JavaScript используется для динамического добавления новой строки в существующую таблицу. JavaScript будет выглядеть примерно так.
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>");
}
Краткое описание
Таким образом, с традиционным методом браузер считает ответ полностью новой страницей и должен сделать все необходимое, чтобы нарисовать новую страницу. При использовании подхода AJAX браузер остается на той же странице, и вы используете Javascript для изменения одного очень маленького фрагмента страницы.