質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

4回答

557閲覧

ネイティブなJavaScriptのajax記述でうまく通信できません...

souta-haruran

総合スコア88

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2017/10/27 09:29

###前提・実現したいこと
勉強のためajaxを使った実装をしようと、 http://zipcloud.ibsnet.co.jp/doc/api を使っているのですが、これをネイティブなJavaScriptの記述でajax通信を行いたいです。

###発生している問題・エラーメッセージ
jQueryajaxで記述した場合は問題なく通信を完了できますが、ネイティブな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記述だとダメなのか?
書き方が良くない箇所があれば教えていただきたいのと、そもそもダメならなぜダメなのか教えていただきたく...

すみませんが、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

こうしてください

<script> function test(obj){ console.log(obj); } </script> <script src="http://zipcloud.ibsnet.co.jp/api/search?callback=test"></script>

投稿2017/10/27 11:20

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

souta-haruran

2017/10/27 15:22

> yambejpさん 端的にご教示いただきありがとうございます。 せっかくいただいたコードから何がどうなっているのかを自分でしっかり理解を深め、試してみたいと思います。
guest

0

ベストアンサー

jsonp では ピュアなJSでAPIリクエストをするメモ(jsonとjsonp)のように

js

1 var script = document.createElement('script'); 2 script.src = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060'; 3 window.instaCallbackFavorites = function(response) { 4 // reponseをhogehogeする 5 }; 6 document.body.appendChild(script);

というやり方のようです。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

はクロスオリジン制御のためサーバ側('http://zipcloud.ibsnet.co.jp/api/search)が
Access-Control-Allow-Origin ヘッダに取得側のドメインを追加しないといけません。

投稿2017/10/27 10:43

編集2017/10/27 10:47
kimurayu

総合スコア158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

souta-haruran

2017/10/27 15:20

> kimurayuさん 参考となるコードを記述いただきありがとうございます。 まだまだ勉強不足だと痛感していますが、しっかり理解するとともに参考コードのように試してみたいと思います。
souta-haruran

2017/10/30 01:31

> kimurayuさん いただいたサンプル通りの記述でうまくいきました。 今回の疑問に対してこの方法で解決できたという観点でベストアンサーとさせていただきました。 ありがとうございました。
guest

0

AjaxとJSONPは全く違います。

AjaxがXMLHttpRequestという機能を利用して裏で接続しにいくのに対して、
JSONPはこれです。

HTML

1<script> 2var hoge = [ 3 123, 4 234 5] 6callback(hoge); 7</script>

…お前なんでこんな糞みたいなスクリプト貼り付けたの?
HTMLにこれをベタッと貼り付けて評価するのがJSONPだからだよ!!!
なるほど、これなら他のドメインでも取得出来るわけですね。

Ajaxで他のドメインに接続したければ、接続対象のサーバーの協力が必要です。
具体的にはCORSで調べましょう。

投稿2017/10/27 15:14

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2017/10/27 15:15

なお、実際にはscriptタグのsrc要素を直接いじってアクセスしにいっているので、 回答欄のコードは多少違いますが、戻ってきた内容を解析すると大枠はこんな感じになります。
souta-haruran

2017/10/27 15:25

> miyabi-sunさん ご回答いただきありがとうございます。 Ajaxをある程度理解したつもりでいたものの、それに関連する機能について知識不足を痛感しました。 ご教示いただいたようにCORSとは?というところからしっかり学んでいきたいと思います。
guest

0

XMLHttpRequestは基本外部ドメインへのアクセスが出来ないので、JSONPで対応をする必要があります。
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011

投稿2017/10/27 09:35

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

souta-haruran

2017/10/27 10:02

> Tak_Matzさん ご回答ありがとうございます。 参考となる資料読んでみました。 ちょっとまだ理解できない点もあるのですが、もしご都合などお許しいただけるなら「JSONPで対応をする必要がある」ということについて、例えば私の記述したコードの場合、具体的にどのようにするべきかご教示頂けると幸いです。 大変恐縮ですがよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問