HTTP Basic Authentication with jQuery AJAX requests

Что такое ajax?

AJAX расшифровывается как асинхронный JavaScript и XML и позволяет асинхронно извлекать контент с внутреннего сервера без обновления страницы. Таким образом, он позволяет обновлять содержимое веб-страницы без перезагрузки.

Давайте рассмотрим пример, чтобы понять, как вы можете использовать AJAX в повседневной разработке приложений. Скажем, вы хотите создать страницу, которая отображает информацию профиля пользователя, с различными разделами, такими как личная информация, социальная информация, уведомления, сообщения и так далее.

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

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

Общий вызов AJAX работает примерно так:

Давайте быстро пройдемся по обычному потоку AJAX:

1. Сначала пользователь, как обычно, открывает веб-страницу синхронным запросом.
2. Затем пользователь нажимает на элемент DOM – обычно кнопку или ссылку – который инициирует асинхронный запрос к серверу. Конечный пользователь не заметит этого, поскольку вызов выполняется асинхронно и не обновляет браузер. Однако вы можете распознать эти AJAX-вызовы с помощью такого инструмента, как Firebug.
3. В ответ на запрос AJAX сервер может вернуть данные строки XML, JSON или HTML.
4. Данные ответа анализируются с использованием JavaScript.
5. Наконец, проанализированные данные обновляются в DOM веб-страницы.

Итак, как вы можете видеть, веб-страница обновляется данными в реальном времени с сервера без перезагрузки браузера.

В следующем разделе мы расскажем, как реализовать AJAX с использованием ванильного JavaScript.

Введение в ajax

<input value="Голосовать!" onclick="vote()" type="button" />

<div id="vote_status">Здесь будет ответ сервера</div>

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

// javascript-код голосования из примера
function vote() {
	// (1) создать объект для запроса к серверу
	var req = getXmlHttp()  
       
        // (2)
	// span рядом с кнопкой
	// в нем будем отображать ход выполнения
	var statusElem = document.getElementById('vote_status') 
	
	req.onreadystatechange = function() {  
        // onreadystatechange активируется при получении ответа сервера

		if (req.readyState == 4) { 
            // если запрос закончил выполняться

			statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)

			if(req.status == 200) { 
                 // если статус 200 (ОК) - выдать ответ пользователю
				alert("Ответ сервера: " req.responseText);
			}
			// тут можно добавить else с обработкой ошибок запроса
		}

	}

       // (3) задать адрес подключения
	req.open('GET', '/ajax_intro/vote.php', true);  

	// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
	// для обработки ответа сервера
	 
        // (4)
	req.send(null);  // отослать запрос
  
        // (5)
	statusElem.innerHTML = 'Ожидаю ответа сервера...' 
}

<?php
sleep(3);
echo 'Ваш голос принят!';

Cross-domain requests with cors

In case, the protected resource or page is accessible through a domain that differs from the origin, a restriction from same origin policy is applied. To circumvent the same-origin policy, use the Cross-origin resource sharing.

Database design

The following SQL script is used to create the tbl_registration table on the example database to run this example. The registered member data like first name, last name, email, contact number and password will be stored in this table.

Explanation:

For some cross domain requests, the browser sends a preflight OPTIONS request that is missing your authentication headers. Wrap your authentication directives inside the LimitExcept tag to respond properly to the preflight.

Then send a few headers to tell the browser that it is allowed to authenticate, and the Access-Control-Allow-Origin to grant permission for the cross-site request.

In some cases, the * wildcard doesn’t work as a value for Access-Control-Allow-Origin: You need to return the exact domain of the callee. Use SetEnvIf to capture this value.

Flow of control among jquery modals, ajax handlers and php

Showing the modal dialog or any other kind of pop-up window can be done easily by using jQuery UI. There are various feature-packed plugins to show a modal dialog.

In a previous tutorial, we have seen how to show the comment add edit form as a lightbox using Dialogify plugin.

jQuery UI dialog box is a very good choice of displaying a modal dialog in an application. The login and registration form HTML code is created inside a modal container.

By submitting the Login Registration form, the data will be posted to the PHP via AJAX after client-side validation. The login registration system with jQuery dialog and AJAX submit action will enrich your website with a modern outlook.

Google поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье “jQuery AJAX (Google Search API || Yahoo Search API)”

Jquery ajax script

В папке с темой создаем папку js а в ней создадим пока пустой файл ajax-login-script.js, откроем его и внесем следующий код:

Jquery(..).load

Начнем с самого простого – загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:

