Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> AJAX для самых маленьких.
Медведь  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2482
Пользователь №: 37963
На форуме: 3 года, 4 месяца
Карма: 27




AJAX - передача данных между клиентом и сервером без перезагрузки страницы.

 • AJAX (Asynchronous Javascript And Xml) - Асинхронный JavaScript и XML, позволяет передавать и получать данные (текстовые, JSON, XML) в браузере по HTTP-протоколу без перезагрузки страницы. В аббревиатуре AJAX присутствует XML, его допускается не использовать, запросы серверу можно передавать асинхронно и синхронно.

 АЯКС используют там, где необходимо динамически подгружать контент. Например: поисковая строка (реализовано во многих поисковых системах), информирование о новых сообщениях (реализовано в социальных сетях, почтовых системах), подгрузка новых комментариев (применяется на форумах) и т.п.

 • Отправку и приём запросов без перезагрузки страницы обеспечивает объект XMLHTTP , в современных версиях браузеров XMLHttpRequest. Этот объект является транспортом между клиентом и сервером. Изначально объект XMLHTTP был добавлен в IE и уже потом в другие браузеры, но уже как XMLHttpRequest.

 Объект XMLHttpRequest не во всех браузерах работает корректно, поэтому используется следующий подход: создаём новый объект применяя небольшой костыль (в примере используются исключения - try catch)
<head>
<title>

Обратите внимание, код находится между тегами head
</title>
<script
type="text/javascript">
var
xmlHttp = false;
var textUser;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (n) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (n2) {
xmlHttp = false;
}
}

if (!xmlHttp) {
xmlHttp = new XMLHttpRequest();
}
</script>
</head>

 • Дальнейший код мы обернём в функцию - upMedved. С помощью метода .open инициализируем запрос
xmlHttp.open('GET', 'http://test.ru/ajax/index.php', false);
 ○ Первым аргументом указываем метод передачи (например: POST, GET, HEAD)
 ○ Вторым аргументом напишите URL вашего сайта (из соображений безопасности запросы можно отправлять только на тот протокол, домен и порт, со страницы которой выполняется запрос к серверу, это ограничение можно обойти)
 ○ Третьим аргументом указывается, синхронно (false) или асинхронно (true) выполнить запрос, по умолчанию (без указания аргумента) запросы выполняются асинхронно.

 • После того как запрос собран (инициализирован), его необходимо отправить на сервер с помощью метода .send
xmlHttp.send();

 • По событию свойства onreadystatechange, которое происходит каждый раз, как изменяется readyState запускаем функцию - statusMedved
xmlHttp.onreadystatechange = statusMedved();

 • Соберём воедино функцию - upMedved, здесь достаём данные из текстового поля, кодируем данные перед передачей в URI и отправляем запрос
	function upMedved() {
textUser = document.getElementById('test').value;
xmlHttp.open('GET', 'http://test.ru/ajax/index.php?gen='+encodeURIComponent(textUser), true);
xmlHttp.send();
xmlHttp.onreadystatechange = statusMedved();
}

 • Когда данные загружены (xmlHttp.readyState == 4) и получен код от сервера - 200 , можно внести изменения на странице пользователя
	function statusMedved() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById('resTest').innerHTML = xmlHttp.responseText;
}
}


 • Остаётся добавить в тело документа блочный элемент и текстовое поле, на которое повешаем событие, которое происходит когда отпускаешь нажатую клавишу
<input type="text" id="test" size="40" onkeyup="javascript:upMedved('')">
<div
id="resTest"></div>

 • Чтобы ограничить накопившуюся очередь в асинхронных запросах вызванных ошибкой, можно использовать
xmlHttp.timeout = 10000; // После 10 секунд с момента отправки запроса, он будет прерван

 • Не забывайте, что IE кэширует всё.

Посмотреть готовый вариант:
Свернутый текст

HTML - /index.html

<html>
<head>
<script
type="text/javascript">
var
xmlHttp = false;
var textUser;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (n) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (n2) {
xmlHttp = false;
}
}

if (!xmlHttp) {
xmlHttp = new XMLHttpRequest();
}

function upMedved() {
textUser = document.getElementById('test').value;
xmlHttp.open('GET', 'http://test.ru/ajax/index.php?gen='+encodeURIComponent(textUser), true);
xmlHttp.send();
xmlHttp.onreadystatechange = statusMedved();
}
function statusMedved() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById('resTest').innerHTML = xmlHttp.responseText;
}
}

</script>
</head>
<body>
<input
type="text" id="test" size="40" onkeyup="javascript:upMedved('')">
<div
id="resTest"></div>
</body>
</html>


PHP - /ajax/index.php
<?php
header('Content-Type: text/html; charset=utf-8');
error_reporting(0);
$result = htmlspecialchars($_GET['gen']);
echo $result;
?>


--------------------

Заходил 29.09.2016
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Медведь  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2482
Пользователь №: 37963
На форуме: 3 года, 4 месяца
Карма: 27




Рассмотрим некоторые моменты более подробно, а начнём с понимания, чем отличаются синхронные и асинхронные запросы. Для работы установите браузер Mozilla firefox, официальный сайт - https://www.mozilla.org/ru/firefox/new/ (в этом браузере будем смотреть запросы к серверу)

