Лекция

Тема: «Введение в AJAX»

План

1. Индексные массивы в JavaScript

2. Ассоциативные массивы в JavaScript

3. JSON формат

4. Введение в AJAX

5. Авторизация пользователя на сайте

Массивы, объекты типа Array, развиваются вместе с остальными механизмами языка JavaScript. Они представляют собой списки пронумерованных значений. Первый элемент массива имеет индекс (ключ) 0, такой подход используется во многих языках программирования.

Рассмотрим методы работы с массивами.

1. Индексные массивы в JavaScript

Инициализация массивов

Вот несколько способов инициализации массивов.

let a = [] //пустой массив

let b = [10, 20, 30] //массив с тремя элементами 10, 20, 30

let c = Array (10, 20, 30) //массив с тремя элементами 10, 20, 30

let d = [10 20, 30] //массив с тремя элементами 10, 20, 30

let d=["Ivan", 27, 6, true] //массив с четырьмя элементами разного типа

Для того чтобы получить доступ к отдельному элементу массива, используют конструкцию:

b //весь массив b [10, 20, 30 ]

b[0] //первый элемент массива 10

d //весь массив d

d[2] //третий элемент массива d (6)

Получение длины массива

Для того чтобы узнать длину массива, нужно обратиться к его свойству length.

let l = b.length //длина массива будет 3

Перебор элементов

Одним из самых старых способов перебора элементов массива является цикл for по цифровым индексам:

let d=["Ivan", 27, 6, true]; //объявление массива

for (let i = 0; i < d.length; i++) {

alert( d[i] ); //вывод всех элементов массива в отдельных окнах alert

}

Но для массивов возможен и другой вариант цикла, for..of:

let d =["Ivan", 27, 6, true]; //объявление массива

// проход по значениям

for (let elem of d) {

alert( elem );

}

Цикл for..of не предоставляет доступа к номеру текущего элемента, только к его значению, но в большинстве случаев этого достаточно. А также это короче.

Так как массив является объектом, можно использовать и вариант for..in:

let d=["Ivan", 27, 6, true]; //объявление массива

for (let nom in d) {

alert( d[nom] ); //вывод всех элементов массива по очереди

}

2. Ассоциативные массивы в JavaScript

Под ассоциативным массивом подразумевают массив, в котором в качестве ключей применяются строки. То есть речь идёт о совокупности пар «ключ-значение». Таким образом, в ассоциативном массиве любое значение связано с конкретным ключом, а доступ к этому значению производится по имени ключа.

Мы можем представить ассоциативный массив в виде небольшого ящика, где находятся отделения. Каждое отделение имеет имя (это ключ) и содержимое (это значение). Естественно, чтобы найти нужное отделение в ящике, мы должны знать имя отделения (ключ). Зная это имя, мы сможем получить содержимое отделения (значение).

Опишем ассоциативный массив, в котором перечислим свойства, которыми обладает человек.

Имя – Ivan

Возраст – 27

Стаж – 6

Наличие автомобиля – да

//описание массива

let man={

"name": "Ivan",

"age": 27,

"work": 6,

"car": true

}

console.log(man); //вывод массива в консоль в виде {name: "Ivan", age: 27, work: 6, car: true}

Если к ассоциативному массиву применить свойство length JS выведет undefined (такого свойства нет). В тоже время, применив length к обычному массиву, он покажет нам четыре.

Обращение к элементу ассоциативного массива

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

Обратиться можно двумя способами, первый способ, где задействованы квадратные скобки [ ]. Пишем имя массива, ставим скобки, у простых массивов мы прописывали индекс, в ассоциативных, в кавычках прописываем ключ.

man["age"] //обращение к возрасту (значение 27)

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

man.age //обращение к возрасту (значение 27)

Проход ассоциативного массива выполняется следующим циклом:

for (let elem in man)

console.log(elem); //вывод в консоль ключей массива name age work car

for (let elem in man)

console.log(man[elem]); //вывод значений в консоль Ivan 27 6 true

for (let elem in man)

console.log(elem + '-->'+man[elem]);

//вывод элементов в виде:

name-->Ivan

