jQueryとajaxについて復習

ajaxを触ろうとしたら使い方を思い出せなかったので、復習のために書いておきます。

jQueryとは

簡単に言うと、javascriptを扱いやすくするためのライブラリ。

公式サイト：http://jquery.com/
使用する場合は公式サイトからダウンロードするか、コードに埋め込む。
処理対象の要素の部分をセレクタと呼ぶ。複数指定も可能。

ボタンをクリックすると文字列の色を変えてから消す処理。
hoge1.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>hoge</title>
</head>
<body>
    <p>てすてす</p>
    <button>色変わって消える</button>
    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>

    <script>
        $('button').click(function() {
          //$(document).ready(function() { ←の短縮形
          $(function() {
        　  // pの部分がセレクタ
            $('p').css('color', 'blue').hide('slow');
          });
        });

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

ajaxとは

Asynchronous JavaScript + XML の略
（読み方はえいすんくろなす？）JavaScript を使ってサーバーと通信しつつ、ページを書き換えることができる技術。これにより、ページ全体の読み込みを行わなくても部分的に画面を更新することができる。また、Asynchronousとある通り「非同期」で処理の完了を待たずに次の処理を行う。

ajaxで使うメソッドもjQueryの公式サイトから参照できる。
jQuery API Documentation

下記はajaxのget()を使ってテキストボックスに入力した文字列とその長さを返す処理。
jQuery.get() | jQuery API Documentation

hoge2.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>hoge</title>
</head>
<body>
    <p>てすてす</p>
    <p>
        <input type="text" name="name" id="name">
        <input type="button" id="btn" value="ボタン">
    </p>
    <div id="result"></div>
    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        $(function() {
            $('#btn').click(function() {
                
                $.get('ajaxtest.php', {
                    name: $('#name').val()
                }, function(data) {
                    $('#result').html('msg:' + data.msg + '& len:' + data.length);
                });

            });
        });
    </script>
</body>
</html>

ajaxtest.php

<?php

$rtn = array(
    "msg" => htmlspecialchars($_GET['name'], ENT_QUOTES, "utf-8"),
    "length" => strlen($_GET['name'])
);

// json形式で返す
header('Content-Type: application/json; charset=utf-8');
echo json_encode($rtn);

参考にさせていただいたサイト
jQueryを使ってみよう。(基本編セレクタ１) | 1：n – DETELU Blog

実用的なajaxの使い方
jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション | iwb.jp