JSONP

Оглавление

    Показать оглавление

JSONP — это метод отправки данных JSON, не беспокоясь о междоменных проблемах.

JSONP не использует объект XMLHttpRequest.

Вместо этого JSONP использует тег <script>.

Введение в JSONP

JSONP означает JSON с дополнением.

Запрос файла из другого домена может вызвать проблемы из-за междоменной политики.

Запрос внешнего скрипта из другого домена не вызывает этой проблемы.

JSONP использует это преимущество и запрашивает файлы, используя тег сценария. вместо объекта XMLHttpRequest.

 <script src="demo_jsonp.php">

Серверный файл

Файл на сервере заключает результат в вызов функции:

Пример

 <?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
  
echo "myFunc(".$myJSON.");";
  ?>

Результат возвращает вызов функции с именем «myFunc» с данными JSON в виде параметр.

Убедитесь, что функция существует на клиенте.

Функция JavaScript

Функция с именем «myFunc» находится на клиенте и готова к обработке. Данные JSON:

Пример

 function myFunc(myObj) 
  {
  document.getElementById("demo").innerHTML = 
  myObj.name;
  }

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>

<script>
function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

<script src="demo_jsonp.php"></script>

</body>
</html>

Создание тега динамического сценария

В приведенном выше примере функция «myFunc» будет выполняться, когда страница будет открыта. загрузка зависит от того, куда вы поместили тег сценария, что не очень приятно.

Тег сценария следует создавать только при необходимости:

Пример

Создайте и вставьте тег <script> при нажатии кнопки:

 function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.php";
  document.body.appendChild(s);
  }

Попробуйте сами →

<!DOCTYPE html>
<html>

<body>

<h2>Click the Button.</h2>
<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with the JSON object as a parameter.</p>

<button onclick="clickButton()">Click me!</button>

<p id="demo"></p>

<script>
function clickButton() {
  let s = document.createElement("script");
  s.src = "demo_jsonp.php";
  document.body.appendChild(s);
}

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>

Динамический результат JSONP

Приведенные выше примеры все еще очень статичны.

Сделайте пример динамическим, отправив JSON в файл php, и позвольте файлу php возвращать объект JSON на основе информацию, которую он получает.

PHP-файл

 <?php
header("Content-Type: application/json; charset=UTF-8");
$obj = 
  json_decode($_GET["x"], false);
  
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  $result = $conn->query("SELECT name FROM 
  ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
  $outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>

Объяснение PHP-файла:

  • Преобразуйте запрос в объект с помощью функции PHP. json_decode().

  • Получите доступ к базе данных и заполните массив запрошенными данными.

  • Добавьте массив к объекту.

  • Преобразуйте массив в JSON, используя функция json_encode().

  • Оберните «myFunc()» вокруг возвращаемого объекта.

Пример JavaScript

Функция «myFunc» будет вызвана из файла php:

const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);

function myFunc(myObj) {
  let txt = "";
  for (let x in myObj) 
  {
    txt += myObj[x].name + "<br>";
  
  }
  document.getElementById("demo").innerHTML = txt;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with an object as a parameter.</p>
<p id="demo"></p>

<p>Try changing the table property from "customers" to "products".</p>

<script>
const obj = { table: "customers", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);

function myFunc(myObj) {
  let txt = "";
  for (let x in myObj) {
    txt += myObj[x].name + "<br>";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Функция обратного вызова

Если у вас нет контроля над файлом сервера, как получить файл сервера? вызвать правильную функцию?

Иногда файл сервера предлагает функцию обратного вызова как параметр:

Пример

Файл php вызовет функцию, которую вы передаете в качестве параметра обратного вызова:

let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>
<p id="demo"></p>

<script>
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);

function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>