JavaScript学習日記その0004 jQueryの$.ajaxでjsonpを取得する

参考にさせて頂いたページ

今回これを参考に動かしてみた

jQuery.ajaxでphpから出力したjsonpを扱った時のメモ | ミラボ

jsonpって何なのか

はじめに

ドメインが違うサーバーから、オブジェクトのデータを取得したい場合はdataTypeをjsonpにするんだけど、「jsonpって何？jsonとどう違うの？」っていう感じだったのと、$.ajaxに渡すオプションをどのように設定したら良いのかわからなかったので、実際に試してみた。

jsonp-sample__api.phpの作成とその記述内容

例として以下の通り。

<?php
$jsonArray = array(
  "hoge" => "ほげ",
  "foo" => "ふー"
);
header('Content-Type: text/javascript; charset=utf-8');
echo sprintf("callback(%s)",json_encode($jsonArray));

jsonp-sample__page.htmlの作成とその記述内容

例として以下の通り。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jsonp-sample__page.html</title>
</head>
<body>

<h1>jsonp-sample__page.html</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$.ajax({
  url: 'https://hoge.jp/jsonp-sample__api.php',
  type: 'GET',
  dataType : 'jsonp',
  jsonpCallback: 'callback'
}).done(function(data){
  console.log('doneです');
  console.log(data);
}).fail(function(err){
  console.log('failです');
  console.error(err);
});
</script>
</body>
</html>

jsonp-sample__api.phpにブラウザでアクセスしてみる

callback({“hoge”:“\u307b\u3052”,“foo”:“\u3075\u30fc”})

という文字列が表示される。

jsonp-sample__page.htmlにブラウザでアクセスしてみる

デバロッパーツールでconsoleを確認した。

このソースについて

jsonp-sample__api.phpではcallback(オブジェクト)という文字列を出力するような感じに記述している。

非同期でこのjsonp-sample__api.phpにリクエストすることで、この文字列を受け取る。

上記のcallbackという関数名は、$.ajaxに渡すオプションのjsonpCallbackで設定した文字列と同じにするので任意の関数名にできるんだけど、検索してみるとcallbackという関数名にするのが一般的みたい。

$.ajax実行時には以下の4つのキーが最低限必要だと思う。

url
type
dataType
jsonpCallback

$.ajax実行時に上記のようなオプションを適切に渡していれば、doneでは特に何かを意識することなく、普通のjsonがreturnされたときのように処理すれば良い。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。