【CakePHP】1人前のケーキ職人になるまで

パティシエじゃないよエンジニアだよ

【Javascript】Ajaxとは

さて、今回はAjaxについて復習したいと思います。

Ajaxとは？

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。

つまり

ページ遷移のない通信を非同期通信といい、それを利用したのがAjaxです。

簡単なものを作ってみる

f:id:nagisa-ito:20171127202657p:plain

こんな感じで適当にフォームを作ってみました。これをそのまま送信するとページが変わってしまいます。ページ遷移の無いように、以下のようなコードを書きます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>
    <h3>Ajaxを学ぶ</h3>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <p><input type="text" name ="sample_text" id ="sample" placeholder="適当な文字を入れてみる" style="width: 200px;">
          <button id="send">send</button></p>
    <span>ここに表示</span>
    <div class="result"></div>

    <script type="text/javascript">

        $(function(){
            //button click
            $('#send').on('click',function(){
                $.ajax({
                    url:'sample.php',
                    type:'POST',
                    data:{
                        'sample_text':$('#sample').val(),
                    }
                })
                .done(function(data){
                    $('.result').html(data);
                    console.log(data);
                });

            });
        });

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

sample.php

<?php
    header('Content-type: text/plain; charset= UTF-8');
    if(isset($_POST['sample_text'])){
        $text = $_POST['sample_text'];
        echo $text;
    }else{
        echo 'Error!';
    }
?>

f:id:nagisa-ito:20171127203550p:plain

こんな感じで、Ajax通信ができました。