###前提・実現したいこと
勉強のためajax
を使った実装をしようと、 http://zipcloud.ibsnet.co.jp/doc/api を使っているのですが、これをネイティブなJavaScript
の記述でajax
通信を行いたいです。
###発生している問題・エラーメッセージ
jQuery
のajax
で記述した場合は問題なく通信を完了できますが、ネイティブなJavaScript
記述では下記のようなエラーがconsole
に表示されます。
No 'Access-Control-Allow-Origin' header is present on the requested resource.
###該当のソースコード
javascript
1※一部抜粋(jQuery記述、問題なく通信できる) 2$.ajax({ 3 url: 'http://zipcloud.ibsnet.co.jp/api/search', 4 dataType: 'jsonp', 5 data: { 6 zipcode: 7830060 7 } 8}) 9.done(function(data) { 10 // 成功時の処理 11}) 12.fail(function() { 13 alert('通信エラー'); 14});
上記のようにjQuery
で記述した場合は問題なくデータが返ってきます。
javascript
1※一部抜粋(JavaScript記述、consoleにエラーが表示される) 2var req = new XMLHttpRequest(); 3if (req) { 4 req.onreadystatechange = function() { 5 if (req.readyState === 4 && req.status === 200) { 6 // 成功時の処理 7 } 8 }; 9 req.open('GET', 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060'); 10 req.send(null); 11}
一方で上記のようにネイティブなJavaScript
で記述した場合は上記に示したようなエラーconsole
に表示されます。
jQuery
記述では問題ないのにネイティブなJavaScript
だとデータが返ってこない。
ということが理解できておらず、なぜネイティブなJavaScript
記述だとダメなのか?
書き方が良くない箇所があれば教えていただきたいのと、そもそもダメならなぜダメなのか教えていただきたく...
すみませんが、よろしくお願いします。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/27 15:22