Node.jsでajaxがうまくいかない

質問

nodejs初心者なのでよくわからずやっていて恐縮ですが、うまくいきません。

https://phpotameshi-hoto345.c9users.io/node-ajax/hello_ajax.html
なのですがもともとはphpで送信ボタンを押したときにphpが実行されるものでしたが、これを少し改良してNode.jsでやってみようと思ったのですが、phpと違って
<script src="scripts/hello.js"></script>
のようにnodejsを読み込んでやれば同じ結果になると思ったのですがうまくいきません。

その前にローカルでもNode.jsは使えるようなので
>node test.js
Server running at http://localhost:8124/
のようにしてローカルでやってもhttp://localhost:8124/自体は問題なく立ち上がりtest.jsの中身は実行されたのですが、ajaxの方がうまくいきません。

ローカルでのNode.jsもServer running at http://localhost:8124/
となっていればNode.jsのサーバは起動しているので、
ローカルでhello_ajax.htmlを起動して、buttonを押せばajaxもnodejsも実行されるのではないでしょうか？

回答No.4

catpow · ベストアンサー

>>このローカルサーバはphpでいうザンプ、
サーバ上で言うcloud9と同じようにほぼ制約なくサーバサイトのプログラミングがすべて行えると考えてよいのでしょうか？

初歩的なテストであれば、同じように使えると考えていいはずです。
もちろん、クラウド環境は、ローカル環境と違う部分がどうしてもあるはずなので、サーバ側（クラウド環境）で実行する予定のものがすべて行えるとはいえません。

>>サーバサイドでできることに制約があるからなのでしょうか？
サーバサイドはフロントと違ってなんでもできると思っていたのですがそうではないのでしょうか？

サーバ側、クライアント側（フロント側）は、別のプログラムであってネットワークを通して接続しています。
ですから、それぞれにできることは制約があります。
サーバサイドは、サーバ側で可能なことは多いけど、直接にクライアントのＤＯＭの操作はできません。

さらにいえば、通常、サーバとクライアントの通信は、ステートレスで動作しています。

たとえば、ログイン画面で、ユーザＩＤ、パスワードを入力し、本人確認が終了したとしても、その次に「残高照会表示」とクライアントの画面メニュで選択して送信したとき、サーバ側プログラムは、何もしないと、直前動作の「本人確認」が完了か未完了かさえわかりません。

本人確認は、サーバが認証後にクライアントに送ったクッキーという小さなファイルをクライアントが、次の通信で返すから、「認証済み」と判断しているだけです。
（通常は、こういった処理は、フレームワークがうまくやってくれています）
だから、クッキーを誰かに盗まれたら、他人が本人に成り済まして通信をすることが可能になります。

まあ、いずれにしても、Ｗｅｂサイトのプログラミングは、スタンドアロン、あるいは、クライアント＆サーバ形式のプログラミングより、覚えることは多いし、プログラミング上の制約は多いし、セキュリティは、さらに重要になるので、大変です・・・。
特に、セキュリティに関しては、一般公開のこういう場とか、書籍では、模倣犯を恐れて、具体的なことが書かれないことが多いですからね。
勉強材料としては、ＩＰＡのセキュリティ資格試験の問題みたいなものを参考にしないと分かりにくいですね。

お礼

ご丁寧なご返信大変ありがとうございます。

＞＞＞
サーバ上で言うcloud9と同じようにほぼ制約なくサーバサイトのプログラミングがすべて行えると考えてよいのでしょうか？

初歩的なテストであれば、同じように使えると考えていいはずです。
もちろん、クラウド環境は、ローカル環境と違う部分がどうしてもあるはずなので、サーバ側（クラウド環境）で実行する予定のものがすべて行えるとはいえません。

それでは下記のローカルサーバでも、ザンプのように、ほとんどのことは試せるので、学習のためにいろいろ作って試す分には、
これで十分なのですね。
これならcloud9がいらないので、今回のajaxを使ってクリックしたときにDOM生成してコンテンツがfadeinするようなことも問題なくできるはずなのですね。
Server running at http://localhost:8124/

するとほんだいにもどるのですが、ajaxをボタンをクリックしたときに実行して、要素を出現させるには、下記のようにそのものを実行すればよいというわけではないようですね。
http://localhost:8124/scripts/hellow_ajax.js

ajaxのjsファイルはあくまでクライアント側なので、これは
<script src="scripts/hellow_ajax.js"></script>
という形で普通にレンダリング時に読み込んでやればOKという事でしょうか？

ローカルサーバは、まずnode用のサーバのソースが入っているtest.jsをコマンドプロンプトで実行し、サーバを起動し、
http://localhost:8124/index.html
という形でhtmlファイルをブラウザで実行してやればよいのでしょうか？

あとは普通にクリックしてやれば、ajaxが実行されて、サーバ側で処理されて、
要素が出現するはずという事で良いでしょうか？

＞＞＞
サーバサイドは、サーバ側で可能なことは多いけど、直接にクライアントのＤＯＭの操作はできません。

やっぱりサーバサイドはDOM操作系の関数は存在しなく、実行することは不可能なのですね。
よってcreateElementなんて関数しらないよとか
document is not defined　つまりdocumentオブジェクトすら知らないよと出てくるのですね。
つまりdocumentオブジェクトやwindowオブジェクトにアクセスすらできないのであればこの中にある関数やプロパティは一切サーバサイドは使えないのですね。
document.getElementBy何とかとかの関数は一切使えないのですね。
フロント側からするとびっくりです。

