ScriptOffset — инструмент для организации пошаговой работы скрипта

Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

$.ajax(< url: '/index.php', /* Куда пойдет запрос */ method: 'get', /* Метод передачи (post или get) */ dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */ data: , /* Параметры передаваемые в запросе. */ success: function(data) < /* функция которая будет выполнена после успешного запроса. */ alert(data); /* В переменной data содержится ответ от index.php. */ >>);

Код можно сократить используя функцию $.get

$.get('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

$.ajax(< url: '/index.php', method: 'post', dataType: 'html', data: , success: function(data) < alert(data); >>);

Или сокращенная версия – функция $.post

$.post('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

• Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
• serialize можно применить только к тегу form и полям формы, т.е. $(‘div.form_container’).serialize(); – вернет пустой результат.

Пример отправки и обработки формы:

Код файла handler.php

if (empty($_POST['login'])) < echo 'Укажите логин'; >elseif (empty($_POST['password'])) < echo 'Укажите пароль'; >else

Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

Короткая версия

$.getJSON('/json.php', function(data) < alert(data.text); alert(data.error); >);

$.getJSON передает запрос только через GET.

Код файла json.php

header('Content-Type: application/json'); $result = array( 'text' => 'Текст', 'error' => 'Ошибка' ); echo json_encode($result);

Возможные проблемы

При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:

Из-за них ответ считается не валидным и считается как ошибочный запрос. В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).

. // Очистка буфера ob_end_clean(); header('Content-Type: application/json'); echo json_encode($result, JSON_UNESCAPED_UNICODE); exit();

Выполнение JS загруженного через AJAX

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

Или

Дождаться выполнения AJAX запроса

По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно. Простой пример:

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', success: function(data)< text = data; >>); alert(text); /* Переменная будет пустая. */

Переменная text будет пустая, а не как ожидается текст который вернул index.php Чтобы включить синхронный режим нужно добавить параметр async: false .
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в страницы.

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', async: false, success: function(data)< text = data; >>); alert(text); /* В переменной будет результат из index.php. */

Отправка HTTP заголовков

$.ajax(< url: '/index.php', method: 'get', dataType: 'html', headers: , success: function(data) < console.dir(data); >>);

В PHP они будут доступны в массиве $_SERVER , ключ массива переводится в верхний регистр с приставкой HTTP_ , например:

Обработка ошибок

Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.

$.ajax(< url: '/index.php', method: 'get', dataType: 'json', success: function(data)< console.dir(data); >, error: function (jqXHR, exception) < if (jqXHR.status === 0) < alert('Not connect. Verify Network.'); >else if (jqXHR.status == 404) < alert('Requested page not found (404).'); >else if (jqXHR.status == 500) < alert('Internal Server Error (500).'); >else if (exception === 'parsererror') < alert('Requested JSON parse failed.'); >else if (exception === 'timeout') < alert('Time out error.'); >else if (exception === 'abort') < alert('Ajax request aborted.'); >else < alert('Uncaught Error. ' + jqXHR.responseText); >> >);

Комментарии 4

В примере Отправка формы через AJAX страница перезагружается. Видимо нужно добавить return false после $.ajax(<>);

$("#form").on("submit", function() $.ajax( url: '/handler.php', 
method: 'post', 
dataType: 'html', 
data: $(this).serialize(), 
success: function(data) $('#message').html(data); 
> 
>); 
return false;
>);

$("#form").on("submit", function(e). 
e.preventDefault();
>)

У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax( url: ‘/index.php’,
method: ‘post’,
dataType: ‘html’,
data: ,
success: function(data) alert(data);
>
>);
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
«method: ‘post’,» на:
«type: ‘post’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!

Источник

Реализация пошаговой работы PHP-скрипта с помощью AJAX

Искал более-менее простое и универсальное средство для организации пошаговой работы скрипта, но так ничего и не нашел. Даже вопрос в QA задал, везде только общие фразы. Поэтому решил сам сделать такой инструмент.

Для чего это вообще нужно?

Бывает необходимо обработать скриптом какой-то очень уж большой файл, например, для импорта. Естественно, время работы скрипта увеличивается пропорционально размеру файла или количеству строк в нем.

Хотелось бы разбить обработку файла на несколько частей и запускать скрипт в работу уже по частям.

Принцип реализации давно известен — обмен данными между сервером и клиентом:
Клиент запускает скрипт, тот выполняет несколько итераций и возвращает клиенту номер строки, на которой он остановился. После этого клиент делает новый запрос, в котором передает скрипту этот номер и скрипт продолжает работу дальше.

Собственно сам код

Для работы нам понадобятся:

       
  Старт Заново 
   

 // Можно передавать в скрипт разный action и в соответствии с ним выполнять разные действия. $action = $_POST['action']; if (empty($action)) $count = 50; $step = 1; // Получаем от клиента номер итерации $url = $_POST['url']; if (empty($url)) return; $offset = $_POST['offset']; // Проверяем, все ли строки обработаны $offset = $offset + $step; if ($offset >= $count) < $sucsess = 1; >else < $sucsess = round($offset / $count, 2); >// И возвращаем клиенту данные (номер итерации и сообщение об окончании работы скрипта) $output = Array('offset' => $offset, 'sucsess' => $sucsess); echo json_encode($output); 

function setCookie (url, offset) < var ws=new Date(); if (!offset && !url) < ws.setMinutes(10-ws.getMinutes()); >else < ws.setMinutes(10+ws.getMinutes()); >document.cookie="scriptOffsetUrl="+url+";expires="+ws.toGMTString(); document.cookie="scriptOffsetOffset="+offset+";expires="+ws.toGMTString(); > function getCookie(name) < var cookie = " " + document.cookie; var search = " " + name + " ;", offset) if (end == -1) < end = cookie.length; >setStr = unescape(cookie.substring(offset, end)); > > return(setStr); > function showProcess (url, sucsess, offset, action) < $('#url, #refreshScript').hide(); $('.progress').show(); $('#runScript').text('Стоп!'); $('.bar').text(url); $('.bar').css('width', sucsess * 100 + '%'); setCookie(url, offset); $('#runScript').click(function()< document.location.href=document.location.href >); scriptOffset(url, offset, action); > function scriptOffset (url, offset, action) < $.ajax(< url: "http://bfmn.ru/scriptoffset/scriptoffset.php", type: "POST", data: < "action":action , "url":url , "offset":offset >, success: function(data) < data = $.parseJSON(data); if(data.sucsess < 1) < showProcess(url, data.sucsess, data.offset, action); >else < setCookie(); $('.bar').css('width','100%'); $('.bar').text('OK'); $('#runScript').text('Еще'); >> >); > $(document).ready(function() < var url = getCookie("scriptOffsetUrl"); var offset = getCookie("scriptOffsetOffset"); if (url && url != 'undefined') < $('#refreshScript').show(); $('#runScript').text('Продолжить'); $('#url').val(url); $('#offset').val(offset); >$('#runScript').click(function() < var action = $('#runScript').data('action'); var offset = $('#offset').val(); var url = $('#url').val(); if ($('#url').val() != getCookie("scriptOffsetUrl")) < setCookie(); scriptOffset(url, 0, action); >else < scriptOffset(url, offset, action); >return false; >); $('#refreshScript').click(function() < var action = $('#runScript').data('action'); var url = $('#url').val(); setCookie(); scriptOffset(url, 0, action); return false; >); >); 

input < font-size: 13px; margin: 0; padding: 0 3px; vertical-align: middle; border: 1px solid #CCCCCC; border-radius: 3px 3px 3px 3px; color: #808080; display: inline-block; font-size: 13px; height: 26px; line-height: 18px; width: 243px; -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; >.btn < font-size: 13px; padding: 5px 8px; background-color: #0064CD; background-image: -moz-linear-gradient(center top , #049CDB, #0064CD); background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #FFFFFF; display: inline-block; vertical-align: middle; border-radius: 3px 3px 3px 3px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-decoration: none; >.btn:hover < background-position: 0 -15px; >.btn:active < box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset, 0 1px 2px rgba(0, 0, 0, 0.05); >.progress < font-size: 13px; margin: 0; vertical-align: middle; background-color: #F7F7F7; background-image: -moz-linear-gradient(center top , #F5F5F5, #F9F9F9); background-repeat: repeat-x; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; height: 28px; width: 250px; overflow: hidden; display: inline-block; >.progress .bar < background-color: #0E90D2; background-image: -moz-linear-gradient(center top , #149BDF, #0480BE); background-size: 40px 40px; -moz-box-sizing: border-box; -moz-transition: width 0.6s ease 0s; background-repeat: repeat-x; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset; color: #FFFFFF; float: left; font-size: 12px; height: 100%; text-align: left; padding: 5px 8px; font-size: 13px; text-shadow: 1px 1px #333; white-space: nowrap; >div.form

Для оформления css взял несколько правил из Bootstrap.

Что в итоге

В поле url мы указываем, например, ссылку на файл, который нужно обработать, и запускаем скрипт. Появляется прогресс-бар, а мы сидим и ждем, когда он доползет до 100 %, чтобы увидеть результат работы.

• Мы можем установить количество обрабатываемых строк за одну итерацию (в самом скрипте);
• Пользователю показывается настоящий прогресс-бар, а не бесконечная «крутилка» — если прогресс-бар стоит на середине, значит обработана половина файла;
• Пользователь может остановить выполнение скрипта. В этом случае offset записывается в cookies на 10 мин, чтобы он мог продолжить работу скрипта с того же места.
• Если пользователь обновит страницу, ему будет предложено продолжить работу скрипта с места остановки или начать заново (так же благодаря cookies).

Если у сообщества есть примеры реализации подобного функционала или вообще готовые решения для пошаговой работы со скриптами, буду благодарен ссылкам в комментариях.

UPD. Решение, адаптированное для MODX здесь.

Источник