AJAX Fallback Вариант 1 ~ Отправка Запрос Использование IFrame

Share

|

IFrames сделать подходящий транспорт для асинхронного призывы, поскольку они могут загрузить содержание, не вызывая всю страницу перезагрузить, и новые IFrame элементов можно создать с помощью JavaScript. В приятное атрибут об IFrame заключается в том, что форма может использовать в качестве своей цели, перегрузки, что IFrame, а не на всю страницу; Такой подход позволяет больших объемов данных для отправки на сервер с помощью POST.

Одна из трудностей в IFrame используя в качестве транспорта заключается в том, что мы страницы загрузки необходимо HTML, и она должна иметь событии загрузки JavaScript обработчик сказать основному документу, когда они сделали погрузки. Эта необходимость силы все запросы, сделанные с IFrames быть для страниц, предназначенных для борьбы с IFrame просьбы. (Код не может возьмите XML- файл в том XMLHttpRequest позволяет.)

Заметим, что использование IFrames имеет ряд дополнительных ограничений:

• Поддержка только асинхронных запросов
• Сервер страниц нуждающихся модификация
• Phantom записей в браузере истории
• Странное назад / вперед кнопку поведение в некоторых браузерах
• Большие различия в браузере реализации, особенно в старых браузерах

Одно из преимуществ, что IFrame имеет более чем XMLHttpRequest, что его можно использовать для закачки файла. Из-за ограничений безопасности браузера, только действия пользователя, такие как нажатие форме, могут взаимодействовать с файлами на пользовательской машине. Это ориентация на форму с IFrame единственный вариант для загрузок файлов, которые не связаны с обычной форме POST и перезагрузите страницу цикла. Однако нет никаких оснований можно не относиться к используя IFrame для загрузок файлов и XMLHttpRequest для остальной части AJAX запросов. Если вы дистанционного скриптов в стиле AJAX запросов, работающих вокруг IFrame ограничения добавит значительный объем работы любой AJAX развития проекта.

Создание скрытых IFrame

Для получения максимальной совместимости со старыми браузерами, можно только добавить IFrame Вашего HTML и его размером 0x0. (можно не только скрыть, или некоторые браузеры не будет загрузить ее.) Однако такой подход не является гибким, поэтому вам нужно будет создать кадр динамично. В следующем примере, с IFrame создается с помощью innerHTML потому что проще, чем создать его с помощью методов DOM. Заметим, однако, что это также может быть создан с document.createElement, как и div, к которому он добавлен:

1 var rDiv = document.createElement ( "div");
2 rDiv.id = 'remotingDiv';
3 var стиля = 'границы: 0; ширина: 0; высота: 0; ';
4 rDiv.innerHTML = " ";
6
7 document.body.appendChild (rDiv);

Создание бланка

Если вы хотите сделать только Получите просьбе, вы можете изменить значение этого IFrame в src собственности, но сделать POST, вам нужно использовать целенаправленный форме. Получите не является хорошим решением для AJAX запросов по двум причинам: она может отправить только ограниченный объем данных (сумму, которая меняется в зависимости от браузера) и Получите можно кэша и / или предустановленной на прокси-сервера, так что вы никогда не хотите использовать его для выполнения действий, таких как обновление вашей базы данных.

Используя форму с IFrame легко. Просто набор виде целевой атрибут, и при отправке формы, в результате нагрузок в IFrame. Следующий пример создает нашу форму и устанавливает ее задач с IFrame мы создали в начале "Создание Скрытые IFrame разделе статьи:

1 rDiv.form = document.createElement ( "форма");
2 rDiv.form.setAttribute ( "идентификатор", идентификатор + 'RemotingForm');
3 rDiv.form.setAttribute ( "действий", сайта);
4 rDiv.form.setAttribute ( "целевой", номер);
5 rDiv.form.target = идентификатором;
6 rDiv.form.setAttribute ( "метод ',' после ');
7 rDiv.form.innerHTML = ' 8 идентификатор = "" + номер + "данных"> ';

Отправить данные из Загрузить материалу, Оригинал документа

Единственный способ узнать, что содержание этого IFrame имеет загружена на содержание страницы запустить некоторые JavaScript, что известность исходную страницу, в которой IFrame встроен. Самый простой способ для этого - установить событии загрузки обработчик по документу загрузке. Это ограничение означает, что вы можете не использовать IFrame для загрузки произвольного содержания, как можно с XMLHttpRequest. Однако, это еще полезно для случаев, когда один сервер странице уже используется в качестве шлюза AJAX. Вот пример onload:

<органа onload = "parent.document.callback (результат)">

Полный IFrame например AJAX

Полный пример того, что IFrame AJAX запросов включает в себя две части. Первый фрагмент является стороне клиента код для создания IFrame и формы. Вторая часть - это серверная часть кода, который готовит некоторые данные и отправляет его обратно в родительский документ в его событии загрузки обработчик.

В первой части на примере (Листинг 1) - это JavaScript код в простой HTML файл. Эта страница используется для тестирования; Функции обратного вызова просто сигналы содержание результатов. Вторая часть примера (Листинг 2) - это простой PHP скрипт, который берет данные из POST и отправляет его обратно к основному документу. Чтобы сделать полезную системы, можно также хотите включить несколько дополнительных переменных в форме, которая будет сказать PHP код, что делать с загруженных данных, или вы могли бы логику непосредственно в сценарий и использовать различные целевые страницы каждой задачи вы желаете достичь.

Листинг 1. Создание AJAX запрос Использование IFrame

1 2 3