[Javascript] 便利で簡単なAjaxの書き方いろいろ(初心者学習用)

2023年2月2日

Javascript プログラミング 学習

eyecatch インターネットブラウザで利用するJavascript言語の最大のボトルネックは、ファイルやデータの読み書きです。 Nodejsを使ったサーバーサイドJavascriptはファイルの読み書きから、色々なサーバーサイド処理が行なえますが、 インターネットブラウザ側(いわゆるブラウザサイド)で実行されるJavascriptは、別のファイルをプログラムで読み込むのも一苦労です。 逆に考えると、ファイルを自由に読み書きできれば、webサイトを使ったシステム構築などがはかどるという事なんですね。 サーバーへのファイル書き込み処理はPHPやRuby、PythonなどのCGIアプリが必要なのでここでは読み込み方法のAjaxについて記述します。

カンタンAjax処理

もちろん、jQueryや他にも色々なライブラリを使って簡単に書いてもいいんですが、下記のように書くとライブラリなど無くても簡単にファイルが読み込めます。

読み込みデータサンプル

a,1,100 b,2,200 c,3,300

基本形

const path = 'test.csv' var req = new XMLHttpRequest() req.open("get", path, true) req.onload = loaded req.send(null) function loaded(e){ console.log(e.target.response) } ajax.jsをHTMLファイル内のscriptタグで読み込むと、test.csvの中身がコンソール画面に表示されます。

インスタンス形

基本形では、複数のファイル読み込みをした場合にコンフリクトを起こす可能性があります。 そこで、処理をインスタンス化して、データを閉じ込めてみます。。 function load(path){ var req = new XMLHttpRequest() req.open("get", path, true) req.onload = this.loaded req.send(null) } load.prototype.loaded = function(e){ console.log(e.target.response) } new load('test.csv') Javascriptでインスタンスのthisに埋め込むには、prototype内にfunction関数を埋め込めば良いんですね。

無名関数形

上記の2つはloadという関数がグローバル関数としてセットされますが、これをグローバルを汚さないように書きたければ次のようにします。 ((path)=>{ function load(path){ var req = new XMLHttpRequest() req.open("get", path, true) req.onload = loaded req.send(null) } function loaded(e){ console.log(e.target.response) } load(path) })('test.csv') console.log(typeof load) 前回までと同じ結果ですが、最後の行のload関数がundefinedになっていて、グローバルにはセットされていない状態であることが確認できました。 ((送られた値)=>{...})(送りたい値) この無名関数の書き方をマスターできれば、その中で使われる関数や変数はすべて、その中のみでの有効な状態にすることができて、無害プログラムが構築できます。 ちなみに、上記2つのパターンでtypeof loadとすると、"function"という値が返ってきます。

無名関数のもっと簡潔形

((path)=>{ const req = new XMLHttpRequest() req.open("get", path, true) req.onload = function(e){ console.log(e.target.response) } req.send(null) })('test.csv') だいぶ短くなりましたね。 読み込み語の処理を別の関数につなげたい場合は、onloadの箇所をつなげたい関数名にすればいいので、この書き方に慣れたほうがいいかもです。 ちなみに、pathをurlにしたら、apiサーバーなどから値を取得刷ることができます。 独自にapiサーバーを立てて、データベース読み込み処理などを書くと、いい感じのJavascriptでDatabaseを読み書きできるシステム環境が作れそうですね。

あとがき

今回のブログは、Ajaxって簡単に書けるという処理を理解してもらうと同時に、 Javascriptの書き方には複数パターンがあることを理解してもらえたら、このブログを書いた甲斐があったという事です。 Javascriptをゼロベースから書くのが苦手なフロントエンジニアの人に読んで理解してもらえると幸いです。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。