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

Question

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

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

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

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

Answer 1

Если вы совершенно новичок в AJAX (что означает Асинхронный Javascript и XML), запись AJAX в Википедии является хорошей отправной точкой:

Как и DHTML и LAMP, AJAX - это не технология сама по себе, а группа технологий. AJAX использует комбинацию:

• HTML и CSS для разметки и информация о моделировании
• ДОМ доступ с помощью 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 ).

Answer 2

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

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

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

Answer 3

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

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

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

Таким образом, «Асинхронный JavaScript и XML».

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

Answer 4

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>

Answer 5

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

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

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

НТН

Answer 6

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

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

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

Резюме:

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

Answer 7

это Аякс. Вы не можете использовать AJAX без JavaScript. Вы должны посмотреть на примеры jquery и прототипа, чтобы получить представление об использовании.

Answer 8

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