【jQuery】Ajaxでサーバー側にアクセスする

こんにちは、マリンです。

今更ながら、「Ajaxでサーバーのアクセスする」と言う意味がわかりました。

というか、それで何ができるのかということがわかったので、

嬉しくて思わず書き記したくなりました。

Ajaxとは？

ウィキペディアによると、

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

……え、なんて？？

理解力の乏しい私にはなかなかです。。。

順を追って噛み砕いてみましょう。

従来とAjaxの違い

通常のデータ通信は同期通信と言って、

クライアントがサーバーへリクエストを送り、

そのレスポンスを受け取って画面遷移を行うという流れです。

クライアントとサーバーのリクエスト・レスポンス、

それぞれの送受信のタイミングが揃っていないといけないので、

レスポンスが帰ってくるまでの間他の処理はできません。

双方が同期しているので、同期通信です。

一方ここにある非同期通信とは、

「リクエストは送るが、レスポンスが帰ってくるのを待たない」

という通信方法です。

待たないということは、その間に別の処理を行えるということです。

更に「ウェブブラウザ内で」という点もポイントです。

つまりJavaScriptがこの送受信を行ってくれるので、

画面遷移をしなくて済むということです。

よくある例ですが、Google mapで見てみましょう。

Google mapは地図をドラッグすると、自動的に新しい未表示部分を表示してくれますよね？

これはJavaScriptが足りない地図を非同期通信でリクエストしてくれているからです。

レスポンスを待たないのでドラッグし続けられるし、

画面遷移しないのでいちいちリロードすることもありません。

つまるところ

XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、

リクエストは送るけどコレ非同期通信だから、

通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。

結果出たらそれに合わせて画面調整するから教えてね。その間に先進んどきます！

ということを可能にする仕組みがAjaxです。

語弊があったら指摘してください！！

Ajaxを使ってサーバーにアクセスする

さてここからが本題です。これによって何ができるのか？

まぁ、上にあげたことが全てではあるのですが、

理解が浅かったせいで気づかなかったんですね。

JavaScriptを使ってサーバーにアクセスするってことは、

ブラウザ側でデータ扱えるってことじゃないですか！

仕事でjQueryとかも書くようになってきた最近。

「あ〜。。。でもここJSだからデータ取ってこれないもんなぁ〜。。。」

ってことが度々ありました。

これを解決してくれるわけですね！

いや、そもそもそのためでしょ？ってのはよくわかってますから！

なので今更ながらAjaxの利用価値に気づいたというお話です。

使い方

では使い方。むしろ本題はこっちか。

Railsを使っているのでCoffeeScriptの記述方式です。

jquery-rails 4.3.1を使っています。

$.ajax "url"
    success: (value) =>
        // 通信成功時の処理内容
    error: =>
        // 通信失敗時の処理内容

$.ajax "url"

でurlのサーバーにアクセスします。

success: (value) =>

これ以降に通信に成功した時の処理を記述します。

引数のvalue（名前は自由）にサーバーから返された値が入ります。

error

これ以降に通信に失敗した時の処理を記述します。

引数を取る場合はsuccessと同じようにしてください。

因みに、サーバー側から返す値はJSON形式にする必要があるようです。

def return_jquery
    # result = 処理
    render json: result
end

こんな感じで。

以上となります。

理解できたことが嬉しくて書きましたが、

単に自分の理解力の無さが露呈しただけで終わりました。。。

ご指摘がございましたらぜひともご教示ください。