ajaxの仕組みについて

ajaxの仕組みがいまいち分かりません...
こちらの記事で調べていたのですが、phpへ処理を送りレスポンスを返す際、特に返すファイルパスの指定などはありません。何故、値を返すことができるか分からない為、ご質問させて貰いました。
以下は、phpファイルになります。

<?php
    header('Content-type: text/plain; charset= UTF-8');
    if(isset($_POST['userid']) && isset($_POST['passward'])){
        $id = $_POST['userid'];
        $pas = $_POST['passward'];
        $str = "AJAX REQUEST SUCCESS\nuserid:".$id."\npassward:".$pas."\n";
        $result = nl2br($str);
        echo $result;
    }else{
        echo 'FAIL TO AJAX REQUEST';
    }
?>

以下は、ajax処理を含むhtmlファイルになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <form id="form_1" method="post" accept-charset="utf-8" return false>
        <p>名前 <input type="text" name = "userid" id ="userid"> </p>
        <p>パスワード <input type="text" name = "passward" id="passward"> </p>
    </form>

    <button id="ajax">ajax</button>
    <div class="result"></div>

    <script type="text/javascript">

        $(function(){
            // Ajax button click
            $('#ajax').on('click',function(){
                $.ajax({
                    url:'./request.php',
                    type:'POST',
                    data:{
                        'userid':$('#userid').val(),
                        'passward':$('#passward').val()
                    }
                })
                // Ajaxリクエストが成功した時発動
                .done( (data) => {
                    $('.result').html(data);
                    console.log(data);
                })
                // Ajaxリクエストが失敗した時発動
                .fail( (data) => {
                    $('.result').html(data);
                    console.log(data);
                })
                // Ajaxリクエストが成功・失敗どちらでも発動
                .always( (data) => {

                });
            });
        });

    </script>
</body>
</html>

上記疑問点につきまして、ご助言頂けましたら幸いです。

takasima20

2019/08/07 22:54

やってることは submit & echo と同じスよ。

aae_11

2019/08/07 23:19

なんとなくイメージが掴めてはいるのですが、echoしたら、phpファイルにて出力が行われると思うのですが、自分的には、変数に値を格納しそれをまたパスを指定して、返さなければならないんじゃないかなって思っちゃうんですよね...

m.ts10806

2019/08/08 06:36

思った通りに動くのではなく書いた通り仕様通りに動くのでその「出発点」を間違っていては理解は到底できないと思います。思い込みでは何も得られません。Ｗｅｂアプリケーションの「仕様」を体系的に学ぶ必要があります。

行動規範の内容に同意します

回答5件

とりあえずPHPは置いておいて、静的なテキストファイルをajaxで読み込んで表示してみるところからやってみてみて
Ajaxを理解し、その後に静的ファイルと動的PHPを差し替えて再度理解されてはどうでしょうか

投稿2019/08/08 06:33

mikkame

総合スコア5036

あまり正確ではありませんが、ajaxは内部的に非表示タブを開いて指定したURLのページにアクセスし、ページ内容を取得するようなイメージの動作をしています。
よってPHP側で「ページ内容をブラウザ上のどのタブに渡すか」のような指定は必要ありません。

投稿2019/08/08 02:34

ku__ra__ge

総合スコア4524

formによるpost/getと概念は同じです。
リクエスト－レスポンス

それを、リクエストを送るURLに対して行っているところも。

主な違いは
バックグラウンドで行われるか、そうでないかの違いです。

バッググラウンドで行う場合、リクエストが送られてきた先にレスポンスを返すようになっています。
要は「API」ですね。郵便番号APIとか、TwitterのAPIとか。
あれもパラメータを渡してAPIのURLを実行すると結果が返ってきますよね。
Ajaxも同じです。返す先は実行元。

あまり例え話は良くないのですが、
壁に向かってボールをまっすぐ投げたら自分のところに返ってくるのと同じです。

投稿2019/08/08 00:06

m.ts10806

総合スコア80850

通常の HTML リクエストでも、要求された URL に対するコンテンツを返す、というだけであって、そのコンテンツが静的なファイルであるとは限りません。

PHP が Web サーバと連携しているとき、PHP が標準出力に出したものが、Web サーバによって HTML レスポンスとして処理される、のですから、PHP が echo なりなんなりで出力した内容がそのままレスポンスになります。

投稿2019/08/07 23:34

tacsheaven

総合スコア13703

aae_11

2019/08/08 01:50 編集

ご回答ありがとうございます。確かにWEBサーバーによってHTMLレスポンスとして処理され、PHPがechoなどで出力した内容は画面表示されますが、その場合 echoによって出力されるのはphpファイルであるかと思います。 ajaxの場合は、データを送った側のファイルに値が返され、表示などの処理がされると思うので、ファイル名の指定を行わなくてよいのかなと思ったんですよね。

tacsheaven

2019/08/08 09:57

うーん……php はあくまでも echo だのなんだのは「標準出力」に出力しているんです。ただ、Web サーバが php に処理を委譲する際に、入出力をすべて乗っ取っている（ちょっと変な言い方ですが）ので、PHP の出力を Web サーバが受け取って、本来の相手先（HTTP リクエスト元）へ返しています。

aae_11

2019/08/08 10:37

ご返信ありがとうございます。なんとなく、感覚がつかめた気がします。つまりはajaxの特殊な機能を使い、HTTPリクエスト元に返しているといった感じでしょうか...?

行動規範の内容に同意します

Ajaxは、サーバー側の物ではなく、ユーザーが使っているブラウザ側のプログラムです。

なので、「サーバーは、すでにユーザーにわたってしまっているAjax（が書かれたファイル）を指定して返信しないといけないのでは？」という考えはちょっとずれている感じですね。

感覚的な説明はこんな感じです。

（１）Ajaxは、データを該当ファイルに送信した後、サーバー側からお返事が来るまで入り口で扉に手をかけたままじーっと待機しています。

※ちょうどウェブサイトを閲覧しようとして、サーバーからデータが送られてくるのを待っている感じです。

（２）サーバー側は、送られてきたデータを、送信先のPHPファイルで処理して、PHPから何かの応答・出力があるのを待っています。

（３）PHPファイルから何かの応答・出力があったら、それを入り口で待っていたAjaxに渡してあげます。

（４）受け取ったAjaxは、ユーザーのブラウザに戻ってきて、得られたデータを処理します。

なので、Ajaxが入り口で待っているのでサーバー側はわざわざ送り先を考えなくても良いわけです。

投稿2019/08/07 23:57

yukikp

総合スコア797

aae_11

2019/08/08 02:01

ご回答ありがとうございます。＞（３）PHPファイルから何かの応答・出力があったら、それを入り口で待っていたAjaxに渡してあげます。こちらの部分なのですが、tacsheavenさんへのご返信とかぶってしまうかもしれないのですが、PHPファイルから、echoでの出力があった場合はphpファイルにて、出力が行われるのであって、echoは出力する内容を送り先に返すものではないのではないかなといった感じに思ってしまうのですよね...

行動規範の内容に同意します

あなたの回答