##はじめに
クライアント側から送られてきたリクエストに対して、ページを読まこまずして、ページの一部分が更新されるように、非同期通信を実装することができるのはJavaScriptの大きな魅力だと思います。
そのような機能を実現する技術「Ajax」について少し深掘りしてみました。
ちなみに今まで僕は「アジャックス」と読んでいましたが「エイジャックス」だそうです。
今まで「アジャックス」と言いながら人と話してる時に、「エイジャックスなのにな 笑」とか思われてたのかと思うと、穴を掘って入りたいです。
よろしくお願いします。
##Ajaxとは
ちなみにAjax(Asynchronous JavaScript + XML)です。
Ajaxは非同期通信を利用して、ブラウザ上でリロードを行うことなく、ページの一部分を更新できたりする通信技術のことを言います。
いちいち、全画面を読み込み直す必要がないので、ユーザーにとってもストレスフリーです。
##XMLHttpRequestオブジェクト
JavaScriptにあらかじめ定義されているオブジェクトで、ブラウザ上からサーバーにHTTP通信を行うときに使います。
##XML
Ajaxの名前にXMLとあったので気になっていました。
実はこれマークアップ言語の一つでした。マークアップ言語といえばHTMLなんかもマークアップ言語でした。
Extensible Markup Language の略で拡張可能なマークアップ言語という意味になります。
特徴としてはその名の通り、拡張性が高いことだそうです。要素の名前やデータの構造を自由に定義できるためデータの管理に向いていると言えます。
データの交換手段としても用いられます。
Ajaxではレスポンスとして返すときにこのXML形式できます。
しかしながら、現在はXML形式で返すことはあまりなく、Jsonという形でレスポンスを返す方が主流のようです。
AjaxにXMLって入っているのに、XMLじゃなくてもいいみたいです 笑
##Json
JavaScript Object Notionの略です。
異なるプログラミング言語間の橋渡しをしてくれるデータフォーマットです。かつてXMLがAjaxでその役割を担っていたけど、JsonはJavaScriptの記法をもとにしているので、JavaScriptに慣れている人からすれば非常にわかりやすいし現在開発には必ずと言っていいほどJavaScriptは使われるので、そのような背景からXMLにとって変わってJsonが使われるようになったのでは？と勝手に考察してみます。
##DOM
Document Object Modelの略です。
HTMLなどの構造を解析しデータを作成する仕組み(API）です。
解析されたHTMLは階層構造のデータと変換されます。この階層構造のデータをDOMツリーと言います。DOMツリーのように階層構造になってることによってCSSやJavaScriptで、idやclass名を指定し一部を加工することができます。
##Ajax処理の流れ
これまででできた用語で処理の流れを説明すると
まず、ブラウザ上でクライアントがイベントを発火させます（何かクリックするとか）
→JavaScriptでそれに対する処理を行い、XMLHttpRequestを使ってHTTP通信を行いサーバーにリクエストを送信します。
→サーバー側で受け取った情報（◯◯の情報が欲しいとか、保存するとか）を処理します。
→結果をJsonやXML形式で返してあげます。
→それを受け取って、DOMの仕組みを使って一部分だけを更新する。
これが、Ajax!!
##最後に
Ajaxとは様々な技術を組み合わせて実現された技術のことを言うのですね。
一つの技術や概念を構造から理解していくことはすごく大切かなと思います。できるだけブラックボックスはなくしていきたいです。