Як працює AJAX?

У чому суть AJAX? Наприклад, я хочу мати посилання на моїй сторінці, щоб, коли користувач натискає це посилання, деяка інформація надсилалася на мій сервер без перезавантаження поточної сторінки. Це AJAX?

Я зміг отримати таку поведінку, використовуючи ізофрейми. Більш докладно я розміщу посилання (скажімо, невелике зображення) у невеликій ізофреймі. Коли користувач натискає це посилання, браузер перезавантажує лише сторінку в ізофреймі.

Однак я думаю, що це не елегантний спосіб досягти мети. Я думаю, що мені доведеться використовувати AJAX. Як це працює? Чи може використання XHTML елегантно вирішити розглянуту проблему? Або мені потрібно використовувати JavaScripts?

Мені багато не потрібно. Я просто хочу мати невелике посилання, яке (після натискання) надсилало деяку інформацію на сервер. Скажімо, у мене біля повідомлення є "зірковий образ". Якщо користувач клацне зірочкою (йому подобається повідомлення), зірка змінює колір, а база даних мого сервера оновлюється (пам’ятаю, що повідомлення сподобалось користувачеві).

Якщо ви абсолютно не знайомі з AJAX (що розшифровується як асинхронний Javascript та XML), запис AJAX у вікіпедії є гарною відправною точкою:

Як і DHTML та LAMP, AJAX - це не технологія сама по собі, а група технологій. AJAX використовує комбінацію:

• HTML і CSS для розмітки та стилізації інформації.
• DOM, доступний за допомогою JavaScript, для динамічного відображення та взаємодії з представленою інформацією.
• Метод асинхронного обміну даними між браузером та сервером, що дозволяє уникнути перезавантаження сторінки. Зазвичай використовується об'єкт XMLHttpRequest (XHR), але іноді замість цього використовується об'єкт IFrame або динамічно доданий тег.
• Формат даних, що надсилаються у браузер. Поширені формати включають XML, попередньо відформатований HTML, звичайний текст та позначення об’єктів JavaScript (JSON). Ці дані можуть створюватися динамічно за допомогою будь-якої форми сценаріїв на стороні сервера.

Як бачите, з чисто технологічної точки зору тут немає нічого справді нового. Більшість деталей AJAX вже були там у 1994 році (1999 для XMLHttpRequestоб’єкта). Справжньою новинкою було спільне використання цих частин, як це зробив Google із GMail (2004) та Google Maps (2005). Насправді обидва сайти внесли великий внесок у просування AJAX.

Зображення вартістю в тисячу слів, під діаграмою, яка ілюструє зв'язок між клієнтом та віддаленим сервером, а також відмінності між класичними та AJAX-програмами:

Що стосується помаранчевої частини, ви можете зробити все вручну (разом із XMLHttpRequestоб’єктом) або скористатися відомими бібліотеками JavaScript, такими як jQuery , Prototype , YUI тощо, щоб "AJAXify" на стороні клієнта вашої програми. Такі бібліотеки мають на меті приховати складність розробки JavaScript (наприклад, сумісність між браузерами), але для простої функції це може бути надмірним.

На стороні сервера також можуть допомогти деякі фреймворки (наприклад, DWR або RAJAX, якщо ви використовуєте Java), але все, що вам потрібно зробити, - це в основному виставити службу, яка повертає лише необхідну інформацію для часткового оновлення сторінки (спочатку як XML / XHTML - X в AJAX - але сьогодні сьогодні надають перевагу формату JSON ).

Суть AJAX полягає в наступному:

Ваші сторінки можуть переглядати веб-сторінки та оновлювати власний вміст, поки користувач робить інші справи .

Тобто, ваш javascript може надсилати асинхронні запити GET та POST (зазвичай через XMLHttpRequestоб’єкт), а потім використовувати результати цих запитів для модифікації своєї сторінки (за допомогою маніпулювання об’єктною моделлю документа ).

AJAX, як правило, передбачає надсилання HTTP-запитів від клієнта на сервер та обробку відповіді сервера без перезавантаження всієї сторінки. (Асинхронно).

Javascript зазвичай робить подання та отримує відповідь даних від сервера (традиційно XML, часто інші менш детальні формати, такі як JSON)

Тоді Javascript може динамічно оновлювати сторінку DOM, щоб оновити перегляд користувача.

Таким чином, "асинхронний Javascript та XML".

Є й інші варіанти оновлення подання користувача без перезавантаження сторінки, такі як Flash та аплети, але це не схоже на хороші рішення для вашого випадку. Здається, Javascript - це шлях. Навколо є багато хорошої бібліотечної підтримки, як jQuery, як використовується на цьому сайті, тому вам не потрібно писати багато Javascript самостійно.

Ajax - це більше, ніж перезавантаження лише частини сторінки. Ajax розшифровується як асинхронний Javascript та Xml.

Єдиною частиною Ajax, яка вам потрібна, є об’єкт XMLHttpRequest з javascript. Ви повинні використовувати його для завантаження та перезавантаження невеликої частини вашого html як div або будь-яких інших тегів.

Прочитайте цей приклад, і ви станете професіоналом швидше, як ви думаєте!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX розшифровується як асинхронний Javascript та XML. AJAX підтримує часткове оновлення сторінок без необхідності розміщувати всю сторінку назад на сервері.

Існує безліч варіантів AJAX. Два найбільш помітні (можливо) - це ASP.NET AJAX від Microsoft (раніше Atlas) та jQuery.

ASP.NET AJAX відносно просто налаштувати, якщо ви вже знайомі з ASP.NET. jQuery добре, якщо ви вже знаєте javascript, і дозволяє дуже детально контролювати запити та оновлення вашої сторінки.

HTH

Якщо ви зацікавлені, IBM має 10 (можливо, більше) серій частин на Ajax: Освоєння Ajax, частина 1

Хоча зараз кілька років, це гарне вступне слово (навіть якщо ви просто прочитали першу частину!)

Я думаю , що вся серія повинна бути перерахована тут , хоча сайт буття трохи повільно для мене на даний момент ...

Короткий зміст:

Ajax, який складається з HTML, JavaScript ™, DHTML та DOM, - це видатний підхід, який допомагає вам перетворити незграбні веб-інтерфейси в інтерактивні програми Ajax. Автор, експерт Ajax, демонструє, як ці технології працюють разом - від огляду до детального вигляду, щоб зробити надзвичайно ефективну веб-розробку легкою реальністю. Він також розкриває центральні концепції Ajax, включаючи об'єкт XMLHttpRequest.

тобто ajax. ви не можете використовувати ajax без javascript. Вам слід переглянути приклади jquery та прототипів, щоб отримати уявлення про використання.

Те, що ви намагаєтеся зробити, це технічно ajax. Ajax створює транзакції фрагментів xhtml для оновлення розділів сторінки. Javascript робить ці запити отримання приємними та акуратними.