生活情報オンライン

ITエンジニアが役立つ情報を発信します。

今さらAjaxを解説!私は転職面接で聞かれて回答できませんでした。

インターネット関係の業務を主とする企業の転職面接で「得意な領域はどこですか?」と聞かれました。私は「HTTP通信の部分が得意です。」と答えました。

 

しかし、続く「Ajaxとかやったことあるの?」という質問には「よく聞きますが、やったことはありません」としか答えられませんでした。

 

やったことあるような気がするな~と思っていたのですが、詳しく回答できないと判断してやったことがないと回答したのです。このことが帰りの電車中ずっと頭を離れませんでした。

 

では実際にはどうだったのか。すっかり忘れているので調べてみました。

 

 Ajaxとは

まずAjaxって何なのか。wikipediaにはこうある。

ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。

引用:Ajax - Wikipedia

 なるほど。わからん。ダイナミックHTMLって何?

ダイナミックHTMLとは

調べてみると、ダイナミックHTMLってのは動的な処理をするHTMLのことのようだ。要は最近のWebページは大体がダイナミックHTMLです。スクロールするとページトップへ行くボタンがフェードインしてきたりするでしょ。アップル製品のWebページはON/OFFの切り替わるでしょ。そうやって動的に作られたHTMLページがダイナミックHTMLです。

 

では次の疑問。非同期通信って「どこ」と「どこ」の非同期通信のこと?

Ajaxの非同期通信とは

調べてみると、「ブラウザ」と「サーバー」との非同期通信のことのようだ。サーバーはWebサーバーのことだよね。Tomcatとかの。詳しくはこちらをどうぞ→HTTP通信の仕組みを解説。非同期通信とは何か。

 少々雑かもしれないが絵として表すとわかりやすかろう。

f:id:somegoro:20160528044514p:plain

ふむふむ。今のところは大丈夫そうだ。さらに詳細をみていく。

DHTMLが登場した当初は、ページの動的な装飾にのみ有用と考えられていた。しかし、Web技術者の実験的なコーディングの結果、JavaScript上で非同期通信を記述することで、業務や実用に耐える優秀なインターフェースを備えたアプリケーションをHTML+CSS+JavaScriptで作成可能であることが徐々に判明して行った。
従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取ることで画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる。 例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していく(インクリメンタルサーチ)といったことが可能になる。

引用:Ajax - Wikipedia

 なるほど。

GMailの検索ボックスとかは決定ボタンを押さなくても結果が表示されるもんね。あれは確かに便利だ。知らない間にAjaxの恩恵に預かっていたんだ。

 

Ajaxについて、「何者なのか」そして「理屈」は理解することが出来ました。さて、肝心の私が開発したことあるかですが、

バリバリあります!!

ていうかこれjQueryですね。jQueryではこんな処理多発しますよ。Ajax使ったことないのにHTTP通信が得意とかさぞかし技術レベル低いと思われたことでしょう。さらに私の場合jQeryも得意ですといってあったらからなおさらのことでしょうなー。

 

こちらも調べてみると、そもそもjQeryはAjaxのフレームワークだったんですね~。何も知らずに使っていました。

 

ということで、次回の転職面接で聞かれた際には十分な回答が出来るかと思います。

それではAjaxについての記事でした。 

 

実装レベルの詳細については次の記事が明るいです。

beck23.hatenablog.com

qiita.com