回答編集履歴
6
編集
answer
CHANGED
|
@@ -45,6 +45,8 @@
|
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
以下以前の回答。お恥ずかしい限りです。
|
|
48
|
+
|
|
49
|
+
<以前の回答>
|
|
48
50
|
#
|
|
49
51
|
|
|
50
52
|
まさか、`#a`が表す要素がなかったとかそんなオチじゃないでしょうね？
|
|
@@ -205,4 +207,6 @@
|
|
|
205
207
|
|
|
206
208
|
- [クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://www.slideshare.net/mobile/kitfactory/web-api-34814937)
|
|
207
209
|
|
|
208
|
-
- [Ajaxのjsonp・callbackの仕組みについて解説します。](http://javatechnology.net/ajax/jsonp-callback/)
|
|
210
|
+
- [Ajaxのjsonp・callbackの仕組みについて解説します。](http://javatechnology.net/ajax/jsonp-callback/)
|
|
211
|
+
|
|
212
|
+
</以前の回答>
|
5
真の解法の発見
answer
CHANGED
|
@@ -1,3 +1,52 @@
|
|
|
1
|
+
# 真・解法の発見
|
|
2
|
+
|
|
3
|
+
散々追記した後になって初めて質問者様に挙げていただいた[1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法](https://iwb.jp/jquery-ajax-jsonp/)を読み、さらにもうすでにクロスドメインについてこの記事で記述されていることに気づきショックを受けた上で、ようやく解法を見つけたので、上に載せます。何度も何度も追記してごめんなさい。一気にしろって感じですよね(^ ^;
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<!DOCTYPE html>
|
|
7
|
+
<html>
|
|
8
|
+
<head>
|
|
9
|
+
<meta charset="UTF-8">
|
|
10
|
+
<title>107356</title>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
<table id="a" border=1>
|
|
14
|
+
<tr>
|
|
15
|
+
<th>version</th>
|
|
16
|
+
<th>codename</th>
|
|
17
|
+
</tr>
|
|
18
|
+
</table>
|
|
19
|
+
|
|
20
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
21
|
+
<script>
|
|
22
|
+
$.ajax({
|
|
23
|
+
type: 'GET',
|
|
24
|
+
url: 'https://iwb.jp/s/js/data.jsonp',
|
|
25
|
+
jsonpCallback: 'android',
|
|
26
|
+
dataType: 'jsonp'
|
|
27
|
+
}).then(
|
|
28
|
+
function(json){
|
|
29
|
+
var a = $("#a");
|
|
30
|
+
json.forEach(function(val){
|
|
31
|
+
a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
|
|
32
|
+
});
|
|
33
|
+
},
|
|
34
|
+
function(a,b,c){ // ここテキトーに書いてますので真に受けないでください。
|
|
35
|
+
alert('ERROR');
|
|
36
|
+
alert(a.status);
|
|
37
|
+
alert(b);
|
|
38
|
+
alert(c);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
</script>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
以下以前の回答。お恥ずかしい限りです。
|
|
48
|
+
#
|
|
49
|
+
|
|
1
50
|
まさか、`#a`が表す要素がなかったとかそんなオチじゃないでしょうね？
|
|
2
51
|
|
|
3
52
|
```html
|
4
一部訂正
answer
CHANGED
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
|
|
44
44
|
ローカルサーバーを立ち上げた場合はもちろん、ローカルファイル(file://)からの実行でも同様のエラーが生じるみたいですね。html文書を介さずそのままアクセスする場合はこの限りでは無いのでしょう。
|
|
45
45
|
|
|
46
|
-
とりあえず、解決法としては本末転倒かもしれませんけど、[https://iwb.jp/s/js/data.json](https://iwb.jp/s/js/data.json)の先にあるjsonファイルをローカルサーバーに置き、ローカルサーバーにアクセスさせるしかないような気がします。
|
|
46
|
+
~~とりあえず、解決法としては本末転倒かもしれませんけど、[https://iwb.jp/s/js/data.json](https://iwb.jp/s/js/data.json)の先にあるjsonファイルをローカルサーバーに置き、ローカルサーバーにアクセスさせるしかないような気がします。~~
|
|
47
47
|
|
|
48
|
-
または先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。
|
|
48
|
+
~~または~~先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。
|
|
49
49
|
|
|
50
50
|
##検証用コード
|
|
51
51
|
|
|
@@ -141,4 +141,19 @@
|
|
|
141
141
|
httpd.serve_forever()
|
|
142
142
|
```
|
|
143
143
|
|
|
144
|
-
このまま実行するとおそらくreturn_json.pyに実行権限がないために`403 forbidden error`になりますので、return_json.pyに実行権限を付けてから実行してみてください。m(_ _)m
|
|
144
|
+
このまま実行するとおそらくreturn_json.pyに実行権限がないために`403 forbidden error`になりますので、return_json.pyに実行権限を付けてから実行してみてください。m(_ _)m
|
|
145
|
+
|
|
146
|
+
#
|
|
147
|
+
|
|
148
|
+
2018/1/13(土)追記:
|
|
149
|
+
|
|
150
|
+
`jsonp`という指定方法があるみたいですね。
|
|
151
|
+
[dendenmushi様の次の質問](https://teratail.com/questions/108809)のおかげで知ることができました。ありがとうございます。m(_ _)m
|
|
152
|
+
|
|
153
|
+
適当なこと(取り消し線内部)を書いて勝手に決めつけてかかりすみません…(本質問2回目の失敗…(^ ^;)
|
|
154
|
+
|
|
155
|
+
以下適当に検索をかけてヒットしたサイトです。この回答を見た人のために一応載せるという感じで特に意味はないです。
|
|
156
|
+
|
|
157
|
+
- [クロスドメインアクセスを理解してWeb APIを楽しく使おう](https://www.slideshare.net/mobile/kitfactory/web-api-34814937)
|
|
158
|
+
|
|
159
|
+
- [Ajaxのjsonp・callbackの仕組みについて解説します。](http://javatechnology.net/ajax/jsonp-callback/)
|
3
ミスの編集、他
answer
CHANGED
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
|
|
48
48
|
または先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。
|
|
49
49
|
|
|
50
|
-
##
|
|
50
|
+
##検証用コード
|
|
51
51
|
|
|
52
52
|
ディレクトリ構成
|
|
53
53
|
|
|
54
54
|
/
|
|
55
|
-
┣
|
|
55
|
+
┣ cgi-bin/
|
|
56
56
|
┃ ┣ data.json
|
|
57
57
|
┃ ┗ return_json.py
|
|
58
58
|
┣ index.html
|
2
追記
answer
CHANGED
|
@@ -33,4 +33,112 @@
|
|
|
33
33
|
</html>
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
私の環境ではこれでうまくいきましたがどうでしょうか？
|
|
36
|
+
私の環境ではこれでうまくいきましたがどうでしょうか？(※注 追記: コメント欄みてください。m(_ _)m)
|
|
37
|
+
|
|
38
|
+
##追記
|
|
39
|
+
|
|
40
|
+
私はサーバーには全く明るく無いのですけど、原因がわかりましたので追記させてください。
|
|
41
|
+
|
|
42
|
+
`クロスドメイン制約`(参考:[【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita](https://qiita.com/growsic/items/a919a7e2a665557d9cf4))が今回の諸悪(むしろ悪いのは我々ですが笑)の根源のようです。
|
|
43
|
+
|
|
44
|
+
ローカルサーバーを立ち上げた場合はもちろん、ローカルファイル(file://)からの実行でも同様のエラーが生じるみたいですね。html文書を介さずそのままアクセスする場合はこの限りでは無いのでしょう。
|
|
45
|
+
|
|
46
|
+
とりあえず、解決法としては本末転倒かもしれませんけど、[https://iwb.jp/s/js/data.json](https://iwb.jp/s/js/data.json)の先にあるjsonファイルをローカルサーバーに置き、ローカルサーバーにアクセスさせるしかないような気がします。
|
|
47
|
+
|
|
48
|
+
または先に挙げたQiitaの記事にあるようにブラウザ側の設定を変える(というよりは違うモードで起動する)というのも手かもしれません。
|
|
49
|
+
|
|
50
|
+
##
|
|
51
|
+
|
|
52
|
+
ディレクトリ構成
|
|
53
|
+
|
|
54
|
+
/
|
|
55
|
+
┣ cgj-bin/
|
|
56
|
+
┃ ┣ data.json
|
|
57
|
+
┃ ┗ return_json.py
|
|
58
|
+
┣ index.html
|
|
59
|
+
┗ server.py
|
|
60
|
+
|
|
61
|
+
data.json
|
|
62
|
+
|
|
63
|
+
```json
|
|
64
|
+
[
|
|
65
|
+
{
|
|
66
|
+
"version": "1.5",
|
|
67
|
+
"codename": "Cupcake"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"version": "1.6",
|
|
71
|
+
"codename": "Donut"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"version": "4.4",
|
|
75
|
+
"codename": "KitKat"
|
|
76
|
+
}
|
|
77
|
+
]
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
return_json.py
|
|
81
|
+
|
|
82
|
+
```python
|
|
83
|
+
#!/usr/bin/env python
|
|
84
|
+
# -*- coding: UTF-8 -*-
|
|
85
|
+
|
|
86
|
+
with open('data.json') as f:
|
|
87
|
+
json = f.read()
|
|
88
|
+
|
|
89
|
+
print('Content-type: application/json\n')
|
|
90
|
+
print(json)
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
index.html
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<!DOCTYPE html>
|
|
97
|
+
<html>
|
|
98
|
+
<head>
|
|
99
|
+
<meta charset="UTF-8">
|
|
100
|
+
<title>107356</title>
|
|
101
|
+
</head>
|
|
102
|
+
<body>
|
|
103
|
+
<table id="a" border=1>
|
|
104
|
+
<tr>
|
|
105
|
+
<th>version</th>
|
|
106
|
+
<th>codename</th>
|
|
107
|
+
</tr>
|
|
108
|
+
</table>
|
|
109
|
+
|
|
110
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
111
|
+
<script>
|
|
112
|
+
$.ajax({
|
|
113
|
+
type: 'GET',
|
|
114
|
+
url: './cgi-bin/return_json.py',
|
|
115
|
+
dataType: 'json'
|
|
116
|
+
}).then(
|
|
117
|
+
function(json){
|
|
118
|
+
var a = $("#a");
|
|
119
|
+
json.forEach(function(val){
|
|
120
|
+
a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
|
|
121
|
+
});
|
|
122
|
+
},
|
|
123
|
+
function(){
|
|
124
|
+
alert('ERROR');
|
|
125
|
+
}
|
|
126
|
+
);
|
|
127
|
+
</script>
|
|
128
|
+
</body>
|
|
129
|
+
</html>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
server.py
|
|
133
|
+
|
|
134
|
+
```python
|
|
135
|
+
from http.server import HTTPServer, CGIHTTPRequestHandler
|
|
136
|
+
|
|
137
|
+
class Handler(CGIHTTPRequestHandler):
|
|
138
|
+
cgi_directories = ["/cgi-bin"]
|
|
139
|
+
|
|
140
|
+
httpd = HTTPServer(("", 8080), Handler)
|
|
141
|
+
httpd.serve_forever()
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
このまま実行するとおそらくreturn_json.pyに実行権限がないために`403 forbidden error`になりますので、return_json.pyに実行権限を付けてから実行してみてください。m(_ _)m
|
1
コードの編集
answer
CHANGED
|
@@ -8,7 +8,12 @@
|
|
|
8
8
|
<title>107356</title>
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
|
-
<
|
|
11
|
+
<table id="a" border=1>
|
|
12
|
+
<tr>
|
|
13
|
+
<th>version</th>
|
|
14
|
+
<th>codename</th>
|
|
15
|
+
</tr>
|
|
16
|
+
</table>
|
|
12
17
|
|
|
13
18
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
|
14
19
|
<script>
|
|
@@ -19,7 +24,7 @@
|
|
|
19
24
|
success: function(json){
|
|
20
25
|
var a = $("#a");
|
|
21
26
|
json.forEach(function(val){
|
|
22
|
-
a.append("<
|
|
27
|
+
a.append("<tr><td>" + val.version + "</td><td>"+ val.codename + "</td></tr>");
|
|
23
28
|
});
|
|
24
29
|
}
|
|
25
30
|
});
|