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

@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 работает, а у него ой как много недоброжелаетей, но всё же работает и не парится, думаю это о чём то да говорит.

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

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@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