ohtamomoko
@ohtamomoko

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

JSONとJSONPって何が違うの?

解決したいこと

JSONPとJSONの違いが分かりません。JSONPに対応してないJSONのAPIというのはあるんですか?JSONのAPIでJSONPに対応してない場合サーバー上にあげると機能しなくなるのですka
?
JavascriptでこのAPIを使いたいのですが。https://dog.ceo/dog-api/breeds-list
このAPIはJSONPなのか分かりません。

例)
Ruby on RailsでQiitaのようなWebアプリをつくっています。
記事を投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。

発生している問題・エラー

出ているエラーメッセージを入力

例)

NameError (uninitialized constant World)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

ソースコードを入力

例)

def greet
  puts Hello World
end

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

0

5Answer

JSONPとJSONの違いが分かりません。

JSON は JavaScript Object Notation のことで、JavaScript オブジェクトをシリアライズした結果の文字列です。詳しくは JSON の紹介 を見てください。

JSONP とは JSON with Padding の略で、script タグを使用してクロスドメインでデータを取得する仕組みです。詳しい説明は割愛します。今回の質問者さんのケースでは関係ないので。(知りたかったら新たに別のスレッドを立てて質問してください)

JavascriptでこのAPIを使いたいのですが。 https://dog.ceo/dog-api/breeds-list このAPIはJSONPなのか分かりません。

そのサイトの [Fetch!] ボタンをクリックした時の応答のことを言っているのだと思いますが、それは JSON です。

そのサイトは CORS 対応していますので、例えばクロスドメインから以下のようなスクリプトで要求すると、

const test = async () => {
    let response = await fetch("https://dog.ceo/api/breed/affenpinscher/images/random");
    if (response.ok) {
        const data = await response.json();
        console.log(data);
    }
}

以下の様な要求・応答となり、(応答ヘッダに Access-Control-Allow-Origin: * が含まれている点に注目)

json1.jpg

上のスクリプトの console.log(data); 結果をブラウザのディベロッパーツールで見た時の log は以下の通りとなり、期待通りデータを取得できるのが分かります。

json2.jpg

5Like

Comments

  1. @ohtamomoko

    Questioner

    ありがとうございます。コードのところはちょっとよくわかんないとこもあったけどJSONのことわかりました。

  2. コードのところはちょっとよくわかんないとこもあった

    コードは、JavaScript を使って  https://dog.ceo/api/breed/affenpinscher/images/random という url に要求を出し、返ってきた応答(JSON 文字列)を JavaScript オブジェクト(コードでは data が該当)として取得しているものです。

    それをクロスドメインで行うと、サーバー側で CORS 対応してない場合、データーはサーバーからは送られてくるものの、ブラウザで取得できないのです。

    疑問が解消したならこのスレッドはクローズ願います。

  3. @ohtamomoko

    Questioner

    クロスドメインから要求するってどういうことですか?

  4. クロスドメインから要求するってどういうことですか?

    あなたの別のスレッドの画像を例にとると、

    crossdomain.jpg

    127.0.0.1:5500 というドメインから、それとは異なるドメイン image.dog.ceo に要求を出すということです。

    注: 今回は追加質問に気が付いたので答えましたが、いつもはクローズされたスレッドは自分は見てないので、質問されても返事できません。その場合は悪しからず

https://dog.ceo/api/breed/affenpinscher/images/randomでGet要請すればいいと思います。

jsonとjsonpは要請の方式が違います。
jsonはserverに要請しますが、jsonpは要請したsiteではなく特定のsiteで要請する形になります。
jsonpは古い方式なので使う時script injectionの危険があります。

たぶんこんな形になります。

<script src="https://example.com/data?callback=myCallback"></script>
2Like

JSONPに対応してないJSONのAPIというのはあるんですか?

はい。

JSONのAPIでJSONPに対応してない場合サーバー上にあげると機能しなくなるのですka
?

CORSを考慮しないといけません。

このAPIはJSONPなのか分かりません。

JSONPではなさそうです。

1Like

JSONPとJSONの違い

JSONP は text/javascript です。 JSON は application/json です。
前者は 読み込んだ javascript を実行して、指定したコールバックを実行します。 後者は 文字列をパースしてオブジェクトを取得します。

以上。

1Like

いつものAIが投稿した質問なんだろうけどそのAPIを呼んでJSON形式で返してきたならJSON形式のAPIでJSONP形式で返してきたならJSONP形式のAPI

APIの呼び方がわからない?
ブラウザのurl部分に入力したら呼べるよね?

1Like

Your answer might help someone💌