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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

Q&A

2回答

2598閲覧

Ajax通信が行われた際の、変数や関数について

toll_tree

総合スコア199

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

0グッド

2クリップ

投稿2019/05/09 10:52

編集2022/01/12 10:55

こちらの記事にて、ajax通信に関連する処理を学習していた際に、分からない部分があった為、ご質問させて貰いました。
以下のコードはすべてリンクに掲載されていたものになります。
下記は、「practice_js.html」です

php

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ajax_practice</title> 6</head> 7<body> 8 <h1>設定</h1> 9 <p> 10 年齢:<input type="text" id="age" value="24"><br> 11 職業:<input type="text" id="job" value="学生"><br> 12 <input type="button" id="execute" value="送信"><br> 13 </p> 14 <h1>結果</h1> 15 <p> 16 可否:<input type="text" id="result" value=""><br> 17 内容:<input type="text" id="detail" value=""> <br> 18 </p> 19 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 20 <script src="default.js"></script> 21</body> 22</html>

下記は、api.phpです。

php

1 2<?php 3 4// Content-TypeをJSONに指定する 5header('Content-Type: application/json'); 6 7// $_POST['age']、$_POST['job']をエラーを出さないように文字列として安全に展開する 8$age = (string)filter_input(INPUT_POST, 'age'); 9$job = (string)filter_input(INPUT_POST, 'job'); 10 11// 整合性チェック 12if ($age === '' || $job === '') { 13 $error = '年齢と職業を両方入力してください'; 14} else if (!ctype_digit($age)) { 15 $error = '年齢は正の整数で入力してください'; 16} else if (($age = (int)$age) > 100) { 17 $error = '生きすぎィ!'; 18} 19 20if (!isset($error)) { 21 // 正常時は 「200 OK」 で {"data":"24歳、学生です"} のように返す 22 $data = "{$age}歳、{$job}です"; 23 echo json_encode(compact('data')); 24} else { 25 // 失敗時は 「400 Bad Request」 で {"error":"..."} のように返す 26 http_response_code(400); 27 echo json_encode(compact('error')); 28}

下記は、「default.js」です