＞＞＞
まあ、いずれにしても、Ｗｅｂサイトのプログラミングは、スタンドアロン、あるいは、クライアント＆サーバ形式のプログラミングより、覚えることは多いし、プログラミング上の制約は多いし、セキュリティは、さらに重要になるので、大変です・・・。
特に、セキュリティに関しては、一般公開のこういう場とか、書籍では、模倣犯を恐れて、具体的なことが書かれないことが多いですからね。
勉強材料としては、ＩＰＡのセキュリティ資格試験の問題みたいなものを参考にしないと分かりにくいですね。

サーバサイドはフロントと比べると情報が少なく、自分が作ったソースでわからなくても危険なので、
ソース張ってここで教えてもらう事も厳しいのですね。
すると個人で仕事を請けたり、在宅で請けるのはサーバサイドはフロントと比べると非常に厳しく、
まず請けることが難しいのですかね。

ただフロントと違ってソースコードが閲覧者にばれないという点ではセキュアですがそれ以外は危険でしかないですね。

クライアント＆サーバ形式のプログラミングというのはajaxの事でしょうか？
問い合わせフォームなどはこれに当たらないという事ですかね？

補足

ローカルで行ったことがなく頭がこんがらがっているのですが、
http://localhost:8124/index.html
としてもindex.htmlファイルがサーバ用のソースのあるjsファイルのカレントディレクトリにないと実行できないのですかね。

index.htmlをカレントディレクトリにコピーしてみて実行したのですが、ずっと応答を待っていますのままになりました。

サーバ上ならhtmlをアップロードしてアドレスを指定すればよいとわかるのですがローカルだといまいちわかりません。
ローカルの場合のパスはサーバ用のJSファイルをhttp://localhost:8124/と考えてここからの相対パスを書いてやればよいという事でいいでしょうか？
これでhtmlファイルをサーバ上で実行したことになるのですかね？

つまりサーバ用のJSとindexがカレントディレクトリにあれば
http://localhost:8124/index.html
でよいのですね

回答No.3

catpow

>>ただするとどうやってNodejsをアドレスで指定して実行されながら、
htmlも実行してUIを表記するのでしょうか？

Ajax : Asynchronous JavaScript + XML
ですね。

クライアント側のhtmlの中に記述されているJavaScriptからサーバに、キー入力があれば送信して、サーバ側プログラムは、それを受けて、処理結果をXMLでデータをクライアント側に返す。
クライアント側は、受け取ったデータで、一部画面の書き換えを行うって流れになっています。

流行のNode.jsは知らないのですが、この仕組みは変わらないと思います。

私は、C#を使うASP.NET Coreで開発していますが、Ajaxの機能は、まだ使っていません。
なので、実践経験じゃあなく、ネットや書籍からの情報によるだけの回答ですが・・・。

お礼

ご丁寧にご回答大変ありがとうございます。

その後ローカルサーバ上で
Server running at http://localhost:8124/
hellow
hellow

に成功しました。console.logがまさかプロンプト上に出るとフロントの人間は思わなかったのですが、サーバサイドはプロンプトじょうに出るのですね。
このローカルサーバはphpでいうザンプ、
サーバ上で言うcloud9と同じようにほぼ制約なくサーバサイトのプログラミングがすべて行えると考えてよいのでしょうか？
はまりたくないので教えていただければ幸いです。

しかしその後下記のように要素を追加しようとしたところエラーが出ます。
これはやはりフロントではできるDOM操作がサーバサイトではできないなど、
サーバサイドでできることに制約があるからなのでしょうか？
サーバサイドはフロントと違ってなんでもできると思っていたのですがそうではないのでしょうか？
・
http.createServer((request, response) => {
// myCode

const createTestDiv = document.createElement('div');
document.body.addChild(createTestDiv);
createTestDiv.innerHTML = 'imadediv';
console.log('hellow');
// /myCode

response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World!\n');
}).listen(PORT);

としたところ下記のエラーが出ます。
\node-ajax\scripts\test.js:7
const createTestDiv = document.createElement('div');
^

ReferenceError: document is not defined
at Server.http.createServer (C:\Users

回答No.2

catpow

>>なのですがもともとはphpで送信ボタンを押したときにphpが実行されるものでしたが、

質問者さんは、誤って理解しています。

元のプログラムで送信ボタンを押したとき、最初に動作しているのはphpではなく、htmlあるいは、JavaScriptです。（元のプログラムを見ていないので、あいまいですが）
だから、No.1さんの回答にあるような指摘も受けることになっているのです。

うまくいかなくて当然でしょう。

お礼

例
https://phpotameshi/node-ajax/scripts/hello.js

のようにアドレスバーに入れるのはサーバサイドのNodejs自体を選択しないとイベントリスナーでクリックした際に実行するという形ではサーバサイドでは実行されないのですね。
イベントリスナーでの実行は中身のコードがNodejsでもフロント側で使うJSとして実行されてしまうという事なんですね。

ただするとどうやってNodejsをアドレスで指定して実行されながら、
htmlも実行してUIを表記するのでしょうか？
html内にNodejsも記載してファイルを分離しないようにするしかないという事ですか？
初心者なので初心者にもわかるように教えていただければ幸いです。
ただNodejsファイルをアドレスに入れたところコードは実行されずにconsole.log('hellow');という中身がそのまま表記されてしまいます。
恐らくサーバ側で実行されていないのでしょうが、
http://localhost:80/
で実行するにはどのようにしたらよいのでしょうか？

また、cloud9だとphpでつくったアカウントとは別にNodejs用のアカウントを作らないといけないのでしょうね・

回答No.1

drum_KT

<script src="scripts/hello.js"></script>

貼ってあるURLは見に行っていません（安全である保証がないので）。が、この書き方では、hello.jsがブラウザ側に読み込まれてしまうだけで、サーバ側で起動はしないのでは？