Как работает AJAX?

В чем суть AJAX? Например, я хочу иметь ссылку на моей странице, так что, когда пользователь нажимает на эту ссылку, некоторая информация отправляется на мой сервер без перезагрузки текущей страницы. Это AJAX?

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

Однако, я думаю, что это не изящный способ достичь цели. Я думаю, мне нужно использовать AJAX. Как это работает? Может ли использование XHTML решить эту проблему элегантным способом? Или мне нужно использовать JavaScripts?

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

ОТВЕТЫ

Ответ 1

Если вы совершенно не знакомы с 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:

alt text

Для оранжевой части вы можете делать все вручную (с помощью объекта XMLHttpRequest), или вы можете использовать известные библиотеки JavaScript, такие как jQuery, Prototype, YUI и т.д. на "AJAXify" клиентскую сторону вашего приложения. Такие библиотеки стремятся скрыть сложность разработки JavaScript (например, кросс-браузерную совместимость), но могут быть излишними для простой функции.

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

Ответ 2

AJAX обычно включает отправку HTTP-запросов от клиента на сервер и обработку ответа сервера без перезагрузки всей страницы. (Асинхронно).

Javascript обычно передает и получает ответ от сервера (традиционно XML, часто другие менее подробные форматы, такие как JSON)

Затем Javascript может динамически обновлять страницу DOM, чтобы обновить представление пользователя.

Таким образом, "Асинхронный Javascript и XML".

Существуют и другие варианты обновления пользовательского вида без перезагрузки страницы, таких как Flash и Applets, но это не похоже на хорошие решения для вашего дела. Похоже, Javascript - это путь. Там много хорошей поддержки библиотеки, например jQuery, как это используется на этом сайте, поэтому вам не нужно писать много Javascript самостоятельно.

Ответ 3

Суть AJAX заключается в следующем:

Ваши страницы могут просматривать веб-страницы и обновлять собственный контент, пока пользователь делает другие вещи.

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

Ответ 4

Ajax - это больше, чем перезагрузка только части страницы. Ajax означает Asynchronous Javascript и Xml.

Единственная часть Ajax, которая вам нужна, это объект XMLHttpRequest из javascript. Вы должны использовать его для загрузки и перезагрузки небольшой части вашего html в виде div или любых других тегов.

Прочитайте, что example, и вы будете скорее раньше, чем считаете!

<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>

Ответ 5

AJAX обозначает асинхронный Javascript и XML. AJAX поддерживает частичное обновление страниц без необходимости отправлять всю страницу обратно на сервер.

Существует множество опций для AJAX. Двумя наиболее заметными (возможно) являются Microsoft ASP.NET AJAX (ранее Atlas) и jQuery.

ASP.NET AJAX относительно прост в настройке, если вы уже знакомы с ASP.NET. jQuery хорош, если вы уже знаете javascript и очень тщательно контролируете запрос и обновление своей страницы.

НТН

Ответ 6

Если вам интересно, у IBM есть 10 (возможно, больше) сериалов на Ajax: Освоение Ajax part 1

Хотя несколько лет назад это хорошее введение, (даже если вы просто прочитали первую часть!)

Я думаю, что вся серия должна быть указана Здесь, хотя сайт немного медленный для меня на данный момент...

Резюме:

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

Ответ 7

это ajax. вы не можете использовать ajax без javascript. вы должны посмотреть примеры jquery и прототипов, чтобы получить представление об использовании.

Ответ 8

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