Ajaxについて調べてみた

 

 

 Ajaxって何？

 ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法。

移動をするたびに毎回WebブラウザがWebサーバにページの情報をすべてもらって再表示するのではなく、Webブラウザの代わりにJavaScriptとWebサーバが通信をして新たな情報をもらってくること。

 

f:id:higuruchi:20201214184337p:plain

ja.wikipedia.org

jQueryとPHPを使って簡単にAjaxを実装してみた

 

環境：PHP 7.4.3　Ubuntu 20.04.01

 index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Ajax test</title>
</head>
<body>
    <p>Ajaxの通信テスト</p>
    <p>素数かどうか判定をします</p>
    <input type="text" class="number" placeholder="数値を入力してください">
    <input type="button" class="testBtn" value="OK">
    <div class="result"></div>

    <script>
        jQuery(function($){
            $('.testBtn').click(function(){
                $.ajax({
                    url:'http://192.168.33.10/Ajax_test/test.php',
                    type:'GET',
                    dataType:'text',
                    data : {
                        no : $('.number').val()
                    }
                }).done(function(data){
                    $('.result').text(data);
                }).fail(function(data){
                    console.log('通信に失敗しました');
                });
            });
        });
    </script>
</body>
</html>

 

test.php

<?php

    $number = $_GET['no'];

    if (isset($number)) {
        $number = (int)$number;
        $flg = true;

        for ($i = 2; $i < $number; $i++) {
            if ($number % $i == 0) {
                $flg = false;
                break;
            }
        }
        if ($flg) {
            echo $number.'は素数です';
        } else {
            echo $number.'は素数ではありません';
        }
    } else {
        echo '数値が入力されていません';
    }

    

?>

 

 

 

 

f:id:higuruchi:20201218204945p:plain