マッシュアップ入門　ATNDのデータ取得

2014年3月13日 2014年7月11日

mikaduki

流行のAJAXをやってみた。
人のデータ使ってごちゃごちゃやれるなんて素晴らしいと思ったので。
エラー連発でだいぶ嫌な気分になったのですが、一応できました。
何の役にも立たないツール。

XMLHttpRequest cannot load

よく分からないのですが、ずっとエラーが出てました。
普通にURLを取得しようとすると、

XMLHttpRequest cannot load https://api.atnd.org/events/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://hoge.info' is therefore not allowed access.

ってエラーが出て困ります。

とりあえずエラーメッセージでググる。
何処のサイト見ても大体このように書いてある、

Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

上記をヘッダー情報に追加すればいいと。
なるほどと、.htaccessに追加するけど、やっぱり無理。
setのとこがappendとかだったりするので変えたりしてみるけどやっぱ無理。

似たようなサイト作ってるコードを参考にした。

datatypeの指定をしていた。jsonpって指定をしてた。

こいつかなーと思って、それに倣ってコードをちょっと変更してみたら、
上手く行ったのであった。よくわがらんけど、なんか上手く行った。

実際のコード

$(function(){

var url = 'https://api.atnd.org/events/?format=jsonp'; 
    $.ajax({
    type: 'post',
    url : url,
    dataType: 'jsonp',　//後はデータタイプの指定。
    data: "keyword=愛知県&keyword_or=wordpress&count=50",　
        success:function(data)
        {
            eleset(data);　//ここまででデータ取得は完了
        },
   

    });




});

なんか釈然としない。あのヘッダに書き込む奴はなんなんだと。