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

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

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

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

JavaScript

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

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

解決済

javascript XMLHttpRequest()にて、phpファイルを開けない

Shitake893
Shitake893

総合スコア11

PHP

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

JavaScript

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

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。

3回答

0リアクション

0クリップ

203閲覧

投稿2022/09/02 11:43

現在、php及びjavascriptを習得するために本で勉強しています。
しかしながらjavascriptからphpファイルを読み出す処理において、
エラーを吐き、次に進めなくなってしましました。

実際にどのようなエラーになっているか確認しましたところ、
次のように表示されました。
[object ProgressEvent]

実現したいこと

phpファイルにjavascript(XMLHttpRequest())
にてアクセスが行えるようにする。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

hello.php

PHP

<?php echo date("Y年 m月 d日 h時 i分"); ?>

script.js

javacript

function onClickBtn(){ var xhr = new XMLHttpRequest(); xhr.open('GET', '/hello.php', true); xhr.onload = function(e) { if (this.status == 200) { var result = this.response; var msg = document.querySelector('#msg'); msg.textContent = result; } }; xhr.onerror = function(error){ var msg = document.querySelector('#msg'); msg.textContent = error; } xhr.send(); }

hello.html

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello!</title> <style> body { font-size:14pt; font-weight:plain;} h1 { color:white;font-size:24pt; background-color:red; } #canvas { background-color:white; border: 1px solid gray; } </style> <script src="script.js"></script> </head> <body> <h1 id="title">Hello!</h1> <p id="msg">今、何時かな?</p> <button onclick="onClickBtn();">Check!</button> </body> </html>

試したこと

このjavascriptが動いているかを、
XMLHttpRequest()があるところ以前に
コードを書き、確認しました。

xhr.openの所、'/hello.php'を
'hello.php'
'http://localhost/hello.php'
に変更してみて実行してみました。
両方ともに変化はありません。

補足情報(FW/ツールのバージョンなど)

使用した仮想サーバーはXAMPPv3.3.0のApacheです。

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

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

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

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

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

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

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

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

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

m.ts10806

2022/09/02 11:51

>エラーを吐き エラーメッセージを確認できてないのでしたら「エラーを吐き」ではないと思います。 いずれにしてもオブジェクトが返ってきているのでしたら、 テキストとして出力するのではなくconsole.logで展開した方が良いです。
m.ts10806

2022/09/02 11:53

もう一つちなみに、HTMLからはhttpでアクセスされてるのでしょうか。 ブラウザ開発ツールのコンソールも確認してください。
Shitake893

2022/09/02 12:16

m.ts10806さん、ありがとうございます。 すいません、語弊がありました。 まず、エラーを吐きというよりも、javascriptで実行して、 onloadの処理が行われず、onerrorで記入した命令が実行されてしまったという事です。 そして、二つ目の質問、http://localhost/hello.phpに直接アクセスすることはできます。 グーグルクロームにて実行しました。 3つ目の質問ですが、HTMLファイルはhttpでアクセスしているのではなく、 ファイルをプログラムから開くで、グーグルクロームで開かせています。 (なのでアドレスはfile:///C:/xampp/htdocs/hello.html)となっています。
m.ts10806

2022/09/02 12:47

質問は編集できます。

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

PHP

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

JavaScript

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

XAMPP

XAMPP(ザンプ)は、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージングしたApacheディストリビューションです。 XAMPPひとつインストールするだけで、Apache、MySQL、PHP、Perlなどのソフトウェアと、 phpMyAdminなどの管理ツール、SQLiteなどのソフトウェアやライブラリモジュールなどを利用することが可能です。