age-->27

work-->6

car-->true

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

let man2={

"name": "Ivan",

"age": 27,

"work": 6,

"car": true,

"phone":["+380721111111","+791811111111"], //индексный массив телефонов

"email":{ //ассоциативный массив электронных почт

"yandex": "ivan@yandex.ru",

"gmail": "iv@gmail.com"

}

console.log(man2["email"]["yandex"]); //вывод в консоль почты yandex

console.log(man2.email.gmail); //вывод в консоль почты gmail

console.log(man2.phone[0]); //вывод в консоль первого номера телефона

3. JSON формат

JSON (JavaScript Object Notation) – простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером.

JSON основан на двух структурах данных:

Коллекция пар ключ/значение. В разных языках, эта концепция реализована как объект, запись, структура, словарь, хэш, именованный список или ассоциативный массив.

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

Несмотря на возможность использования практически во всех скриптовых языках, его название относится к JavaScript. Инструмент имеет следующие преимущества:

- занимает сравнительно небольшой объем, компактен;

- текстовое содержание может легко создаваться и поддаваться чтению вычислительной техникой и человеком;

- можно без особого труда преобразовать в структуру практически для всех видов формальных языков, использующихся для создания компьютерных программ;

- большинство языков программирования, будь то JavaScript, Ruby, Python или PHP, наделены функциями и специальными инструментами для чтения и редактирования файла.

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

Работает это по следующему сценарию:

К примеру, пользователь кликает по карточке товара в интернет-магазине.

JavaScript, встроенный в браузер, чтобы сделать веб-страницы более функциональными, генерирует запрос при помощи AJAX к программному файлу сценарию PHP, который запущен на сервере. Благодаря этому происходит передача ID выбранного товара.

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

После этого формируется строка и передается браузеру.

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

Парсинг JSON

Парсинг JSON (перевод строки JSON в объект JavaScript) осуществляется с помощью метода eval или parse.

Метод eval не рекомендуется использовать так как он не безопасен. Так если кто-то сможет добавить скрипт в строку JSON, то он выполнится.

В JavaScript для парсинга строки в JSON рекомендуется использовать метод JSON.parse. Он такой уязвимости не имеет.

Использование метода JSON.parse:

// переменная mas - это объект (ассоциативный массив) JavaScript, который получен путём парсинга строки JSON

let mas=JSON.parse(str); //преобразование строки в массив

console.log(mas); //вывод данных в виде массива

Конвертирование объекта JavaScript в строку JSON

Перевод объекта JavaScript в строку JSON осуществляется с помощью метода JSON.stringify. Данный метод осуществляет действие обратное методу JSON.parse.

let str = JSON.stringify(man2); //преобразование массива в строку

console.log(str); //вывод данных в виде строки

В консоли после последней команды будет срока:

{"name":"Ivan","age":27,"work":6,"car":true,"phone":["+380721111111","+791811111111"],"email":{"yandex":"ivan@yandex.ru","gmail":"iv@gmail.com"}}

4. Введение в AJAX

AJAX это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX – это синтез обозначенных технологий.

При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.

Достоинства AJAX:

- возможность создания удобного Web-интерфейса;

- активное взаимодействие с пользователем;

- частичная перезагрузка страницы, вместо полной;

- удобство использования.

AJAX использует два метода работы с веб-страницей: изменение Web-страницы, не перезагружая её, и динамическое обращение к серверу.

jQuery.ajax

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

data – передаваемые данные – строка иль объект

dataType – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

type – метод передачи данных для запроса – GET либо POST

url – адрес страницы, где будет происходить обработка запроса

Локальные AJAX события:

beforeSend – срабатывает перед отправкой запроса

error – если произошла ошибка

success – если ошибок не возникло

complete – срабатывает по окончанию запроса

Пример записи запроса:

$.ajax({

url: '/ajax/example.html', // указываем URL и

dataType : "json", // тип загружаемых данных

success: function (data, textStatus) {// вешаем свой обработчик на функцию success

$.each(data, function() {// обрабатываем полученные данные

код

});

}

});

Пример 1.

На странице index.php имеется контейнер span с текстом «Загрузить данные». При нажатии на этот текст происходит загрузка в контейнер div текста с данными пользователя в виде: «Ваши данные: имя - Иван, логин - 111».

С помощью ajax-запроса со страницы index.php происходит передача имени и логина на страницу ajax.php, где происходит обработка данных, переданных через ajax-запрос.

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

Код страницы index.php

<!DOCTYPE html>

<head>

<title>Пример 1</title>

//если загружена страница

$(function(){

//при нажатии на элемент с id="load" выполнить функцию

$('#load').bind("click",function(){

//выполняем метод

$.ajax({

url: 'ajax.php', //куда пойдет запрос

type: 'POST', //метод отправки данных

dataType: 'html', //тип данных в ответе (xml, json, script, html)

data: ({name: 'ivan', login: 111}), //передаваемые данные

beforeSend: funcBefore, //имя функции, которая будет выполняться перед запросом

success: funcSuccess //имя функции, которая будет выполнена после успешного запроса

}); //конец метода ajax

}) //конец события click

})

//реализация функции, которая будет выполняться перед запросом

function funcBefore()

{

//в контейнер помещаем текст 'Идет загрузка ...' пока не загрузятся данные

//вариант команды на javascript - document.getElementById('load').innerHTML='Идет загрузка ...';

$('#info').text('Идет загрузка ...');

}

//реализация функции, которая будет выполнена после успешного запроса

function funcSuccess(data)

{

//в контейнер помещаем данные, которые вернули после запроса

//вариант команды на javascript - document.getElementById('info').innerHTML=data;

$('#info').text(data);

}

</script>

</head>

<body>

<span id="load">Загрузить данные</span>

</body>

</html>

Код страницы ajax.php

<?php

sleep(1);

echo "Ваши данные: имя - ".$_POST['name'].", логин - ".$_POST['login'];

Пример 2. Пусть имеется два списка: один - с названием стран, другой – пустой. В первом списке выбираем страну и, в зависимости от выбора, во втором списке отображаются города выбранной страны.

Код страницы index.php:

<!DOCTYPE html>

<head>

<title>Пример 2</title>

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

$(function(){

//при выборе элемента первого списка возникает событие, на которое повесим обработчик-функцию

$('select[name="country"]').bind("change", function(){

//очищаем второй список, чтобы там не оставались никакие данные

$('select[name="town"]').empty();

//если выбран не пустой элемент первого списка

if ($('select[name="country"]').val()!=0){

//то выполняем ajax-запрос

//передаем такие данные

$.ajax({

url:'ajax.php', //путь, где будет обработка данных

type: 'post', //метод передачи данных

//передаем данные - номер выбранного элемента первого списка

data: {country: $('select[name="country"]').val()}, dataType: 'text', //вид ответа со скрипта ajax.php - текст

success: function(data){ //функция, которая выполняется в случае успеха ajax-запроса

//текст в формате json, переданный c ajax.php перекодируем в ассоциативный массив

data=JSON.parse(data);

//проходим по всему массиву.

//nom - номер-ключ элемента массива

//data[nom] - элемент массива, содержащий название города

for(let nom in data)

//второму списку добавляем дочерний элемент с соответствующими значениями

$('select[name="town"]').append('<option value="'+nom+'">'+data[nom]+'</option>');

}

})

}

})

</script>

</head>

<body>

<option value="1">Россия</option>

<option value="2">Англия</option>

</select>

</select>

</body>

</html>

Код страницы ajax.php:

<?php

//описываем массив городов первой страны - России

$mas1=array("1"=>"Москва", "2"=>"Волгоград", "3"=>"Краснодар");

//описываем массив городов второй страны - Англии

$mas2=array("4"=>"Лондон", "5"=>"Манчестер", "6"=>"Ливерпуль");

//если номер страны = 1

if ($_POST['country']=='1')

//то передаем в качестве ответа запроса массив mas1,

//предварительно преобразовав его в формат json (т.е. текст)

echo json_encode($mas1);

else if ($_POST['country']=='2') //если номер страны = 2

//то передаем в качестве ответа запроса массив mas2,

//предварительно преобразовав его в формат json (т.е. текст)

echo json_encode($mas2);

5. Авторизация пользователя на сайте

Авторизация клиента на сайте (англ. authorization «разрешение; уполномочивание») – это проведение процедуры подтверждения данных при входе в личный кабинет. После авторизации пользователь получает разрешение на осуществление определенных действий на web-ресурсе.

Пример 3. Выполните авторизацию пользователя на сайте.

Пусть в базе данных имеются данные по зарегистрированному пользователю – его логин и пароль. На главной странице выводится форма для заполнения полей с логином и паролем и имеются кнопки Войти и Зарегистрироваться.

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

Передачу данных пользователя (логина и пароля) и их обработку выполнить с помощью ajax-запроса.

Код страницы index.php:

<!DOCTYPE html>

<head>

<title>АвторизацияX</title>

//если документ полностью отображен, то выполняются следующие действия

$(function(){

//на кнопку Войти навешиваем событие по клику

$('[name="enter"]').bind("click", function(){

//скрываем контейнер с сообщением об ошибке

$('#error').hide();

//выполняем ajax-запрос

$.ajax({

url: 'ajax.php', //где будет выполняться запрос

type: 'post', //метод отправки данных

//передаем данные из формы - логин и пароль

data: {

pass: $('[name="pass"]').val()

dataType: 'json', //формат ответа

//функция, которая выполняется после прихода ответа с ajax.php

success: function(data){

//преобразуем текст в массив

data = JSON.parse(data);

//если ответ положительный, т.е. в БД существует запись

if (data.status)

//то выполняем переход на страницу пользователя page.php

window.location.href='page.php';

else //если ответ отрицательный, т.е. в БД НЕ существует запись

//отображаем контейнер с текстом ошибки

$('#error').show().text(data.message);

}

});

//отменяем стандартное действие по отправке формы на сервер

return false;

})

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Код страницы ajax.php:

<?php

//соединение с БД и установка кодировки

mysql_connect('localhost','root','1111');

mysql_select_db('use');

mysql_query("SET NAMES utf8");

//таблица, с которой будем работать

$table='info';

//записываем в переменные пришедшие данные

$login=$_POST['login'];

$pass=$_POST['pass'];

//отбираем в таблице info строки, которые соответствуют заданным логину и паролю,

//считаем их количество

$result=mysql_query("SELECT COUNT(*) as k FROM $table WHERE login='$login' AND pass='$pass'");

$row=mysql_fetch_assoc($result);

//если количество записей в БД не ноль

if ($row['k']!=0)

{

//создаем ассоциативный массив со статусом true

$response = array('status' => true);

}

else //если в базе данных нет ни одной записи с логином и паролем, которые ввел пользователь

{

//создаем ассоциативный массив со статусом false и сообщением об ошибке

$response = array('status' => false,

'message' => 'Проверьте логин и пароль или зарегистрируйтесь');

}

//преобразовываем ассоциативный массив с ответом $response в текст и передаем его

echo json_encode($response);

Стили главной страницы style.css:

form{

margin: 0 auto;

width: 300px;

height: 240px;

background-color: rgb(224, 255, 255);

}

.login, .pass{

margin: 20px 20px 5px 20px;

width: 250px;

height: 40px;

border: 1px solid rgb(100, 255, 255);

text-align: center;

color: black;

font-weight: 600;

}

.login,.pass{background-color: rgb(245, 245, 245); }

.submit{background-color: rgb(100, 255, 255);

width: 255px;

}

.submit{

margin: 10px 0 10px 20px;

width: 80px;

height: 40px;

border: 1px solid rgb(100, 255, 255);

text-align: center;

color: black;

font-weight: 600;

float: left;

}

#regist{

margin: 10px 23px 10px 0;

width: 160px;

height: 40px;

border: 1px solid rgb(100, 255, 255);

text-align: center;

color: black;

font-weight: 600;

float: right;

}

#error{

margin: 5px 20px;

width: 250px;

height: 40px;

text-align: center;

color: rgb(255,0,0);

font-size: 10pt;

border:1px solid black;

background-color:red;

display: none;

}