Отправка данных с помощью JSONP

Полный исходный код JSONP с использованием NodeJS, Express и JavaScript. JSONP и сервер, ответ которого представляет собой вызов функции. Цитата из w3schools «JSONP — это метод для отправки данных JSON, не беспокоясь о проблемах кросс-домена.». Вот ссылка https://www.w3schools.com/js/js_json_jsonp.asp.

Это меня заинтересовало, и я захотел сделать это с помощью JavaScript.

JSONP

Нам понадобятся:

Клиент со скриптом:

<script src="/jsonp-static"></script>
Вход в полноэкранный режим Выход из полноэкранного режима

Сервер с маршрутом:

const app = require('express')();
app.get('/jsonp-static', (req, res) => {
  res.send(`jsonp({ data: 'data' })`);
});
Войти в полноэкранный режим Выход из полноэкранного режима

Что происходит?

Сценарий, нацеленный на запрос, который возвращает строку, являющуюся вызовом функции, пытается вызвать эту функцию на клиенте.

Если эта функция не существует на клиенте, мы получаем ошибку ссылки.

Получается, что мы «вызываем» клиентскую функцию с сервера. Этот вызов происходит, когда сценарий указывает на запрос, который возвращает строкоподобный вызов функции.

Возврат кода JavaScript с сервера

Код — это всего лишь текст. Мы можем передавать его как угодно. Как только скрипт получает код, он пытается его выполнить.

app.get('/js-code', (req, res) => {
  res.send(`
    console.log(
      'Hi there! A script <script src="js-code"></script> will run me'
    );
    function iCanDoAnything() {
      // i can add an element
      const body = document.getElementsByTagName('body')[0];
      const h1 = document.createElement('h1');
      h1.innerText = 'Daayum! I really can do anything.';
      body.appendChild(h1);
    }
    iCanDoAnything();
  `);
});
Войти в полноэкранный режим Выход из полноэкранного режима

Полный исходный код

Полный исходный код JSONP с использованием NodeJS, Express, JavaScript.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JSONP Client</title>
  </head>
  <body>
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->
    <!--  NOTE!                                                         -->
    <!--  TO RUN THE EXAMPLE, PLACE THIS FILE IN 'public' DIRECTORY!!!  -->
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->
    <!--  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  -->

    <!--  The definition of a function that our server calls.  -->
    <script>
      // Try commenting out the function
      // The script with src="jsonp-static" throws ReferenceError jsonp
      function jsonp(data) {
        console.log(data);
      }
    </script>

    <!--  Request a server to call our function with the data.  -->
    <script src="jsonp-static"></script>

    <!--  Inspect the server response.  -->
    <script>
      // SyntaxError
      // JSON.parse: unexpected character at line 1 column 1 of the JSON data
      fetch('jsonp-static')
        .then((res) => res.json())
        .then(console.log)
        .catch(console.error);

      // Read raw response from the stream because res.json() throws an error
      fetch('jsonp-static')
        .then((res) => res.body.getReader())
        .then((reader) => {
          let res = '';
          let decoder = new TextDecoder();

          // Parse data from the stream
          return reader.read().then(function readStream({ value, done }) {
            res += decoder.decode(value);

            // Keep reading data until we are done, then return data
            if (done) return res;
            else return reader.read().then(readStream);
          });
        })
        .then(console.log)
        .catch(console.error);
    </script>

    <!--  The code received from the server should run.  -->
    <script src="js-code"></script>
  </body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима

server.js

const express = require('express');
const { join } = require('path');
const app = express();

// NOTE!!!
// This is a gist, we can't use directories here.
// Make sure to place index.html in the 'public' directory.
app.use(express.static('public'));

app.get('/jsonp-static', (req, res) => {
  res.send(`jsonp({ foo: 'foo' })`);
});

app.get('/js-code', (req, res) => {
  res.send(`
    console.log(
      'Hi there! A script <script src="js-code"></script> will run me'
    );
    function iCanDoAnything() {
      // i can add an element
      const body = document.getElementsByTagName('body')[0];
      const h1 = document.createElement('h1');
      h1.innerText = 'Daayum! I really can do anything.';
      body.appendChild(h1);
    }
    iCanDoAnything();
  `);
});

app.listen(3000, () => console.log('server: http://localhost:3000'));
Войти в полноэкранный режим Выйти из полноэкранного режима

package.json

{
  "version": "0.1.0",
  "name": "jsonp",
  "description": "Send data using html script tags",
  "author": "Kostic Srecko",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/srele96/sk-experiments.git"
  },
  "bugs": {
    "url": "https://github.com/srele96/sk-experiments/issues"
  },
  "scripts": {
    "start": "nodemon server"
  },
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.18"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Ссылки

  • https://gist.github.com/srele96/a512f155218cf7e9482ad7d3cc673b63
  • https://gist.github.com/srele96/40505f053bdd9ce45701cfe1dd74e9e7
  • https://gist.github.com/srele96/3441d42c1380ea0f161d54fa730bb2a8
  • https://gist.github.com/srele96/c5fd139d87960b4f7a884e046aebe994

Больше экспериментов в моем репозитории GitHub

  • https://github.com/srele96/sk-experiments

Оцените статью
devanswers.ru
Добавить комментарий