buttonとsubmitは異なるタイプであることを知らなかったことを反省するメモ

javascript HTML

Ajaxを試すために以下のようなコードを動かしてみた。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Learning Ajax</title>
</head>
<body>
<form>
  <label for="name">Name : </label>
  <input id="name" type="text" name="name" size=15 value="john doe"/>
  <input id="btn" type="submit" name="submit" value="send" />
</form>
<div id="result"></div>
<script src="hello_ajax_get.js" ></script>
</body>
</html>

このHTMLから以下のようなページが表示される。

Ajax Before

JavaScriptは以下の通り。
PHPのページからの応答結果をid="result"に流し込むことを意図している。

hello_ajax_get.js
document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('btn').addEventListener('click',function(){
        var result = document.getElementById('result');
        var xhr = new XMLHttpRequest();
        
        xhr.addEventListener('loadstart',function(){
            result.textContent='Now Communicating ...';
        },false);
        xhr.addEventListener('load',function(){
            result.textContent=xhr.responseText;
        },false);
        xhr.addEventListener('error',function(){
            result.textContent='server error';
        },false);

        xhr.open('GET','hello_ajax_get.php?name=' + encodeURIComponent(document.getElementById('name').value),true);
        xhr.send(null);
    },false);
},false);

PHPのページは入力されたnameに'Hello ! Good luck'を付加して返すだけだが、何かを実行している感じを出すためにsleepを入れている。

hello_ajax_get.php
<?php
    header('Access-Control-Allow-Origin:*');
    sleep(3);
    print('Hello '.$_REQUEST['name'].'! Good luck !');

これらのコードではうまく動作しなかったが、なかなか原因がわからなかった。
javascriptに原因があると勝手に思い込み、泥沼に陥ってしまったが、結局、inputのtypeをsubmitからbuttonにすると意図したとおりに動作してくれた。

Ajax Executing
Ajax After

submitとbuttonの違いを意識したことがなかったが、submitは押された瞬間に送信するがbuttonは押されたときの処理を自分で記述しなければならないとのこと。今回のような場合は自分で処理を記述したいので、submitは不可となるのだろう。
なぜ、「どうせ同じようなものだろう！」と思い込んでしまったのか？分からない。

了