/* エラー文字列の生成 */ function errorHandler(args) { var error; // errorThrownはHTTP通信に成功したときだけ空文字列以外の値が定義される if (args[2]) { try { // JSONとしてパースが成功し、且つ {"error":"..."} という構造であったとき // (undefinedが代入されるのを防ぐためにtoStringメソッドを使用) error = JSON.parse(args[0].responseText).error.toString(); } catch (e) { // パースに失敗した、もしくは期待する構造でなかったとき // (PHP側にエラーがあったときにもデバッグしやすいようにレスポンスをテキストとして返す) error = 'parsererror(' + args[2] + '): ' + args[0].responseText; } } else { // 通信に失敗したとき error = args[1] + '(HTTP request failed)'; } return error; } // DOMを全て読み込んだあとに実行される $(function () { // 「#execute」をクリックしたとき $('#execute').click(function () { // Ajax通信を開始する $.ajax({ url: 'api.php', type: 'post', // getかpostを指定(デフォルトは前者) dataType: 'json', // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる data: { // 送信データを指定(getの場合は自動的にurlの後ろにクエリとして付加される) age: $('#age').val(), job: $('#job').val(), }, }) // ・ステータスコードは正常で、dataTypeで定義したようにパース出来たとき .done(function (response) { $('#result').val('成功'); $('#detail').val(response.data); }) // ・サーバからステータスコード400以上が返ってきたとき // ・ステータスコードは正常だが、dataTypeで定義したようにパース出来なかったとき // ・通信に失敗したとき .fail(function () { // jqXHR, textStatus, errorThrown と書くのは長いので、argumentsでまとめて渡す // (PHPのfunc_get_args関数の返り値のようなもの) $('#result').val('失敗'); $('#detail').val(errorHandler(arguments)); }); }); });

お聞きしたい点は2点です。
ajax通信が成功した際に処理される、「done」メソッド内の「$('#detail').val(response.data);」ここの「data」は、「api.php」の「echo json_encode(compact('data'));」ここの配列「data」のことを指しているのでしょうか?
もう一点目は、失敗した場合のfailメソッド内の「 $('#detail').val(errorHandler(arguments));」ここの「arguments」です。errorHandler関数の中身から、配列かとは思うのですが、ajax通信行われた際に用意される特殊なものなのでしょうか?
どなたか、教えて頂けましたら幸いです。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

質問に直接関係ある部分ではないですが、気になった点。

php

1$age = (string)filter_input(INPUT_POST, 'age'); 2$job = (string)filter_input(INPUT_POST, 'job');

安易なキャストは潜在的なバグを増やすだけになるのでやめたほうが良いです。
それにせっかく
filter_input()
を使っているのですから機能をきちんと使いましょう。
フラグ次第ですが、デフォルトではキーが存在しなかったらnull、filterに失敗したらfalseが返ってきます。
型が気になるなら検証フィルタかけてチェックすればそもそもageにかけてるctype_digit()のチェックも不要になります。

それに、もしage,jobが配列で送信されたらどうなると思いますか?
チェックボックスでなくてもnameに[]で設定すれば配列で送信されます。
そうなるとキャストでstringにしてしまってはバグに気づけなくなります。

ajaxとのことで実行されるプログラムは独立したアプリケーションとして動作しているものなので、
「必ずあるところから呼び出される前提」「くる情報の形が決まっている」「強制変換」は不具合を潜在化し、問題の切り分けを困難にします。
(くる情報が決まってるならなおさらキャストの必要はないですけど)


php

1} else if (($age = (int)$age) > 100) {

ここもそうですね。ただ、ここは=になっている意味が分かりませんが。


php

1if (!isset($error)) {

バリデーションの結果が必ず1つしか引っかからないというあまりよくない前提が含まれています。
「job」がどういう風にデータが送られるのかわかりませんが、例えば「セレクトボックスなど選択肢から選ばれる」という場合、「選択肢にないものが選ばれたらNG」とする必要が出てきます。
となると「ageが数字でない」と「選択肢にないものが選ばれる」は同時に起きうる現象になりますよね。
そのあたりも想定するのでしたら$errorは配列にしておくべきと思います。

php

1$error = []; 2 3/* 4バリデーション 5*/ 6 7if(count($error) === 0){ 8 //バリデーションOK 9}else{ 10 //バリデーションNG 11}

php

1 $data = "{$age}歳、{$job}です"; 2 echo json_encode(compact('data'));

入力値が正常でそのまま返しているだけならわざわざPHPで文字列作る必要ないのでは。

ajaxのdoneで受け取れる引数の
jqXHR.done(function( data, textStatus, jqXHR ) {});
textStatusで判断しても良いと思います。

"success" "notmodified" "error" "timeout" "abort" "parsererror"

「返すのがJSON」というのが決まっていてとりあえずOKだったと返したいなら配列を直接突っ込んでjson_encode()すれば良い話ですし。

php

1echo json_encode(['result'=>'0']);

php

1http_response_code(400); 2echo json_encode(compact('error'));

1つ前にあわせてこんな感じで。

php

1echo json_encode(['result'=>'9','error'=>$error]);

ここでcompact()って微妙な感じはするので私はより明示的に連想配列を作って返すことが多いです。
まあここは好みで(あと現場のルールがあればそれに従う、と)

投稿2019/05/09 14:11

m.ts10806

総合スコア80731

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

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

toll_tree

2019/05/10 02:01

ご回答ありがとうございます。 掲載させて頂いたコードは、自分の書いたコードではないですが、実際に自分でコードを書く際は、参考にさせて貰います。
m.ts10806

2019/05/10 02:06

mpywさんが作られたコードなのできちんと意味があるものだとは思いますが、その意味をきちんと理解しないまま鵜呑みにして利用するのは危険なので気を付けてください。
toll_tree

2019/05/10 06:22

mtsさんの補足は大変為になるもので、勉強になります。 そうですね。意味を理解していない状態での、鵜呑みにしてしまうのは危険ですよね
m.ts10806

2019/05/10 06:25

mpywさん自体は私よりも広く深い知見と技術力をお持ちなのは間違いありませんので(teratailでの活動からも伺い知れます)、 私の回答はmpywさんのコード・記事を非難する意図は全くないことを付け加えておきます。
toll_tree

2019/05/10 11:30

今、掲示してもらったご回答の内容と、コードを見返していたのですが、ちょっとちんぷんかんぷん状態になっています... ajaxに関しては、ある程度ザッと理解できる程度でも大丈夫ですかね? 下記の記事については理解できましたが、mpywさんの記事のコードは少し難しく感じてしまいます... https://qiita.com/okumurakengo/items/53020dd97382d49621ce
m.ts10806

2019/05/10 11:54

結局リクエストとレスポンスの根本部分が理解できてないからかと。 あれで難しいとなると本当に基礎の基礎とリファレンスの使い方が抜けてるということになりますね。
guest

0

dataはそうです。argumentsは関数内でアクセスできる特殊なオブジェクトです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments

投稿2019/05/09 11:32

iwamot

総合スコア1154

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

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

toll_tree

2019/05/09 11:42

ご回答ありがとうございます。 「arguments」に関してなのですが、コード内の(errorHandler(arguments))ここのargumentsへは、どのタイミングで、どのような値が渡っているのでしょうか?
iwamot

2019/05/09 11:49

fail時に呼ばれた際の無名関数への引数が入っているはずです。`console.log(arguments);` を追加し、わざとエラーを発生させて、コンソールで内容を確認してみるとよいと思いますよ。
toll_tree

2019/05/09 12:32

分かりました。一度確認してみます!
toll_tree

2019/05/10 11:22

エラーを発生させて、console.log(arguments)としてみましたら、以下のように表示されました。 「Arguments(3) [{…}, "error", "Bad Request", callee: ƒ, Symbol(Symbol.iterator): ƒ] 0: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …} 1: "error" 2: "Bad Request"」 上記には、「readyState:」とあったのですが、XMLHttpRequestオブジェクトと関係があるものでしょうか? やはり、「arguments」が何か分かっておらず、理解が進まないといった状況になってしまっております。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問