$(document).ready(function(){              // по окончанию загрузки страницы
    $('#example-1').click(function(){      // вешаем на клик по элементу с id = example-1
        $(this).load('ajax/example.html'); // загрузку HTML кода из файла example.html               
    }) 
}); 

Пример подгружаемых данных (содержимое файла example.html):

Example<br/>
Data Loaded By AJAX<br/>
Bye-Bye

Пример работы

Jquery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

• async – асинхронность запроса, по умолчанию true
• cache – вкл/выкл кэширование данных браузером, по умолчанию true
• contentType – по умолчанию “application/x-www-form-urlencoded”
• data – передаваемые данные – строка иль объект
• dataFilter – фильтр для входных данных
• dataType – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
• global – тригер – отвечает за использование глобальных AJAX Event’ов, по умолчанию true
• ifModified – тригер – проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
• jsonp – переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
• processData – по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем
• scriptCharset – кодировочка – актуально для JSONP и подгрузки JavaScript’ов
• timeout – время таймаут в миллисекундах
• type – GET либо POST
• url – url запрашиваемой страницы

Локальные AJAX Event’ы:

• beforeSend – срабатывает перед отправкой запроса
• error – если произошла ошибка
• success – если ошибок не возникло
• complete – срабатывает по окончанию запроса

Jquery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Jquery.getjson

Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                            // по завершению загрузки страницы
    $('#example-4').click(function(){                    // вешаем на клик по элементу с id = example-4
        $.getJSON('ajax/example.json', {}, function(json){  // загрузку JSON данных из файла example.json   
            $('#example-4').html('');
                                                         // заполняем DOM элемент данными из JSON объекта
            $('#example-4').append('To: '     json.note.to   '<br/>')
                           .append('From: '   json.note.from   '<br/>')
                           .append('<b>'      json.note.heading   '</b><br/>')
                           .append(           json.note.body   '<br/>');
        });                
    })
});

Файл example.json:

{
    note:{
        to:'Tove',
        from:'Jani',
        heading:'Reminder',
        body:'Don't forget me this weekend!'
    }
}

Пример работы

Jquery.getscript

jQuery.getScript данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

1. url запрашиваемого скрипта
2. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы
    $('#example-5').click(function(){                  // вешаем на клик по элементу с id = example-5
        $.getScript('ajax/example.js', function(){     // загрузку JavaScript'а из файла example.js 
            testAjax();                                // выполняем загруженный JavaScript
        });                
    })
});

Файл example.js:

function testAjax() {
    $('#example-5').html('Test completed');  // изменяем элемент с id = example-5
}

Пример работы

Jquery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

1. url запрашиваемой страницы
2. передаваемые данные (необязательный параметр)
3. callback функция, которой будет скормлен результат (необязательный параметр)
4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы
    $('#example-3').click(function(){                  // вешаем на клик по элементу с id = example-3
        $.post('ajax/example.xml', {}, function(xml){  // загрузку XML из файла example.xml   
            $('#example-3').html('');
            $(xml).find('note').each(function(){       // заполняем DOM элемент данными из XML
                $('#example-3').append('To: '     $(this).find('to').text()   '<br/>')
                               .append('From: '   $(this).find('from').text()   '<br/>')
                               .append('<b>'      $(this).find('heading').text()   '</b><br/>')
                               .append(           $(this).find('body').text()   '<br/>');
            });
        }, 'xml');                                     // указываем явно тип данных
    })
});

Файл example.xml:

Пример работы

Jsonp api

Приведу так же небольшой список открытых API с поддержкой JSONP:

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с id=”loading” во время выполнения любого AJAX запроса:

$("#loading").bind("ajaxSend", function(){
    $(this).show(); // показываем элемент
}).bind("ajaxComplete", function(){
    $(this).hide(); // скрываем элемент
});

Для локальных событий – вносим изменения в опции метода ajax():

$.ajax({
    beforeSend: function(){
        // Handle the beforeSend event
    },
    complete: function(){
        // Handle the complete event
    }
    // ...
});

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

Landing html with header login register menu

In this section, we are going to see the HTML code that is used to show a landing page. In this page, a header bar will be shown with the login register menu links.

The menu options are displayed in the form of HTML buttons. With the reference of this button element object, the jQuery UI dialog window will be popped up to display login or registration form accordingly.

Login case in ajax-login-registration.php

By checking the action parameter and found it is the login request, then the entered email address and the password will be used to check the database.

Before binding the password to the login validation query, it has to be encrypted with the same method that was applied while inserting to the database.

Login registration with ajax output

Download

↑ Back to Top

Registration code in ajax-login-registration.php

This is a part of the code that is created in the ajax-login-registration.php to handle the registration process requested via AJAX. In this login registration system, the action parameter is posted via AJAX.

This is the single PHP endpoint where the login and registration processes are taking place based on the request.

Request

The solution is quite simple, an Authorization header sent with the request.

Response

To trigger the basic authentication use your prefered method.

Steps to create a login registration system with lightbox

In this article, we will see how to create an AJAX based Login Registration system in PHP. Also, we are going to integrate jQuery UI for displaying the login and the registration panel in the form of Lightbox.

So, we are going to learn several things by this example.

Yahoo поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье “jQuery AJAX (Google Search API || Yahoo Search API)”

Взаимодействие с php

Для организации работы с PHP использую библиотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Как ajax работает с использованием vanilla javascript

В этом разделе мы увидим, как AJAX работает в обычном JavaScript. Конечно, есть доступные библиотеки JavaScript, которые облегчают выполнение AJAX-вызовов, но всегда интересно знать, что происходит внутри.

Давайте посмотрим на следующий ванильный код JavaScript, который выполняет вызов AJAX и асинхронно получает ответ от сервера.

Как работает ajax с использованием библиотеки jquery

В предыдущем разделе мы обсуждали, как можно выполнять вызовы AJAX, используя ванильный JavaScript. В этом разделе мы будем использовать библиотеку jQuery, чтобы продемонстрировать это. Я предполагаю, что вы знаете основы библиотеки jQuery.

Библиотека jQuery предоставляет несколько различных методов для выполнения вызовов AJAX, хотя здесь мы рассмотрим стандартный метод ajax, который используется чаще всего.

Посмотрите на следующий пример.

Как вы уже знаете, знак $ используется для ссылки на объект jQuery.

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

В большинстве случаев вам нужно будет указывать функции обратного вызова (коллбеки) для успешного выполнения и для ошибок. Функция обратного вызова для успеха будет вызвана после успешного завершения вызова AJAX. Ответ, возвращенный сервером, будет передан коллбеку для успеха.

Итак, как вы можете видеть, AJAX-операции легко выполнять с помощью библиотеки jQuery. Фактически, процесс более или менее одинаков, независимо от библиотеки JavaScript, с которой вы решаете выполнять вызовы AJAX.

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

Корректируем файл functions.php

Для корректной работы нашей авторизации будем пользоваться следующими функция:

Итак, открываем файл functions.php и вставляем туда следующий код:

Модальные окна авторизации и регистрации – jquery

