Загрузка данных со сторонних сайтов в браузере пользователя jQuery AJAX PHP
Пример проверки баланса адреса в крипто-валюте Emercoin
Как известно, применение JavaScript снижает нагрузку на сервер и "облегчает жизнь" пользователю вашего сайта так как ему не приходится при каждом действии перегружать страницу.
Все бы хорошо, но политика безопасности браузера не позволяет выполнять запросы из браузера на сторонние сайты. А в конкретном примере нам необходимо получить данные о балансе адреса с сайта https://emercoin.mintr.org/ эксплорера блокчейна Emercoin.
Решение задачи - ретранслировать запрос из браузера через наш сайт на сайт эксплорера. Сайт в ответ возвращает данные в формате json. На сайте располагаем php файл который принимает запрос от браузера методом POST. Если вам необходимо декодировать данные из json, то раскомментируйте строку #$out=json_decode($out, true);.
Код ретранслятора запросов repeater.php
<?php
if ($_POST['repeat']) {
if( $curl = curl_init() ) {
curl_setopt($curl, CURLOPT_URL, "{$_POST['repeat']}");
curl_setopt($curl, CURLOPT_RETURNTRANSFER,true);
$out = curl_exec($curl);
#$out=json_decode($out, true);
print_r ($out);
curl_close($curl);
}
}
?>
Страница balance.html с javascript. Скрипт обращается к нашему повторителю на сайте методом POST, передавая запрос. Повторитель выполняет запрос, получает ответ и возвращает его скрипту в браузере пользователя. Скрипт вставляете данные в элементы с соответствующими id.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Баланс Emercoin</title>
</head>
<body>
<div id = "emercoin">
<p>Emercoin Address: <span id = "emer_address">emer_address</span><br>
Emercoin Balance: <span id = "emer_balance">emer_balance</span> EMC</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var emc = $.ajax({
type: "post",
data: {'repeat':'https://emercoin.mintr.org/api/address/balance/EJQj4fvvnA9AnzLG4Q92ierq7eWRQK1iwh'},
url: '/repeater.php',
async: true,
dataType: 'json',
success: function(data){
alert('Прибыли данные: Emercoin');
$('#emer_address').html(data['address']);
$('#emer_balance').html(data['balance']);
}
}).responseText;
</script>
</body>
</html>
Рецепт проверен, работает. Модифицируем и пользуемся:)
Помним, что прямая ретрансляция запроса может доставить вам неприятности, если пользователь решит посмотреть ваш javascript код и использовать повторитель в своих интересах. Для минимизации угрозы передавайте только идентификатор запроса, по которому скрипт php выполнит необходимый запрос, а также аутентификацию пользователей.
_____
P.S.
Дьявол кроется в деталях.