質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

kaito1106
kaito1106

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0リアクション

1クリップ

578閲覧

投稿2022/08/21 06:22

編集2022/08/21 06:47

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

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

HTML

<form> <label for="name">名前: </label> <input id="name" type="text" name="name" size="15"> <input id="btn" type="button" name="submit" value="送信"> </form> <div id="result"></div> <script src="index.js"></script>

JavaScript

'use strict'; document.addEventListener('DOMContentLoaded',function(){ document.getElementById('btn').addEventListener('click',function(){ let result = document.getElementById('result'); let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; xhr.open('GET','index.php?name=' + encodeURIComponent(document.getElementById('name').value),true); xhr.send(null); },false); },false);

PHP

<?php sleep(3); print('こんにちは、'.$_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ファイルを開いたところ、このようなエラーと遭遇しました。
どうやったら実行できるのか教えていただけますと幸いです。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

SurferOnWww

2022/08/21 06:40

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

2022/08/21 06:47

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

2022/08/21 07:06

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

2022/08/21 07:11

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

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の基礎部分を勉強しても良いかもしれません。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。