AjaxのCORSエラーがよくわかりません

Ajaxの勉強をしている者です。

HTML、JavaScript、PHPを使いinputタグに文字を入力し、送信ボタンを押したら入力値をAjaxの技術を用いてdivタグに反映させる、といったプログラムを書いてみました。

HTML
1<form>
2  <label for="name">名前: </label>
3  <input id="name" type="text" name="name" size="15">
4  <input id="btn" type="button" name="submit" value="送信">
5</form>
6<div id="result"></div>
7<script src="index.js"></script>

JavaScript
1'use strict';
2
3document.addEventListener('DOMContentLoaded',function(){
4  document.getElementById('btn').addEventListener('click',function(){
5    let result = document.getElementById('result');
6    let xhr = new XMLHttpRequest();
7    xhr.onreadystatechange = function(){
8      if(xhr.readyState === 4){
9        if(xhr.status === 200){
10          result.textContent = xhr.responseText;
11        } else {
12          result.textContent = 'サーバーエラーが発生しました。';
13        }
14      } else {
15        result.textContent = '通信中...';
16      }
17    };
18    
19    xhr.open('GET','index.php?name=' + 
20      encodeURIComponent(document.getElementById('name').value),true);
21    xhr.send(null);
22  },false);
23},false);

PHP
1<?php
2sleep(3);
3print('こんにちは、'.$_REQUEST['name'].'さん！');

文字を入力し、送信ボタンを押すと以下のようなエラーコードがコンソールに出ます。

Access to XMLHttpRequest at 'ファイルのURL...???' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

色々調べてみましたが、まったくの初心者なのでわかりません。
私はmacOSで、Google ChromeでHTMLファイルを開いたところ、このようなエラーと遭遇しました。
どうやったら実行できるのか教えていただけますと幸いです。

退会済みユーザー

2022/08/21 06:40

開発サーバーを使いましょう。あなたの環境は不明ですが、その環境で使える何かはきっとあるはず。

kaito1106

2022/08/21 06:47

macOSで、GoogleChromeで開いたところ、このようなエラーと遭遇しました。

退会済みユーザー

2022/08/21 07:06

macOS は開発サーバーではありません。HTTP 通信ができる開発用の Web サーバーをインストールして使いましょうということです。PHP というタグが付いているということは PHP の Web アプリの開発をしていて、それなりの環境を持っているということではないのですか？

kaito1106

2022/08/21 07:11

PHPについては、現在JavaScriptの学習に使っている参考書でAjaxのサンプルコードとして記述しているだけで、一切分かりません。初心者すぎて右も左もわかりません。

退会済みユーザー

2022/08/21 07:16

回答欄の追記を見てください。それに対するレスは回答欄下のコメント欄にお願いします。

m.ts10806

2022/08/21 08:16

PHPもそうですが、Webアプリケーションのコード何も考えずに貼り付けただけでってかなりしんどいと思います。それにAjaxを本当に扱ってるなら環境の件とか必ずあるはずなので、その部分理解してからの方がいいですよ。コピペで動くものにはなりませんし、回答者の説明理解できないと時間の無駄にしかなりません。

kaito1106

2022/08/21 08:44

その通りですね。何度か調べましたがいまいちよくわかりませんでした。 Ajaxを理解するには、ある程度サーバーサイドや環境構築などの知識は必要になりますか？ HTML、CSS、JavaScript(入門レベル)しか知りません。

m.ts10806

2022/08/21 08:47

調べて分からない＝理解できるほどの土台（基礎知識）がない　ということになります。 Ajaxを理解するにはサーバーサイドは必須です。 Webアプリケーションがどのような構成で動いているのか。リクエストとは、レスポンスとは理解しないことには使えるようになりません。 WebAPIを作るとイコールです。他の人が作ったAPIを利用する　としてもAPI仕様をきちんと読めないといけないのでJSONなどのレスポンス内容の理解や解読は必要。

kaito1106

2022/08/21 08:53

とても本質的な回答頂けた気がします。ありがとうございます。現時点でAjaxを理解できるレベルに到達していないので、時が来るまで学習は保留にします。

m.ts10806

2022/08/21 08:59

質問に対する答えではないのでこちらに書いてますので回答というよりボヤキに近いかもしれません。アドバイスととってもらえたようで幸いです。ただ、本質問をどう畳むかは考えておいたほうが良いかなと。 Ajaxだけ理解しようとしても付随する要素のほうが基本だったりするので、回答ついてて受付中のままにしておくのも微妙です。直接的な回答はmaisumakunさんの仰るとおり（私も回答がついてなければ同じ回答をしていたと思います）なので、考え方だけの理解で解決という形もできなくはないかなと。

kaito1106

2022/08/21 09:04

いえいえ、ありがとうございます。あまり1つのことに固執せず、学習を進めていければと考えを改めました。仰る通り受付中は良くないので、maisumakunさんをベストアンサーにさせていただきました！焦らず全体的に理解していければと思います。ありがとうございました！

m.ts10806

2022/08/21 09:55

あと件の回答に補足コメントしてますが、MacならMAMPにしたほうが余計なトラブルがないと思います。 XAMPPはWindowsに最適化されているものです。元々の設計思想が違うはずなので、Mac にXAMPP、WindowsにMAMPでトラブルが起きた人がよく質問してきています。ただ、せっかくPHPの環境を作る機会ができてるのですから、PHPの基礎部分を勉強しても良いかもしれません。