JavaScript | ajaxをJavaScriptとjQueryで書いてみた【振り返り】

どうもかわうそです!

今日は『JavaScript | ajaxをJavaScriptとjQueryで書いてみた【振り返り】』というテーマで書いていきます。

かわうそはひそかに、『JavaScriptを社内一、極めたい 』 と思っています。

今回のajaxも、今までjQueryでなんとなくコピペして使っていました。

JavaScriptでどうやって書くんだろう?と気になったので、ちょっと調べて自分でも書いてみました。

この記事は、自分用の振り返り、備忘録的なものになっています。

ajaxとはそもそも

JavaScriptを使って非同期でhttp通信を行い、xml形式でデータをやり取りする

って感じ。

これを英語にして、省略するとAjax。

もはや XML形式ではなくJSONしか使わない気がするので、A-JSON(エージェイソン)とかどうだろう。

JavaScriptでajaxをしてみたよ

こちらの記事を参考にさせていただきました。

分かりやすかった!

JavascriptのAjaxについての基本まとめ - Qiita
Ajaxとは Asynchronous JavaScript + XMLの略。 すなわちJavascriptとXMLを使用して非同期(Asynchronous)でページ内容を更新する技術のこと。 ①クライアントから非同期更新に...

今回書いてみたコード

js

php

デモサイトはこちら

phpで現在時刻を取得し、それをajaxで持ってくるだけの簡単な内容です。

感想としては思っていたよりもコードが短く澄んだ!という印象です!

JavaScriptの学習を続けてきた成果か、理解はそんなに難しくなかったです。

XMLHttpRequestオブジェクトの作成

これで、『XMLHttpRequest()オブジェクト 』 を作成しています。

これ以降はreqを使用し、用意されているプロパティやメソッドを使っていくんだなぁ、と流れを想像できました。

httpリクエストを作っていく

phpファイルのどうやってアクセスするかの仕組みを作っていきましょう。

とはいえ、書くのは二行だけ。

こちらでhttpリクエストの設定をしています。引数に指定の値を入力していきます。

通信形式はGET、リクエスト先のurl、非同期モードで通信をするかどうか = true をぶち込みました。

sendメソッドでリクエストを送ります。GETなのでnullでok。

POSTの場合は、何かしらぶち込んでください。

GETは取得、POSTは付与や更新で使用すると思います。(たぶん。。。)今回は取得ですね。

非同期通信の場合は、リクエストがサーバーに届くと取得結果がイベントとして返ってきます

この辺が参考になるかもです。

GETとPOSTの違いについて - Qiita
はじめに GETとPOSTの違いを最低限理解することはWebサービスの開発を始めようとする初学者にとって最初の障壁の一つであると考えています。 これはあなたが実現したい機能があった時に、GETでもPOSTでもどちらでも同じこと...
XMLHttpRequest.send() - Web API | MDN
XMLHttpRequest の send() メソッドは、リクエストをサーバーに送信します。

最終的に毎秒通信をするために、setIntervalで通信を1秒ごとに送るようにしました。

※ 処理が重なってしまう可能性があるので、ほんとはsetTimeoutがいいと思います。後述するjQueryではsetTimeoutを使用。

これでajaxの通信自体が可能になったはず。

次は返ってきたイベントの処理が必要です。

onreadystatechange メソッドで通信状態を監視

いきなりでてきたこいつonreadystatechange ですが、落ち着いて対応しましょう。

その文字のごとく、通信状態が変化したときに呼び出されるメソッドです。

readyState == 4 で通信が完了したかどうかを判定しています。

※つまり最初のelseは、通信が完了していない = 通信中ってことです。

ただ通信自体が終わった = 成功したのか失敗したのかが判定されていません。

通信が成功していれば req.status == 200 です。

その時、echoで返されるphpファイルの結果を、指定のHTMLのテキストに上書きしなさいって処理ですね。

XMLHttpRequest.onreadystatechange - Web API | MDN
EventHandler で、 readyState 属性が変化するたびに呼び出されます。コールバックはユーザーインターフェイスのスレッドから呼び出されます。 XMLHttpRequest.onreadystatechange プロパティは、 readystatechange イベントが発生するたびに、つまり XMLH...
XMLHttpRequest.readyState - Web API | MDN
XMLHttpRequest.readyState プロパティは XMLHttpRequest クライアントの状態を返します。XHR クライアントは次の状態のいずれかをとります:

これで思った通りの動きが始まりました!

デモサイトはこちら

jQueryでのajax

続いてはjQueyでのajaxです。

jQueryはたくさんコードがあると思うので、詳しい説明は省きますね!

今回は、setTimeoutを使うことで、前の処理が終わった後に、次の処理を予約するようにしています。

処理の終了時に、setTimeout自身を呼び出して無限ループさせています。

リレーでいうと、ゴールで自分自身にバトンを渡して、また走って・・・なんという無限地獄

jQueryのほうが直感的

結局jQueryのほうがいろいろと直感的で分かりやすくて使いやすいですね。

設定をオブジェクトで渡せるというのもありますが、無理してJavaScriptを使う必要性は感じませんでした。

とはいえ、レベルアップのためには、jQueryだけでは見えない裏側のJavaScriptの動きは知っておくべきだと思います。

イレギュラー処理やセキュリティなど、もっと勉強しないと実際の現場では使えないことが大きそうです。

例えばtimeout機能を付けないと、スマホで通信していて、地下鉄に入って電波がなくなった・・・

なんてシーンで、どれだけ待っても通信が終わらずページが表示されない => 離脱原因

になったりもするみたいです。

もっともっと勉強していきます!

フォローする