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

Если вы новичок в 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 сейчас часто предпочтительнее).

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

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

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

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

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

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

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

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

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

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

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

HTH

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>

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

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

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

Резюме:

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

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

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