В методе open(), указываем третьим аргументом - false. После чего сохраняем файл на сервере и запускаем страницу, в браузере Mozilla нажимаем - F12.

Свернутый текст
user posted image


В текстовое поле набираем любой текст и отключаемся от интернета, имитируя ошибку. Любые действия пользователя браузер будет игнорировать (эффект зависания страницы), пока не придёт ответ от сервера или браузер не предложит аварийно закрыть страницу. Получается, что при синхронном запросе мы не можем выполнять какие либо действия, пока не придёт ответ от сервера, в том числе не сможем отправить новый запрос на сервер.

Свернутый текст
user posted image

user posted image


Отредактируем файл, заменим аргумент false на true в методе open(), запросы будут отправляться асинхронно. Обновляем страницу, в текстовом поле набираем любой текст и отключаемся от интернета. Теперь на странице можно делать что угодно, эффекта зависания не наблюдается.

Свернутый текст
user posted image

user posted image


--------------------

Заходил 29.09.2016
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
sg.com  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Старик
***

Профиль
Группа: Пользователь
Сообщений: 121
Пользователь №: 42899
На форуме: 7 месяцев, 12 дней
Карма: 3




Цитата (Медведь @ 29.05.2016 - 10:02)
В прошлый раз мы поверхностно рассмотрели, что такое AJAX. Его применяют для обмена данными между клиентом и сервером без перезагрузки страницы используя транспорт

В народе есть такая поговорка "кто спешит тот людей смешит" biggrin.gif
В прошлый раз - этот оборот абсолютно не в тему. Куда уместнее звучало бы - "В продолжение..." или "в дополнение...", или "обсудим некоторые тонкости"
JAX. Его применяют для обмена - кто такой он? может так нужно - "Технологию применяют..."
и сервером без перезагрузки страницы используя транспорт - зачем продолжать, когда твой "транспорт" относится по смыслу к следующему предложению.
Цитата (Медведь @ 29.05.2016 - 10:02)
В дополнение темы "что такое AJAX?". Технологию применяют для обмена данными между клиентом и сервером без перезагрузки страницы (и точка).


... дальше читай сам. Сам плохо понимаю и знаю тонкости аякса, но в такой подаче не стал дальше читать, что еще за транспорты и объекты, зачем что то качать и устанавливать? ничего не понятно.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Медведь  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 2482
Пользователь №: 37963
На форуме: 3 года, 4 месяца
Карма: 27




Тем, кто меня поддерживал при написании этой статьи - большое Спасибо. rolleyes.gif


--------------------

Заходил 29.09.2016
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
arbuzmaster  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 723
Пользователь №: 37872
На форуме: 3 года, 4 месяца, 15 дней
Карма: 21




Цитата (Медведь @ 29.05.2016 - 10:02)
Из соображений безопасности запросы можно отправлять только на тот протокол, домен и порт, со страницы которой выполняется запрос к серверу, это ограничение можно обойти.

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


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
redreem  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 4259
Пользователь №: 29002
На форуме: 5 лет, 4 месяца, 10 дней
Карма: 147




Цитата (arbuzmaster @ 29.05.2016 - 15:53)
в console лезет ошибка, что доступ к серверу запрещен

у тебя по таймауту падает. а доступ в твою локальную сеть. просто серевер ничего не отвечает.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
arbuzmaster  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 723
Пользователь №: 37872
На форуме: 3 года, 4 месяца, 15 дней
Карма: 21




Цитата (redreem @ 29.05.2016 - 16:09)
Цитата (arbuzmaster @ 29.05.2016 - 15:53)
в console лезет ошибка, что доступ к серверу запрещен

у тебя по таймауту падает. а доступ в твою локальную сеть. просто серевер ничего не отвечает.

Если делать тоже самое через curl, то приходит ответ.


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
killer8080  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 8740
Пользователь №: 26630
На форуме: 5 лет, 9 месяцев, 9 дней
Карма: 591




Цитата (arbuzmaster @ 29.05.2016 - 14:53)
Я вот не знаю глюк это или нет, но у меня есть вот такой пульт, работает он через AJAX, причем запросы отправляются на совершенно другой сервер, при нажатии на нем кнопки в console лезет ошибка, что доступ к серверу запрещен, ну в общем все как положено при кроссдоменных запросах. Но факт в том, что команды доходят до сервера и он их выполняет. Вот в связи с этим я и не могу понять, глюк это или так должно быть, что запросы отправлять можно, а вот ответы на них получать нельзя!

Всё верно, так и должно быть . В XHR1 same origin policy запрещало отправлять кросс-доменные запросы. Но веб на месте не стоит, в новых условиях нужно и кросс-доменные запросы, и отправка файлов, так появился XHR2. Теперь запрсы разрешены все, а вот ответ браузер передаст скрипту, только если сервер в явном виде разрешил обращаться к нему аяксом, передав соответствующий заголовок Access-Control-Allow-Origin.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Эли4ка  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Богиня-девственница
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 3189
Пользователь №: 27007
На форуме: 5 лет, 8 месяцев, 17 дней
Карма: 32

Не пью :
23 года, 11 месяцев, 22 дня


Все передалать!Очень много воды.
Нет сравнения с реализациями в других библиотеках,в частности отличие самописной функций от библиотечной в кешировании аякс запроса
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса