Ajaxで外部APIに通信する方法がうまくいかない

現在Ajaxを勉強中で、外部APIに通信する方法を以下のサイトを参考にして勉強しています。

http://javatechnology.net/ajax/http-basic/

URLの部分を変更し、「http://www.ekidata.jp/api/p/20.json」とし、駅データ.jpのサイトのデータを取得しようと思いました。

しかし、ダイアログにNGと表示されてしまいます。
駅データのURLへアクセスするとjsonデータが表示されているので、URLは問題ないのかなと思っているのですが。

なぜdataが取得できずNGとなってしまうでしょうか？

もしわかる方がいればよろしくお願いします。

以下が実際のコードです。

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8" content="">
5<title>AjaxでHTTP通信を行う</title>
6<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
7<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
8<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
9
10<!-- スクリプト部分 -->
11<script type="text/javascript">
12$( function() {
13$( '#ajax-button' ) .click(
14function() {
15$.ajax({
16url: 'http://www.ekidata.jp/api/p/20.json',
17type:'GET',
18dataType: 'jsonp',
19timeout:1000,
20success: function(data) {
21alert("ok");
22},
23error: function(data) {
24alert("ng");
25}
26});
27});
28} );
29</script>
30
31</head>
32
33<!-- HTML部分 -->
34<body>
35
36<h1>AjaxでHTTP通信を行う（超シンプルバージョン）</h1>
37<p><input type="button" id="ajax-button" value="click" /> <br />
38
39</body>
40</html>

行動規範の内容に同意します

回答2件

ベストアンサー

APIから返ってくるデータがjsonpでもjsonでもなくJavaScriptのようなので、
dataType等をそれに準じて指定する必要があります。
以下のような感じで取得できると思います。

JavaScript
1$.ajax({
2	url: 'http://www.ekidata.jp/api/p/20.json',
3	type:'GET',
4	dataType: 'script',
5	timeout:1000,
6	success: function(data, dataType) {
7		alert("ok");
8		console.log("ok", xml.data);
9	},
10	error: function(XMLHttpRequest, textStatus, errorThrown) {
11		alert("ng");
12		console.log("ng", XMLHttpRequest, textStatus, errorThrown);
13	}
14});