Давайте создадим небольшое приложение, в котором будем извлекать информацию из текстового файла на сервере, применяя для этого метод GET. Нам понадобится HTML-документ с кнопкой, которая будет инициировать запрос.
Листинг 13.1. Шаблон для Ajax-запросов
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Ajax Level 2</title>
<link rel="stylesheet" href="ajax. css">
<script src="ajax. js"></script>
</head>
<body>
<section id="formbox">
<form name="form">
<p><input type="button" name="button" id="button" value="Выполнить"></p>
</form>
</section>
<section id="databox"></section>
</body>
</html>
Для того чтобы максимально упростить код, сохраняем уже знакомую вам структуру HTML-документа и применяем только базовые стили.
Листинг 13.2. Стили для оформления полей на экране
#formbox{ float: left; padding: 20px; border: 1px solid #999999;
}
#databox{ float: left; width: 500px; margin-left: 20px; padding: 20px; border: 1px solid #999999;
}
Создайте HTML-файл с шаблоном из листинга 13.1 и CSS-файл с именем ajax. css, в который нужно поместить правила из листинга 13.2. Для того чтобы тестировать следующие примеры в браузере, вам понадобится загрузить все файлы, включая файл с JavaScript-кодом и файл, к которому вы будете обращаться, на сервер. В последующих примерах вы найдете дополнительные инструкции по тестированию.
Код в этом примере будет считывать содержимое из файла на сервере и выводить его на экран. Никакие данные на сервер не отправляются — мы всего лишь выполняем запрос GET и показываем полученную информацию.
Function initiate(){
Databox=document. getElementById(‘databox’);
Var button=document. getElementById(‘button’); button. addEventListener(‘click’, read, false);
}
Function read(){
Var url="textfile. txt";
Var request=new XMLhttpRequest();
Request. addEventListener(‘load’,show, false);
Request. open("GET", url, true);
Request. send(null);
}
Function show(e){
Databox. innerHTML=e. target. responseText;
}
Window. addEventListener(‘load’, initiate, false);
В коде из листинга 13.3 представлена типичная функция initiate(). Она вызывается после полной загрузки документа. Функция создает ссылку на databox и добавляет прослушиватель события click к кнопке. Когда пользователь нажимает кнопку Выполнить, происходит вызов функции read(). Здесь мы можем наблюдать все изученные ранее методы в действии. В первую очередь объявляется URL-адрес файла, который мы собираемся прочитать. Мы пока что не рассматривали запросы между разными источниками, поэтому файл должен находиться в том же домене (а в нашем примере и в том же каталоге), что и файл с кодом JavaScript. На следующем шаге с помощью конструктора XMLhttpRequest() создается объект, который сразу же присваивается переменной request. С использованием этой переменной мы затем создаем прослушиватель события load и запускаем процесс, вызывая методы open() и send(). Поскольку в этом запросе никакие данные не отправляются, метод send() пуст (передается значение null), однако методу open() требуются все атрибуты, иначе он не сможет настроить запрос. Используя этот метод, мы объявляем запрос типа GET, указывая URL-адрес файла для считывания и тип операции (true, так как нам требуется асинхронная операция). Асинхронный тип операции подразумевает, что браузер продолжает обрабатывать код, пока происходит считывание файла. О завершении операции нас информирует событие load. После того как файл будет загружен, сработает это событие и произойдет вызов функции show(). Она
Заменяет содержимое поля databox значением свойства responseText, и на этом процесс завершается.
Для тестирования этого примера создайте текстовый файл с именем textfile. txt и добавьте в него какое-нибудь содержимое. Загрузите этот файл и остальные файлы, содержащие коды из листингов 13.1-13.3, на свой сервер и откройте HTML-документ в браузере. После того как вы щелкнете на кнопке Выполнить, на экране будет показано содержимое текстового файла.
Когда ответ обрабатывается с использованием innerHTML, интерпретируются коды HTML и JavaScript. По соображениям безопасности рекомендуется вместо этого использовать innerText. Выберите тот или иной вариант в зависимости от требований вашего приложения.
Добавить комментарий