$(function(){

    //При загрузке страницы ссылкам форм подменяем атрибут href и добавляем data-атрибут для вызова модальных окон
$(‘#modal-login a[href*=”register”]’).attr(‘href’,’#modal-register’).attr(‘data-uk-modal’,”);
$(‘#modal-login a[href*=”forgot_password”]’).attr(‘href’,’#modal-forgot-password’).attr(‘data-uk-modal’,”);
$(‘#modal-forgot-password a[href*=”login”]’).attr(‘href’,’#modal-login’).attr(‘data-uk-modal’,”);
$(‘#modal-register a[href*=”login”]’).attr(‘href’,’#modal-login’).attr(‘data-uk-modal’,”);

    //Обработчик формы авторизации
$(‘#modal-login’).on(‘submit’,’form’,function(){

        var form_action = $(this).attr(‘action’);
var form_backurl = $(this).find(‘input[name=”backurl”]’).val();

        $.ajax({
type: “POST”,
url: ‘/bitrix/templates/.default/ajax/auth.php’,
data: $(this).serialize(),
timeout: 3000,
error: function(request,error) {
if (error == “timeout”) {
alert(‘timeout’);
}
else {
alert(‘Error! Please try again!’);
}
},
success: function(data) {
$(‘#modal-login .modal-content’).html(data);

                $(‘#modal-login form’).attr(‘action’,form_action);
$(‘#modal-login input[name=backurl]’).val(form_backurl);

                $(‘#modal-login a[href*=”register”]’).attr(‘href’,’#modal-register’).attr(‘data-uk-modal’,”);
$(‘#modal-login a[href*=”forgot_password”]’).attr(‘href’,’#modal-forgot-password’).attr(‘data-uk-modal’,”);
}
});

        return false;
});

    //Обработчик формы регистрации
$(‘#modal-register’).on(‘submit’,’form’,function(){

        var form_action = $(this).attr(‘action’);
var form_backurl = $(this).find(‘input[name=”backurl”]’).val();

        $.ajax({
type: “POST”,
url: ‘/bitrix/templates/.default/ajax/auth.php’,
data: $(this).serialize(),
timeout: 3000,
error: function(request,error) {
if (error == “timeout”) {
alert(‘timeout’);
}
else {
alert(‘Error! Please try again!’);
}
},
success: function(data) {
$(‘#modal-register .modal-content’).html(data);
$(‘#modal-register form’).attr(‘action’,form_action);
$(‘#modal-register input[name=backurl]’).val(form_backurl);
$(‘#modal-register a[href*=”login”]’).attr(‘href’,’#modal-login’).attr(‘data-uk-modal’,”);
}
});

        return false;
});

    //Обработчик формы восстановления пароля
$(‘#modal-forgot-password’).on(‘submit’,’form’,function(){

        var form_action = $(this).attr(‘action’);
var form_backurl = $(this).find(‘input[name=”backurl”]’).val();

        $.ajax({
type: “POST”,
url: ‘/bitrix/templates/.default/ajax/auth.php’,
data: $(this).serialize(),
timeout: 3000,
error: function(request,error) {
if (error == “timeout”) {
alert(‘timeout’);
}
else {
alert(‘Error! Please try again!’);
}
},
success: function(data) {
$(‘#modal-forgot-password .modal-content’).html(data);
$(‘#modal-forgot-password form’).attr(‘action’,form_action);
$(‘#modal-forgot-password input[name=backurl]’).val(form_backurl);
$(‘#modal-forgot-password a[href*=”login”]’).attr(‘href’,’#modal-login’).attr(‘data-uk-modal’,”);
}
});

        return false;
});

});

С помощью jQuery подменяем атрибуты “href” ссылок для вызова модальных окон.Атрибут “action” у всех форм от текущей открытой страницы сайта, иначе подставится путь до файла вот такой “/bitrix/templates/.default/ajax/auth.php” и не будет работать форма корректно.

Также заменяем значение скрытого инпута “backurl”, который будет возвращать нас после перезагрузки страницы туда, откуда пришли, т.е. на текущую страницу.Ошибки ajax я не оформлял для этого примера, попробуйте сами оформить, как захочется  в методе error: function(request,error) {…

Необходимые компоненты

• bitrix:system.auth.form – форма авторизации и вывода ошибок в шаблоне “errors”
• bitrix:system.auth.registration

– простая форма регистрации (не используется по умолчанию)

• bitrix:main.register – настраиваемая форма регистрации (используется)
• bitrix:system.auth.forgotpasswd – форма восстановления пароля

Обработчики подгруженного контента

Если перед вами стоит задача повесить обработчик события на подгружаемый AJAX’ом контент, то вам стоит обратить внимание на метод live, с его помощью вы сможете осуществить задуманное, необходимо лишь немного преобразовать код:

// было бы, если бы контент элемента #main не подгружался AJAX'ом
$('#main a').click(function(event){
    console.log($(this).attr('href'));
    return false; // отменяем действие по умолчанию и всплытие события
});

// теперь предположим, что контент элемента #main подгружается AJAX'ом
// вносим минимум изменений в предыдущий код
$('#main a').live('click', function(event){
    console.log($(this).attr('href'));
    event.preventDefault(); // отменяем действие по умолчанию, но не трогаем bubbling - чтобы не мешать другим обработчикам
});

В данном примере используется метод live, но я бы всё же посоветовал использовать метод delegate, более подробно о данном методе описано в 6-ой части — «События»

Отправка файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Отправка формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства “сбора” данных из формы лучше использовать плагин jQuery Form либо родные методы serialize и serializeArray.

Примеры использования jsonp

Отдельно стоит отметить использование JSONP – ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать – то это подключение удаленного JavaScript’a, содержащего необходимую нам информацию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):

При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос вида:

Реальный пример ajax с php

В этом разделе мы создадим пример, который извлекает контент JSON из файла PHP на стороне сервера, используя AJAX.

Для демонстрации мы создадим пример, который выполняет вход пользователя с использованием AJAX и jQuery. Для начала давайте создадим файл index.php, как показано в следующем фрагменте, который отображает базовую форму входа.

Цикл статей

1. jQuery для начинающих
2. jQuery для начинающих. Часть 2. JavaScript Меню
3. jQuery для начинающих. Часть 3. AJAX
4. jQuery для начинающих. Часть 4. Селекторы
5. jQuery для начинающих. Часть 5. Эффекты
6. jQuery для начинающих. Часть 6. События
7. jQuery для начинающих. Часть 7. Пишем плагины
8. jQuery для начинающих. Часть 8. Расширяем фильтры
9. jQuery для начинающих. Часть 9. Пишем плагины анимации

Выводим форму входа в шаблоне

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