logo

Jak používat Jsonp ve vašem projektu.

Poprvé jsem o JSONP slyšel, když jsem dostal technický posudek pro špičkovou společnost.
Když jsem to viděl, hned mě napadlo:co to je? proč to používáme? jak to funguje? a jak mohu použít JSONP ve svém projektu.
Takže zde sdílím odpověď na všechny tyto otázky na jednom místě!

Co je JSONP?

JSONP (JSON with Padding) je zápis objektů javascript slouží k načtení dat ze serveru pomocí skriptového tagu <script> spíše než XMLHttpRequest.

Proč jej používáme?

Krátká odpověď je, že se používá, aby se předešlo problémům s Cross-Origin-Resource-Policy.
Zatímco zásada corss-domain blokuje přístup k souborům, umožňuje přístup ke skriptům z jiné domény. JSONP to používá k přístupu k datům prostřednictvím značky skriptu.

Aby toho bylo dosaženo, jsou objekty JSONP zabaleny do funkce zpětného volání. 


//JSON Example
{"Name": "Foo", "Id": 1234, "Rank": 7};

//JSONP Example - In this you can call a function
functionCall({"Name": "Foo", "Id": 1234, "Rank": 7});

Jak to funguje?

  1. Klient (obvykle JavaScript) musí poskytnout funkci zpětného volání, do které se data později přenesou spolu s dalšími daty, která chce klient odeslat.

  2. Přenos dat je vyvolán na klientovi formulováním volání skriptu. Je zadáno URL webové služby na serveru doplněné o název funkce zpětného volání. Hotový "script" tag pak musí být vložen do DOM (Domain Object Model). Tento proces se nazývá „vložení značky skriptu“ a spouští přenos dat.

  3. Webová služba na straně serveru převezme data, extrahuje název funkce zpětného volání a použije je k ohraničení dat serveru pomocí příslušného volání funkce, když jsou odeslána zpět.

  4. Prohlížeč obdrží odpověď serveru zpět ve formě skriptu a okamžitě začne skript spouštět. Vzhledem k tomu, že skript sestává z volání funkce, je volána funkce "callback" a ta přijímá data jako parametr.

Jak mohu použít JSONP ve svém projektu?

Javascript:


async () => {
    const jsonpCallback = "<CALLBACK_FUNCTION_NAME>";
    const response = await fetchJsonp(`<API_URL>`, {
      jsonpCallback,
    });
    const data = await response.json();
    return data;
  }

Konečně

Doufám, že vám tento článek pomohl,