javascriptでjsonpデータを受け取りたい(zipcloud 郵便番号)

###前提・実現したいこと
javascriptでapiを使って簡単なサイトを作ってみようとしたのですが、どうやらjsonpデータを受け取れていないようです。
jQueryでコーディングした場合はできましたので、zipcloud自体には問題はないはずです（当たり前ですが）

簡単なサイトとは具体的には、郵便番号を入力し、それに対応する住所をapiを使って持って来て、それを表示するというものです。

###発生している問題・エラーメッセージ
コンソールに表示されたエラー

js1.js:12 GET https://zipcloud.ibsnet.co.jp/api/search?zipcode=113-0043&callback=jsonData net::ERR_CONNECTION_CLOSED
(anonymous) @ js1.js:12

###該当のソースコード

html
1<DOCTYPE html>
2<html>
3	<head>
4		<link rel="stylesheet" href="stylesheet.css" type="text/css">
5		<script type="text/javascript" src="js1.js"></script>
6	</head>
7		<body>
8			<h3>Address Search</h3>
9			<label>Postal Code<input id="postalcode" type="text" 
10			size="13" maxlength="8" placeholder="example: xxx-xxxx"></label>
11			<button id="btn">Search</button>
12			<div id="result">
13				<p><label>Prefectures<input id="pref" type="text" size="6"></label></p>
14				<p><label>Cities<input id="city" type="text" size="6"></label></p>
15				<p><label>Street address<input id="saddress" type="text"></label></p>
16			</div>
17		</body>
18</html>

javascript
1document.addEventListener("DOMContentLoaded", function () {
2var btn = document.getElementById('btn');
3btn.addEventListener('click', function() {
4	var postalcode = document.getElementById('postalcode');
5	var pref = document.getElementById('pref');
6	var city = document.getElementById('city');
7	var address = document.getElementById('saddress');
8	var script = document.createElement('script');
9	
10	script.src = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
11	+ postalcode.value + "&callback=jsonData";
12	document.body.appendChild(script);
13	document.body.removeChild(script);
14})
15})
16
17function jsonData(data) {
18	pref.value = data.result[0].address1;
19	city.value = data.result[0].address2;
20	address.value = data.result[0].address3;
21}

css
1#result {
2	margin-top: 30px;
3}

###補足情報(言語/FW/ツール等のバージョンなど)
コードは上から順に
sample.html
js1.js
stylesheet.css
となっております。

回答よろしくお願いします。

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

回答3件

きちんとjsonpの仕様を理解されていますか？

jsonp自体json風の文字列がコールバックに渡せる形で文字列としてかえってくる仕組みですから
apiの挙動はブラウザにダイレクトにurlを打ち込んでコールバック付きのjson風データが
表示されるかどうかで判断できます。

投稿2017/11/06 13:17

yambejp

総合スコア116481

setsu_tenhou

2017/11/07 00:35

回答どうもありがとうございます。簡単にjsonpについて調べただけでしたので、きちんと理解していない部分も多かったと思います。直接打ち込んでみたところjson風データが表示されました。参考になりました。

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

下記としてみました。
郵便番号検索APIが結果を返さないのは、_hiroさんもご指摘のように、該当のAPIはhttpsに対応していないためのようです。

html
1<!DOCTYPE html>
2<html>
3   <head>
4      <title>Address Search</title>
5      <style>
6#result {
7   margin-top: 30px;
8}
9      </style>
10      <script>
11document.addEventListener("DOMContentLoaded", function () {
12   const btn = document.getElementById('btn');
13   btn.addEventListener('click', function() {
14      const postalcode = document.getElementById('postalcode');
15      const script = document.createElement('script');
16
17      script.src = "http://zipcloud.ibsnet.co.jp/api/search?zipcode="
18         + postalcode.value + "&callback=jsonData";
19      document.body.appendChild(script);
20      document.body.removeChild(script);
21   });
22});
23
24function jsonData(data) {
25   if (data.results) {
26      const pref = document.getElementById('pref');
27      const city = document.getElementById('city');
28      const address = document.getElementById('saddress');
29
30      pref.value = data.results[0].address1;
31      city.value = data.results[0].address2;
32      address.value = data.results[0].address3;
33   }
34}
35      </script>
36   </head>
37   <body>
38      <h3>Address Search</h3>
39      <p>
40         <label for="postalcode">Postal Code: </label>
41         <input id="postalcode" type="text" size="13" maxlength="8" placeholder="example: xxx-xxxx">
42         <button id="btn">Search</button>
43      </p>
44      <div id="result">
45         <p><label for="pref">Prefectures: </label><input id="pref" type="text" size="6"></p>
46         <p><label for="city">Cities: </label><input id="city" type="text" size="16"></p>
47         <p><label for="saddress">Street address: </label><input id="saddress" type="text" size="16"></p>
48      </div>
49   </body>
50</html>