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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Ajax

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

Q&A

解決済

1回答

2044閲覧

ajaxを使用したPost送信で処理はうまくいくが、errorと判定されてしまう。

HelloWorld2

総合スコア32

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Ajax

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

0グッド

0クリップ

投稿2018/12/19 10:24

処理概要

  • ユーザが、ページ表示した時に、json形式のデータをPost送信します。
  • 送信先はAzureのFunctions(受け取ったデータを処理して別の場所に書き込む、戻り値のない処理、本質問ではあまり関係ないと思います)
  • データ送信を行っていることは、ユーザにはわからないようにしたいです(画面遷移などはしません)

現状

  • 他のサイトを参考に、ソースを作成しました。
  • 上記処理は満たしています。(Post送信でjson形式のデータをFunctionsに渡せています)

問題

  • 下記ソースでは、一時的に、成功した場合・失敗した場合にalertを表示させています。
  • 処理は想定通りにも関わらず、常に、error側の処理が実行されてしまいます。
  • alertの内容は下記の通りです。
ajax通信に失敗しました XMLHttpRequest:0 textStatus:error errorThrown:undefined

質問内容

  1. 下記コードのsuccess/errorは何をもって判別されているのでしょうか?
  2. エラーの出力内容はどういった意味なのでしょうか?

(XMLHttpRequest.statusが0なら通信に失敗という意味らしいですが、失敗しているわけじゃないため謎です。)
3. 何かコードに問題があるのでしょうか?

html

1<body onload="testFunction();"> 2<script type="text/JavaScript"> 3 function testFunction(){ 4 5 var jsonData = { 6 "name": "テスト!" 7 }; 8 var functionsUrl = 'https://hogehoge'; 9 10 $.ajax({ 11 url: functionsUrl, 12 type: 'post', 13 dataType: 'json', 14 data: JSON.stringify(jsonData), 15 success : function(data) { 16 alert("success"); 17 alert(JSON.stringify(data)); 18 $("#response").html(JSON.stringify(data)); 19 }, 20 error : function(XMLHttpRequest, textStatus, errorThrown) { 21 alert("ajax通信に失敗しました"); 22 alert("XMLHttpRequest : " + XMLHttpRequest.status); 23 alert("textStatus : " + textStatus); 24 alert("errorThrown : " + errorThrown.message); 25 } 26 }); 27 } 28</script>

知識不足のため、質問等に不備がございましたら、
追記致しますので、よろしくお願いします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/12/19 11:44

Fiddler を使って要求・応答をキャプチャしてみると何か有用な情報が得られるかもしれません。
guest

回答1

0

ベストアンサー

var functionsUrl = 'https://hogehoge';

クロスドメインの処理でしょうか?
開発ツール画面でエラーが確認できると思います

alertはやめてconsole.logを利用して下さい

投稿2018/12/20 07:52

yambejp

総合スコア114583

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

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

HelloWorld2

2018/12/21 10:00

クロスドメインの処理だと思います。既存のwebサイトのソース内に、画面表示時にjsで画面の情報(URLなど)をPOSTでhttps://hogehogeに投げるscriptタグを追加しています。投げた後の処理は、投げた先で完結しています。(戻り値などはなし) > 開発ツール画面でエラーが確認できると思います 開発ツール画面というのは何を指していますでしょうか・・・? 私の開発環境としては、 VSCodeでcakePHPを用いて画面を作成しています。 PHPはXamppのapache上で実行しております。 また、Azure上でFunctionsを作成しています。(https//hogehoge) あとalertでなくconsole.logで出力する意図はなんでしょうか・・・? 初歩的な内容ですみません。。。
yambejp

2018/12/21 10:09

ajaxでクロスドメインは、受け側の設定が必要ですが大丈夫でしょうか? 開発ツールはブラウザのF12を押したときに表示されるアレです alertではない意図は、alertは処理を止めてしまうのでデバッグには向いてないからです
HelloWorld2

2018/12/25 01:51

ご回答ありがとうございます。 受け側の設定は何もしていないですが、何が必要なのでしょうか? 現状ajaxを用いて、"なぜか"受け側でデータを取得できてはいるという点が謎です。(下記のようなエラーも出ているので。) 開発ツールのコンソールから見てみると、以下のようなエラーが表示されていました。 【chrome】 Access to XMLHttpRequest at 'https://hogehoge' from origin 'http://website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 【IE】(2つ) SEC7120: 元の http://10.1.54.127 が Access-Control-Allow-Origin ヘッダーに見つかりません。 SCRIPT7002: XMLHttpRequest: ネットワーク エラー 0x80070005, アクセスが拒否されました。 調べてみたところ、 web側のconfig系の設定変更が必要なようですが、 ・http://blog.livedoor.jp/tknemuru/archives/36137964.htmlhttps://blog.mktia.com/how-to-solve-the-problem-that-access-has-been-blocked-by-cors-policy/ webサイト上(html内)で解決することはできないのでしょうか?
yambejp

2018/12/25 02:13

「CORS 」のエラーですからまさにクロスドメイン制約にひっかかってますね データは送信されるのでエラーでも構わないとするか ただしくサーバーの処理をいれるか選択して下さい
HelloWorld2

2018/12/25 03:31

なるほど、サーバ側で設定追加するしか解決方法はないのですね。。。 ちなみに、クロスドメイン制約に引っかかっているにも関わらず、 データが送信される理由は何でしょうか? データが送信されてしまっているので、クロスドメイン制約って何のためにあるのでしょう・・・?という疑問が生じております。 また、今後現在の環境と全く異なるWebサイトで、同様のscriptタグを埋め込む想定なのですが、実行クロスドメイン制約により、データが送信されなくなると困るので、上記疑問を解決したい次第でございます。 (Webサーバの設定ができる環境とも限らないので)
yambejp

2018/12/25 03:46

> クロスドメイン制約に引っかかっているにも関わらず、 > データが送信される理由は何でしょうか? サーバーというものは基本的に常に攻撃をされるものです サーバー側ではアクセスされたデータを検証し、必要に応じて アクセスの可否を判断するので ajaxのデータだけを防いでも意味がないからでしょうね httpヘッダなどどうしても制御出来ない場合はとりあえず jsonpでのアクセスをできるようapiを組んでみて下さい
HelloWorld2

2018/12/25 08:18

ご丁寧にありがとうございました。 とりあえずやってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問