Ajaxによるドメイン設定

　Ajax通信する時、自分のファイルではなく違うドメインからもファイルを読み込みたい時に問題となるのが、クロスドメイン制約である。クロスドメイン制約とは、ブラウザの機能であり、閲覧しているページのドメイン以外のドメインからはAjax通信をさせないという機能である。 　以下に、自分が行ったクロスドメイン設定を載せておく。

<!-- ブラウザ側の処理
WordPressにAjax通信のリクエストを投げる-->

 <!-- jQueryのCDNを使ったjQueryファイルの読み込み -->
 <!-- （１）JQueryを設定しよう -->
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <!-- (2)jquery.xdomainajax.jsを設定しよう　-->
 <script type="text/javascript" src="jquery.xdomainajax.js"></script>

<script> var wp_url_admin_ajax = 'http://hosokawa.local/wp-admin/admin-ajax.php'; </script>

<script>function createMarker(lat, lng){
 //        マーカーの作成
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map
          });
      }
</script>

<script>
//Ajaxに処理の合図を出す
jQuery(function($) {
  $.ajax({
    type: "POST",
    // （３）JQueryの$.ajaxに「crossDomain: true」のオプションを設定しよう
    crossDomain: true,
    url: wp_url_admin_ajax,
    data: {
      action: "tell_me"
    },
    //受け取ったJSONファイルをもとに戻してブラウザに渡す
    success: function(response) {
      json = eval("(" + response + ")");
      var date = JSON.parse(response);

      for (i = 0; i < data.length; i++) {
        create_marker(date[i].Latitude, date[i].Longitude);
      }
      if (json.err) {
            result = "error:404"; //読み込みに失敗したらerror404と表示するようにする
          } else {
            console.log(response);
          }
        }
      });
    });
    </script>