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

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

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

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

JavaScript

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

Ajax

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

Q&A

解決済

3回答

1563閲覧

これは非同期通信でpostしているのでしょうか

maguzo

総合スコア57

PHP

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

JavaScript

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

Ajax

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

2グッド

2クリップ

投稿2018/08/10 13:07

このteratailサービスにあるように、投稿後のページにおいて、コメントをした場合にページが遷移せずにコメントが反映され、おそらくサーバーサイドとも通信していると思われます。

初心者目線で大変恐縮なのですが、本件について、何点か質問させてください。

  1. これは非同期通信(ajax)でサーバーと通信して実行している技術なのでしょうか?

  2. このような遷移せずにサーバーと通信(具体的にはformで取得した値を検査して、RDBに格納するとともに、ページを遷移せずに値を反映する)することはajaxでやるのが一般的なのでしょうか、または他の一般的な技術が昨今存在しているのでしょうか?

  3. 非同期でpostしていることを前提として、当然かもしれませんが、javascript上だけでバリデーションをするだけではなく、サーバーサイドでも検査しなければならないのは常識でしょうか?(これまで、teratailのコメントではじかれたことがないため、あまり処理がピンとこないのですが、サーバー上のバリデーションもきっと非同期で行われていると想像しておりましたがあっていますでしょうか?)

  4. teratailの投稿後のページを見ても同じスクリプト内に複数のformが存在していたりする(例えば自己解決のformや皆様からのコメントは別のformの別のtextareaの構造になっております)のですが、昔、同じスクリプト内に複数のformを設置してはいけないと習ったことがあります、とはいえこのサービスのように、一部のformはpostして一部のformはpostしたくないようなケースがあると思います。これはなんら問題ないことで、action先を変更したり、非同期で通信しているのであれば、それぞれ別のformから投稿された時に、それぞれの処理をさせてば良いというだけなのでしょうか?(わかりづらければ申し訳ございませんが、適宜補足させていただきます)

aaaaaaaa, milkteas👍を押しています

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

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

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

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

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

guest

回答3

0

これは非同期通信(ajax)でサーバーと通信

おそらくajax的な処理ですが「非同期」かどうかは重要ではありません
すなわちajaxは同期でも処理ができるからです。
たんにバックグランドで送信する機能を利用しているという認識でいいでしょう。

このような遷移せずにサーバーと通信することはajaxでやるのが一般的なのでしょうか、または他の一般的な技術が昨今存在しているのでしょうか?

実質ajax(XMLHttpRequest)が標準だという認識で良いでしょう。もとはframeやiframe、
別ウィンドウをつかった処理の方が主流でした。
またやろうと思えば、objectのdataやimgのsrcを書き換えることでバックグラウンドに
サーバーと通信することは可能ですが、ajaxのようにpost処理をしたり、戻り値を柔軟に
活用したりするのは難しいです

サーバーサイドでも検査しなければならないのは常識でしょうか?

バリデーションについてはテキストデータを単に流し込む場合は、弾くということはあまり
考える必要はありません。つまり想定したデータの型やフォーマットがあるわけではないので
ユーザーに再入力をうながす必要がないからです。
ただし不正に処理しようとすれば、巨大なデータや、バイナリデータなど
送りつけることもできるのでそのあたりをサニタイズしているのは間違いないでしょう。
また当然適当なエスケープ処理はかけています。

昔、同じスクリプト内に複数のformを設置してはいけないと習ったことがあります

むしろformにそういう制限があるわけではないので、経験則としての提言であって
技術的な問題ではありません。
たとえばformの中にformを設定するとか無茶さえしなければ問題ありません。
またバックグラウンド処理の場合、物理的なフォーム自体が必要なく
パラメータを直接わたしたり(たとえばa=1&b=2とか{x:3,y:4}のような)、
FormDataという擬似的なフォームで処理することができます

投稿2018/08/10 14:07

yambejp

総合スコア114572

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

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

maguzo

2018/08/10 15:02

いつも、詳細なご解説をいただき誠にありがとうございます。 概ね理解することができましたが >>物理的なフォーム自体が必要なく 等、まだ理解ができていない部分はありますが、やりながら学んでみようと思います。 改めて、御礼申し上げます。
maguzo

2018/08/10 15:05

あ、もしかすると例えばJqueryで、 preventDefault等でformを無効化して、submitイベントで処理する等の意味で >>物理的なフォーム自体が必要なくという言葉をいただいたのかもしれません。
guest

0

ベストアンサー

  1. その通りの認識で良いです。
  2. 一般的と言いますか、このような仕組みを総称してAjaxと呼んでおります。
  3. Ajaxに限らず、サーバーサイドでバリデーションをかけるのは当然です。サーバ上の実装は非同期通信だからと言って大きく変わるものではないです。出力形式が非同期通信の処理に都合がいいように整形したりしますが、やることは通常のページ切り替え系の処理と同じで、入力チェック→ビジネスロジック→出力、です。
  4. 誰ですかそんな適当なことを言ったのは。formの入れ子はダメですが同一ページ内に複数のformが存在することは問題ないです。複数formがある場合、押したsubmitボタンが属するformの内容がリクエストとしてサーバに送信されます。非同期通信じゃなくても同じです。

それぞれ別のformから投稿された時に、それぞれの処理をさせてば良いというだけなのでしょうか?

という問いに対しては、その通りです、という回答になると思います。

投稿2018/08/10 14:15

hope_mucci

総合スコア4447

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

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

maguzo

2018/08/10 14:58

コメントありがとうございます。端的なご説明でとてもわかりやすかったです。 それではこの認識を前提に詳細を調べて自分で実装してみようと思います。 やみくもに進めずに前提を確認できてよかったです。 御礼申し上げます。
guest

0

ベストアンサー出ていますが個人的に回答したい部分だけ。
javascriptは基本的にソースを全て見ることができます。
なのでteratailなんかが、どのように動いているのかも実際にソースレベルで確認することができるんですね。

「回答をする」ボタンは<button id="submit_question"となっており、これをjs側で使っているところを確認すると1c4e0197a806998aa07d.3.jsと言うソースの25250行目に$('#submit_question').clickがあります。これの中身を見るとバリデーションチェックをしていたり、ajaxで通信していることなんかがわかると思います。

変なソース書くとみんなにバレちゃうので恥ずかしいですね・・・。(ソースコードの中にTODOとかあるとドキッとしちゃう)

投稿2018/08/11 08:26

razuma

総合スコア1313

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

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

maguzo

2018/08/11 12:02

razuma様 コメントありがとうございます。 実は申し上げるとjsはクライアントサイドの処理なので、中身を見ることできることはなんとなく存じ上げていて、これまでずっと参考にしているサイトでどうやってコードを書いているだろうと気になっていることが多々あったのですが、どの.jsファイルのどの箇所かと調べることが不可能だと諦めていました。 そこでぜひお伺いしたいのですが、影響を与えているコードがどのファイルのどの箇所だと当たりをつけるコツなどはあるのでしょうか? 今後の大きな進歩になるかと思いますので、アドバイスをいただけるととても嬉しいです。 よろしくお願い申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問