Взаимодействие двух скриптов

@taras atavin · Регистрация: 24.11.2009

Студворк — интернет-сервис помощи студентам

Написать

PHP
1
2
3
echo "<script>"
...
echo "</script>

не проблема. Но если страница должна обновляться без рефреша, а для этого нужны новые данные с сервера, то как не закрыть php скрипт после того, как он сформирует java скрипт и саму страницу? Как закрыть его после того, как пользователь закроет страницу в браузере? Как без сабмита реализуется обмен данными между двумя скриптами?

@xand · 04.03.2011, 08:28

ajax технология

@taras atavin · 04.03.2011, 08:55 **[ТС]**

А что это такое? где про это можно прочитать?

@xand · 04.03.2011, 09:09

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

@taras atavin · 04.03.2011, 09:25 **[ТС]**

то в Ajax-приложении между пользователем и сервером появляется еще один посредник - движок Ajax

А что то устанавливаемое?

@xand · 04.03.2011, 09:35

Нет, просто кусок кода javascript и взаимодействующий с ним кусок кода php - их взаимодействие называют технологией ajax/движок ajax

@taras atavin · 04.03.2011, 10:09 **[ТС]**

Создание Ajax-приложения

Первым шагом надо создать XML-файл с данными. Назовем этот файл data.xml.

data.xml

<?xml version="1.0" encoding="windows-1251" ?>
<root>
<data>
Это некоторые данные, которые хранятся в XML-файле
и были получены JavaScript-ом.
</data>
</root>

Теперь создадим простенькую веб-страничку, содержащую данные для примера. Это страница с JavaScript-ом, и пользователи будут запрашивать ее для того, чтобы увидеть технологию Ajax в действии. Назовем этот файл ajax.html.

ajax.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"?>
</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. Его надо будет вставить в нашу веб-страницу в области 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 элемента в веб-странице (обновляемый элемент в текущей веб-странице) и данные для заполнения этого элемента. Обновляться будет тег 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;
}

Чтение и запись файла на сервер? А безопастность? Как не дать хацкеру читать и писать чужие данные? Предположим два пользователя одновременно присутствуют на странице и один хочет прочитать, или записать данные другого.

@xand · 04.03.2011, 12:24

Брррр...забудьте что прочитали

(хотя всё равно потом придётся читать снова и переосмысливать

)
Есть 2 пути.
Первый путь, восрользоваться библиотекой jquery и использовать встроенный в него ajax запроc. Для меня это самый просто вариант. Но есть одно НО. Библиотке ваешает примерно 70 кб живого веса. И использую jquery ajax тогда, когда пользуюсь данной бибилиотекой для других нужн (не грузить же страницы на 70кб из за одногозапроса).
Второй путь здесь ни какие библиотеки не потребуются. Всё пишется на чистом js. Код получается весом намного меньше чем библиотке jquery (считанные килобайты). У меня есть готовый пример, прикрепил его к сообщению. В нём нужно разбираться...но пользоваться тоже не сложно, буквально одна строчка кода для вызова. Привер есть.

@taras atavin · 09.03.2011, 07:09 **[ТС]**

Сообщение от xand

восрользоваться библиотекой jquery

Что это такое? Установки требует? А серверной поддержки?

Добавлено через 3 минуты

Сообщение от xand

У меня есть готовый пример

пример - штука хорошая, а в данном случае необходимая. Но всё таки что происходит при его использовании? Куда передаются данные с клиента? И откуда читаются клиентом?

Добавлено через 44 секунды
И как у аджакса с безопасностью?

@xand · 09.03.2011, 08:14

Сообщение от taras atavin

Что это такое? Установки требует? А серверной поддержки?

это библиотека javascript, требует только подключения

Сообщение от taras atavin

Куда передаются данные с клиента? И откуда читаются клиентом?

в архиве 3 файла. Первый это ajax.js его мы просто подключаем, менять в нём ни чего не надо (сам движок ajax). Второй это index.html(клиенту отображается его содержимое, именно отсюда летят переменные в обрабочик) - файл который у нас в браузере отображается именно к нему мы и подключаем ajax.js таким образом

JavaScript
1
<script type="text/javascript" src="ajax.js"></script>

файл ajax_handler.php - файл обработчик, он принимает информацию (наши переменные) от клиентской части, обрабатывает и возвращает ответ
Пользоваться так:

JavaScript
1
sendRequest("куда передаём", "что передаём", функция которая вызывается по окончании);

В палне безопасности...так же как и в форму могут подсунуть что попало, так же и и тут. Нужно просто в обрабочике обрабатывать все принимаемые данные дабы обезопасить свой сайт. На сайте Вкнтакте сейчас почти всё на ajax работает, а у него ой как много недоброжелаетей, но всё же работает и не парится, думаю это о чём то да говорит.
Думаю вам стоит начать с азов.

@taras atavin · 09.03.2011, 12:06 **[ТС]**

Сообщение от xand

требует только подключения

Кто подключает? Пользователь, разработчик, или админ сервака?

Добавлено через 3 минуты

Сообщение от xand

"куда передаём"

Сюда что писать? Адрес php скрипта?

Добавлено через 4 минуты

Сообщение от xand

.так же как и в форму могут подсунуть что попало, так же и и тут

Так в формы под логином/паролем конкретного пользователя + у меня там ещё дополнительное экранирование слэшами и логина, и пароля, а кроме входной формы остальные ещё и в сессии, так что чтобы пользователь ни подсунул, на остальных это не отражается. А здесь как? Какие данные читает java-скрипт по ajaxу? Все? Или только свои? А при передаче на сервер логин/пароль можно взять с сессии?

Добавлено через 5 минут

Сообщение от xand

На сайте Вкнтакте сейчас почти всё на ajax работает, а у него ой как много недоброжелаетей, но всё же работает и не парится, думаю это о чём то да говорит.

Тоже мне пример. Этот недосайт заглохнет ровно в тот момент, когда до него какойнибудь админ доберётся и пофиксит его.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@xand 84 / 84 / 8 Регистрация: 12.04.2010 Сообщений: 324
	04.03.2011, 08:28
	ajax технология 0

@taras atavin 4226 / 1796 / 211 Регистрация: 24.11.2009 Сообщений: 27,562
	04.03.2011, 08:55 [ТС]
	А что это такое? где про это можно прочитать? 0

@xand 84 / 84 / 8 Регистрация: 12.04.2010 Сообщений: 324
	04.03.2011, 09:09
	В двух слова: javascript передаёт данные в скрипт php, последний обрабатывает данные как нужно и если требуется то возвращает ответ (данные если нужно) и с ответом тоже можно делать что душе угодно, и всё это происходит без перезагрузки страницы, т.е. в асинхронном режиме. А почитать про это можно...думаю тут 0

@xand 84 / 84 / 8 Регистрация: 12.04.2010 Сообщений: 324
	04.03.2011, 09:35
	Нет, просто кусок кода javascript и взаимодействующий с ним кусок кода php - их взаимодействие называют технологией ajax/движок ajax 1