Форум программистов, компьютерный форум, киберфорум
Наши страницы
PHP для начинающих
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 1, средняя оценка - 5.00
Vshining
62 / 62 / 47
Регистрация: 04.12.2016
Сообщений: 215
Завершенные тесты: 1
#1

AJAX - как сделать запрос к PHP-коду без перезагрузки страницы - PHP

21.12.2016, 01:36. Просмотров 9123. Ответов 20

Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде "Как выполнить функцию PHP из JavaScript-кода?" или "Как отправить форму без перезагрузки?", она напросилась в этом разделе сама самой.

Итак, AJAX - это Asynchronous Javascript And XML - асинхронный JavaScript и XML, если по-русски. Разберём каждое слово:

1) Асинхронный - это и есть то самое, чего все так хотят - выполнение действий без перезагрузки страницы. Пока JavaScript отправил запрос на сервер, пользователь продолжает выполнять действия на странице, т.к. никаких переходов при отправке запроса не происходит.

2) JavaScript - язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее - вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get - чуть позже.

3) XML - в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ.

Таким образом, AJAX - это способ отправки запросов (и данных) на сервер без перезагрузки страницы и, как следует, прерывания действий пользователя.

О методах GET и POST.

Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1&param2=value2. Это накладывает два ограничения:
1) Объём отправляемых данных существенно ограничен - объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию.
2) Данные открыты - не желательно передавать чувствительные данные, например - пароли. Из-за этого, POST-запросы встречаются намного чаще.

У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно - трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими.

Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов - с помощью объекта XMLHttpRequest и методов jQuery - $.post и $.get.

GET-запрос

В качестве примера используем следующий "скрипт":

hello.php
PHP
1
2
3
<?php
$name = $_GET['name'];
echo "Hello, $name!";
1) XMLHttpRequest
Javascript
1
2
3
4
5
6
7
8
9
10
11
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        } else {
        alert('Произошла ошибка!');
    }
};
 
xmlhttp.open("GET", "hello.php?name=Webkill", true);
xmlhttp.send(null);
В строке один происходит создание объекта. Во второй мы присваиваем этому объекту свойство onreadystatechange - функцию, которая будет выполнена, когда
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая - когда запрос прошел нормально, и когда произошла ошибка.

В 10-той строке мы вызываем метод, в который передаём три параметра:
1) "GET" - тип запроса
2) "hello.php?name=Webkill" - URL запроса: файл hello.php и один параметр name.
3) true - асинхронность. Если false - то браузер будет ожидать ответа (синхронность).

На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр - null (позже, через этот параметр будут передаваться данные тела POST-запроса).

2) jQuery

Javascript
1
2
3
4
5
$.get("hello.php", {name: "Webkill"},
    function(data) {
        alert(data);
    }
);
Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) "hello.php" - часть URL без GET-параметров
2) {name: "Webkill"} - параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае "успеха"

POST-запрос

Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.

login.php
PHP
1
2
3
4
5
6
7
8
9
<?php
$login = 'Webkill';
$pass = 'qwerty123';
 
if($_POST['login'] == $login && $_POST['password'] == $pass) {
    echo 'Добро пожаловать!';
} else {
    echo 'В доступе отказано.';
}
1) XMLHttpRequest

Javascript
1
2
3
4
5
6
7
8
9
10
11
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        } else {
            alert('Произошла ошибка!');
        }
};
 
xmlhttp.open("POST", "login.php", true);
xmlhttp.send({login: inputLogin, pass: inputPassword});
Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open - тип запроса, и теперь мы передаём данные в метод send в формате JSON.

2) jQuery

Javascript
1
2
3
4
5
$.post('login.php', {login: inputLogin, pass: inputPassword}, 
    function(data) {
        alert(data);
    }
);

Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST - попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.

Естественно, круг задач, для которых используется AJAX намного шире - загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.

Для дальнейшего изучения:
jQuery $.post
jQuery $.get
Русский сайт о XMLHttpRequest
8
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.12.2016, 01:36
Я подобрал для вас темы с готовыми решениями и ответами на вопрос AJAX - как сделать запрос к PHP-коду без перезагрузки страницы (PHP):

Как сделать мультизагрузку фото с ajax и php без перезагрузки страницы?
или хотя бы как можно как можно отправить данные массива name='image' в файл...

Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек)
Привет. Это, в каком-то смысле, продолжение креатива...

Как заставить этот код работать без перезагрузки страницы (ajax)
Здравствуйте. Вопрос такой - есть страница table.html в неё подключается...

Как выполнить PHP код без перезагрузки страницы?
У меня имеется код: &lt;?php if(isset($_POST)) { $text = $_POST; echo...

Как загрузить результат php скрипта без перезагрузки страницы?
Добрый день! Есть скрипт на php: Код скрипта на php &lt;?php...

ajax загрузка страницы без перезагрузки
ajax загрузка страницы без перезагрузки внутри контента Пример у меня есть...

20
Зверушь
398 / 317 / 80
Регистрация: 01.05.2010
Сообщений: 1,576
20.02.2017, 18:21 #21
Ну элемент отпозиционирован абсолютно. Относительно чего? Если выше нет элементов с позиционированием, то скорее всего от body. То есть элемент следует искать вверху документа.
Далее абсолютно позиционированный элемент сходу не имеет размеров. Задайте их явно при помощи ксс свойств width и height.
Далее, задайте координаты при помощи свойств left и top.
Должно появится

Добавлено через 6 минут
А эта функция поможет поместить ваше окно точно по центру
Javascript
1
2
3
4
5
6
7
8
9
function centerize($o) {
    $o.css('position', 'fixed');
    
    var left = $(window).width()/2 - $o.outerWidth()/2;
    var top = $(window).height()/2 - $o.outerHeight()/2;
    
    $o.css('left', left+'px');
    $o.css('top', top+'px');
}
Вызвать можно так (единожны, после загрузки документа):
Javascript
1
2
3
4
centerize($('#result'));
$(window).on('resize', function() {
    centerize($('#result'));
});
1
20.02.2017, 18:21
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.02.2017, 18:21
Привет! Вот еще темы с решениями:

Отправка формы без перезагрузки страницы (AJAX)
Все работает нормально, но почему то дублируются поля ввода ИМЯ и СООБЩЕНИЕ...

Отправка формы без перезагрузки страницы Ajax
Здравствуйте! Никак не могу отправить. В чем ошибка, если есть? Файлы...

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

Как сделать чат между двумя пользователями без перезагрузки страницы?
Я знаю что можно использовать websocket или ajax, но до конца не понимаю как...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
21
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru