Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
- Подбор IT специалистов в Москве
Создание Ajax-приложения
Первым шагом надо создать XML-файл с данными. Назовем этот файл data.xml.
data.xml
<?xml version="1.0" encoding="utf-8" ?> <root> <data> Это некоторые данные, которые хранятся в XML-файле и были получены JavaScript-ом. </data> </root>
Теперь создадим простенькую Web-страничку, содержащую данные для примера. Это страница с JavaScript-ом, и пользователи будут запрашивать ее для того, чтобы увидеть технологию Ajax в действии. Назовем этот файл ajax.html.
ajax.html
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"?> </head> <body> <h1>Разработка Web-приложений с помощью технологии Ajax</h1> <p>Эта страница демонстрирует использование Ajax-технологии (Асинхронных Javascript и XML) для обновления содержания страницы посредством чтения удаленного файла динамически - без перезагрузки страницы. Обратите внимание эта операция невозможна при отключенном JavaScript-е. </p> <p id="xmlData">Это данные по умолчанию. <a href="data.xml" title="Обзор данных XML файла." onclick="ajaxRead('data.xml');return false"> Обзор XML данных</a> </body> </html>
Обратите внимание: для пользователей с отключенным JavaScript вставлена ссылка к файлу data.xml. Для пользователей с включенным JavaScript-ом будет вызвана функция ajaxRead.
Теперь напишем скрипт, который и будет получать данные из файла XML. Его надо будет вставить в нашу Web-страницу в области head.
<script type="text/javascript"> <!-- function ajaxRead(file){ var xmlObj = null;
Далее идет обязательная часть скрипта - проверка доступности методов. Все браузеры описывают объект по-своему. При наличии window.XMLHttpRequest (для Mozilla, Netscape 7 и Safari 1.2) создаем экземпляр объекта XMLHttpRequest. Если этот метод недоступен, проверяем наличие window.ActiveXObject (для Internet Explorer 5+) и создаем экземпляр объекта ActiveXObject. Если браузер не предоставляет ни одну из проверяемых возможностей, то заканчиваем функцию и возвращаемся.
if(window.XMLHttpRequest){ xmlObj = new XMLHttpRequest(); } else if(window.ActiveXObject){ xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); } else { return; }
При каждом изменении состояния объекта XMLHttpRequest происходит событие onreadystatechange. Если состояние изменяется мы используем конструкцию
xmlObj.onreadystatechange = function(){ : }.
С помощью if убеждаемся, что данные доступны, затем запускаем функцию обновления. Она имеет два параметра: ID элемента в Web-странице (обновляемый элемент в текущей Web-странице) и данные для заполнения этого элемента. Обновляться будет тег p, имеющий атрибут id="xmlData". С помощью свойства responseXML объявляем, что это XML-файл. xmlObj.responseXML является объектом DOM. Этот объект можно интерпретировать как объект document удаленного XML-файла. Другими словами, xmlObj.responseXML - это объект document, если бы запускали скрипт в самом файле data.xml. Через метод getElementsByTagName ищем данные по имени тега. В данном случае это первый тег с именем data. Конструкция
xmlObj.responseXML.getElementsByTagName('data')[0]выделяет только узел. Чтобы выделить содержимое узла используется свойство firstChild.data.
xmlObj.onreadystatechange = function(){ if(xmlObj.readyState == 4){ updateObj('xmlData', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data); // updateObj('xmlData', xmlObj.responseText ); // если не XML документ } }
Методом open открываем соединение с сервером с указанием типа передачи данных GET, URL файла данных (в нашем случае переменная file, которая была отослана как параметр функции ajaxRead - data.xml) и асинхронности (по умолчанию).
xmlObj.open ('GET', file);
В последней строке просто отсылаем пустую строку на сервер. Иначе состояние объекта XMLHttpRequest никогда не станет равным 4, то есть не будет "завершено", и страничку нельзя будет обновить. Для POST-запроса отправили бы данные.
xmlObj.send (''); }
Функция обновления updateObj с помощью getElementById ищет узел по указанному ID и заменяет его содержимое. Ее первый параметр obj - ID обновляемого объекта; второй параметр data - новые данные, которые должны быть помещены в обновляемый объект obj.
function updateObj(obj, data){ document.getElementById(obj). innerHTML = "<b>"+data+"</b>"; } //-></script>
ПОСМОТРИ РЕЗУЛЬТАТ ПРИМЕРА
Пример использования для разных браузеров:
function loadHTML(sURL) { var request=null; // пытаемся создать объект для MSXML 2 и старше if(!request) try { request=new ActiveXObject('Msxml2.XMLHTTP'); } catch (e){} // не вышло... попробуем для MSXML 1 if(!request) try { request=new ActiveXObject('Microsoft.XMLHTTP'); } catch (e){} // не вышло... попробуем для Mozilla if(!request) try { request=new XMLHttpRequest(); } catch (e){} if(!request) // ничего не получилось... return ""; // делаем запрос request.open('GET', sURL, false); request.send(null); // возвращаем текст return request.responseText; }Получение части данных
У объекта XMLHTTPRequest есть состояние readyState=3, при котором ответ находится в процессе загрузки, и уже полученная часть может быть прочитана в responseText. У большинства браузеров(кроме IE, который изобрел свой объект XDomainRequest) состояние interactive можно использовать для передачи сообщений с сервера не закрывая соединение.
Для IE от версии 8 испольуйте XDomainRequest вместо new ActiveXObject('MSXML2.XMLHTTP'), но этот класс работает несколько иначе, чем XmlHTTPRequest.
Документация:
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости