Home > AJAX, email рассылки, feedburner, javascript, jquery, Наше ПО > Автоматизация подписки на рассылку FeedBurner. Часть 2

Автоматизация подписки на рассылку FeedBurner. Часть 2

February 17th, 2010 Leave a comment Go to comments

В первой части я описал, зачем нам в принципе автоматизировать подписку FeedBurner. Коротко: автоматизация заключается в автоматической подписке электронной почты пользователя на рассылку FeedBurner при заполнении пользователем формы подписки на рассылку другого сервиса. В нашем примере используется сервис smartresponder.ru.

В этой статье я приведу javascript код клиентской части скрипта. Напомню, для взаимодействия с сервером используется технология AJAX. Также я использовал фреймворк JQuery.

Общий принцип взаимодействия таков. Javascript вызывает серверный PHP скрипт с помощью http-запросов с методом GET и передает туда все необходимые параметры. Серверный скрипт взаимодействует с сервисом FeedBurner и формирует html-документ, который возвращает клиентскому скрипту. Клиентский скрипт вставляет полученный html-код в страницу и обрабатывает результат.

Итак, одним из поставленных условий было то, что исходный код, предоставляемый smartresponder’ом не должен меняться. Поэтому первым делом средствами javascript и JQuery я меняю стандартную кнопку формы на собственную.

$(document).ready(function() {
	$('[name=SR_submitButton]').before('input name="SR_submitButton2" value=""');
	$('[name=SR_submitButton2]').attr('value', $('[name=SR_submitButton]').attr('value'));
	$('[name=SR_submitButton2]').attr('style', $('[name=SR_submitButton]').attr('style'));
	$('[name=SR_submitButton]').hide();
 
	$('[name=SR_submitButton2]').click(function(){
		My_submit();
	 });
});

SR_submitButton – имя кнопки формы, которую предоставляет smartresponder. Вместо неё мы создаем собственную кнопку с именем SR_submitButton2 (по ходу перенимая стиль и название исходной кнопки), а SR_submitButton скрываем (hide()). В качестве обработчика нажатия SR_submitButton2 вешаем собственную функцию My_submit(), код которой приведен ниже.

function My_submit(submit)
{
	var f = $('[name=SR_form]');
	if(submit && (SR_submit(f[0])))
	{
		$('[name=SR_form]').submit();
		return true;
	}else
	{
		if(!onSubscribeSubmit(f))
		{
			var iteration = $(f).data("iter");
			if(!iteration)
			{
				$(f).data("iter", 1);
			}else if(iteration > 2)
			{
				$(f).data("iter", 0);
				$('[name=SR_form]').submit();
			}else
			{
				$(f).data("iter", iteration + 1);
			}
		}
		return false;
	}
}

Кнопка SR_submitButton2 будет нажиматься до получения капчи и после ввода её пользователем. Соответственно в функции My_submit предусмотрено два варианта работы. Если в функцию был передан параметр submit равный true, то подразумевается, что с feedburner’ом мы уже разобрались, и данные готовы к отправке в smartresponder. Но перед этим вызовем стандартную smarteponder’овсую функцию SR_submit, которая проверит поля формы. Если проверка прошла успещно мы попадаем в тело оператора if и выполняется

$(’[name=SR_form]‘).submit(); – отправка данных в сервис smartresponder.

В противном случае данные передаются на обработку функции onSubscribeSubmit. Если последняя возвращает false – это говорит о безуспешной попытке ввода капчи.

К сожалению в FeedBurner наблюдается неприятный эффект с адресами, которые там уже зарегистрированы. При попытке подписки такого адреса, FeedBurner воспринимает это как ввод неверной капчи и присылает новую. В итоге получается что вне зависимости от ввода пользователя, ему присылается новая капча. Чтобы этого избежать я ограничил количество вводов капчи тремя попытками. Не получилось с трех попыток – делать нечего, переадресуем клиента на smartresponder, оставляя в покое FeedBurner. Иначе мы рискуем что клиент уйдет вообще ни с чем.

Теперь разберем функцию onSubscribeSubmit().

function onSubscribeSubmit(f)
{
	if(!(jQuery.data(document.body, 'email'))) 	// пытаемся прочесть ранее сохраненный параметр элемента body с именем email.
							// Его отсутствие говорит о том, что мы ещё не получали капчи от FeedBurner’а.
	{
		// берем из формы адрес подписчика и записываем как параметр body
		jQuery.data(document.body, 'email',  $('[name=field_email]').val());
		// здесь мы обращаемся к собственному серверному скрипту и передаем ему
		// в качестве параметра адрес электронной почты подписчика
		$.ajax({
		type: "GET",
		url: serverPath + 'fb_request.php?email=' + $('[name=field_email]').val(),
		dataType: "html",
		data: {},
		timeout: 30000,
			success: function(data) {
				// в случае успеха добавляем перед кнопкой текст с просьбой
				// ввести капчу и саму капчу, которую нам вернул скрипт
				$('.approvement').remove();
				$('[name=SR_submitButton2]').before('<div class="approvement"><span style="font-size: 10pt; font-family: Verdana;">'+
				prompt  + '</span>' +
				data + '</div>');
				return false;
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				return false;
			}
			});
	}else()
	{
		// если мы попали в эту ветку, значит мы обрабатываем нажатие
		// кнопки уже при введенной капче
		$('#fbresult').remove();     // удаляем старые результаты работы
		$.ajax({
		type: "GET",
		// все указанные ниже параметры, начинающиеся с fb присылаются при
		// предыдущем взаимодействии и вставляются в документ.
		// Теперь же их нужно передать обратно для корректного
		// взаимодействия с FeedBurner’ом
		url: serverPath + 'fb_request.php?email=' + $('#fbemail').attr('value') +
		'&token=' + $('#fbtoken').attr('value') +
		'&uri=' + $('#fburi').attr('value') +
		'&captcha=' + $('#fbcaptcha').attr('value') +
		'&action=' + $('#fbaction').attr('value') +
		'&cookie=' + $('#fbcookie').attr('value'),
		dataType: "html",
		data: {},
		timeout: 30000,
			success: function(data) {
				// вставляем полученный результат
				$('[name=SR_form]').before(data);
				// вызываем обработчик полученного результата
				return handleFbResult(f);
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				return false;
			}
		});
	}
}

Также надо объявить строку с предложением ввести капчу, которая используется в функции.

var prompt =  '<p style="font-size: 8pt;">' +
'Введите текст на картинке и повторно нажмите на кнопку Получить.</p>';

Ну а теперь осталось разобрать последнюю функцию – обработку результата отправления капчи. Наш серверный скрипт, получив ответ от FeedBurner’а, вернет кусок html кода, в котором будет элемент с. Нас интересует значение (value) этого элемента.

function handleFbResult(f)
{
	var result = $('#fbresult').attr('value');
	switch(result)
	{
		// в случае если подписка FeedBurner успешно активирована, либо
		// адрес уже находится в подписном листе
		case 'already':
		case 'success':
			$('.approvement').remove();
			My_submit(true);  // отправка в smartreponder
			return true;
		break;
		case 'repeat':
			// неправильный ввод – перезапрашиваем капчу
			jQuery.data(document.body, 'email', null);
			onSubscribeSubmit(f);
		return false;
		break;
		case 'invalid':
			// пользователь ввел некорректный email
			$(f).data("email", null);
			$(".approvement").html('<font style="font-size: 10pt; font-family: Verdana; color: red; font-weight: bold;">Некорректный email</font>');
			return false;
		break;
	}
}

Вот, собственно, и всё, что делает клиентский скрипт. В следующей статье рассмотрим серверную часть.

Categories: AJAX, email рассылки, feedburner, javascript, jquery, Наше ПО Tags:
  1. No comments yet.
  1. No trackbacks yet.