Ajax通信のテンプレ

jqXHR.done()、jqXHR.fail()、jqXHR.always()を使用して、
JSON、JSONPからデータを取得するテンプレ

myjson.com
http://myjson.com/
ダミーのJSONデータをつくれるサイト

JSON

デモ：http://mo49.tokyo/qiita/20160819/method_json.html

文字列を取得

//AJAX通信(ver1.8...)
const request = $.ajax({
  type: 'POST',      //GET,POST
  data:{             //Dataプロパティはデータを送信（渡す）役目
    id: 1,
    mode: 'hoge',
    type: 'entry',
    sleep: 0         //Timeoutテスト用
  },
  url: "./method_json.php",
  async:true,        //非同期=true・同期=false（非推奨）
  cache:false,       //初期値はtrueでキャッシュする状態
  dataType: 'json',  //text, html, xml, json, jsonp, script
  timeout: 3000
});

request.done((data, textStatus) => {
  const len = data.length;
  for(let i=0; i<len; i++){
    $("body").append('<p>'+'id : ' + data[i].id + '<br>' + 'mode : ' + data[i].mode+ '<br>' + 'type : ' + data[i].type + '<br>' + 'date : ' + data[i].date +'</p>');
  }
  $("#ajax_status").text("通信完了！");
});

request.fail((jqXHR, textStatus, errorThrown) => {
  console.dir("----fail.----");
  console.dir("fail-jqXHR"+jqXHR);             //オブジェクト
  console.dir("fail-textStatus:"+textStatus);  //通信ステータス
  console.dir("fail-errorThrown"+errorThrown); //エラーメッセージ
});

request.always((data, textStatus) => {
  console.dir("----always.----");
  console.dir("always-data:"+data);              //データ
  console.dir("always-textStatus:"+textStatus);  //通信ステータス
});

method_json.php

<?php
//POSTパラメータを取得
$id = $_POST["id"];
$mode = $_POST["mode"];
$type = $_POST["type"];
$sleep = $_POST["sleep"];
$date = date("Y-m-d H-i-s");
sleep($sleep); //Timeoutテスト用
//受け取ったデータをjson形式で出力
$json = '[
	{
		"id" : "'.$id.'",
		"mode" : "'.$mode.'",
		"type" : "'.$type.'",
		"date" : "'.$date.'"
	}
]';
echo $json;

?>

JSONP

デモ：http://mo49.tokyo/qiita/20160819/method_jsonp.html

jsonpCallbackでコールバック関数を指定している点がポイント。

画像を取得

//AJAX通信(ver1.8...)
const request = $.ajax({
  type: 'POST',       //GET,POST
  data:{              //Dataプロパティはデータを送信（渡す）役目
    sleep: 0          //Timeoutテスト用
  },
  url: "method_jsonp.php",
  async:true,         //非同期=true・同期=false
  cache:false,        //初期値はtrueでキャッシュする状態
  dataType: 'jsonp',  //text, html, xml, json, jsonp, script
  jsonpCallback: 'jsonp_data', // callbackname jsonp側と合わせる
  timeout: 3000
});

request.done((data, textStatus) => {
  // パース処理
  const len = data.length;
  for(let i=0; i<len; i++){
    $(".wrapper").append('<p class=".single-item"><img src="'+data[i].src + '" alt='+data[i].alt+'></p>');
  }
  $("#ajax_status").text("通信完了！");
});

request.fail((jqXHR, textStatus, errorThrown) => {
  console.dir("----fail.----");
  console.dir("fail-jqXHR"+jqXHR);             //オブジェクト
  console.dir("fail-textStatus:"+textStatus);  //通信ステータス
  console.dir("fail-errorThrown"+errorThrown); //エラーメッセージ
});

request.always((data, textStatus) => {
  console.dir("----always.----");
  console.dir("always-data:"+data);              //データ
  console.dir("always-textStatus:"+textStatus);  //通信ステータス
});

method_jsonp.php

<?php
//POSTパラメータを取得
$sleep = $_POST["sleep"];
sleep($sleep); //Timeoutテスト用

$jsonp = '
jsonp_data(
  [
    {
      "src":"img/img1.JPG",
      "alt":"サモトラケのニケ"
    },
    {
      "src":"img/img2.JPG",
      "alt":"入り口ピラミッド"
    },
    {
      "src":"img/img3.JPG",
      "alt":"ナポレオン戴冠式"
    }
  ]
);
';

echo $jsonp;

?>