Как работает 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 году (для XMLHttpRequestобъекта 1999 год ). Настоящей новинкой было использование этих частей вместе, как это сделал 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 существует множество вариантов. Двумя наиболее заметными (возможно) являются Microsoft ASP.NET AJAX (ранее 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 делает эти запросы на получение красивыми и аккуратными.