jQueryでAjax実装

非同期とか何とかちょっと面倒くさいですが、要はブラウザー自体のHTTPリクエストとHTTPレスポンスをJS内部で完結できるってのがAjaxです。ブラウザーのリクエスト&レスポンスとは別で実行されるわけですからGUI的にはスムーズな動きとかが可能ですなんですが、内部はちゃんとリクエストとレスポンスがあるので、適当にやったらものすごいサーバー負荷になったりしますよ。
JavascriptをUIにしてWEBサーバーにアクセスするというだけでAjaxがどうしたこうしたという話ではなく「JavascriptをUIにしてWEBサーバーにアクセスする」ことができるようになった(そういう仕組を頭のよい人が考えてくれた)というものです。
ここではjQueryのAjaxを使っての説明です。

GETでリクエストして文字列を返す

DEMO
webサーバーに対してGETで文字列を取りに行くという最もシンプルなやり方です。これをブラウザー経由でやるとしたら、単に”/api/ajax/get_string”にアクセスして返ってきた文字列をconsole.log()に吐き出しているというだけです。アクセス先の”/api/ajax/get_string”は、

/api/ajax/get_string/index.html

とかつくって一行だけ適当な文字列を保存しておくとそれを取得することができます。

[jQuery部分]

$("#ajax").on('click',function(){
    $.ajax({
      url: "/api/ajax/get_string.php",
      type: "get"
    }).done(function(data){
        console.log(data);
    });
});

[HTML部分]

<div id="ajax">Ajax test</a>

ここまでが基本的なjQueryをつかったajaxの基本的な構文みたいなものになります。
ここからAjaxの通信失敗時の処理とかgetじゃなくてpostとか、取得する文字列のタイプ(text,xml,json)などいろいろ細かく設定して、getやpostで渡す引数がより複雑になったりするという感じになります。
2018年現在、だいたいの人がjsonで値を取得するのが主流になっている気がします。
あと、ちょっと前と書き方自体が変わってます。success()とかじゃなくてdone()になってたりとか。
実際のネイティブのJavascriptで書いたり、ajaxの関数がいろいろあったりで、書き方自体は様々です。私は軟弱なのでjQueryでやります。
jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編

POSTでリクエストして文字列を返す

DEMO
今度はPOSTします。getがpostになるだけですね。postの値はdata:{}で設定できます。jsonライクな感じ。
[jQuery部分]

$("#ajax").on('click',function(){
    $.ajax({
        url: "/api/ajax/post_string.php",
        type: "post",
        data: {
            id: 'foo',
            user: 'bar'
        },
        dataType: 'text'
    }).done(function(data){
        console.log(data);
        $("#out").text(data);
    });
});

[HTML部分] ※GETに同じ

<div id="ajax">Ajax test</a>

ここまでは特に問題なし。

GETでリクエストしてjsonを返す

DEMO
実際に使うときはかなり複雑なデータ、または大量のデータを返したりすることになるかと。また与えたパラメータによってレスポンスを変えるといったことになると思います。
[jQuery部分]

$("#ajax").on('click',function(){
    $.ajax({
        url: "/api/ajax/get_json.php",
        type: "get",
        dataType: 'json',
        timeout:1000,
    }).done(function(data){

        /* 取得したjsonデータのパース */
        $.each(data, function(k,v){
            $("#out").append(k+": ");
            $("#out").append(v+"<br>");
        });
    });
});

[HTML部分] ※GETに同じ

<div id="ajax">Ajax test</a>

Ajaxでたたくphpは返り値の形式がjsonになっていないとエラーになります。

{"format":"json","name":"hogehoge"}

という形式ですね。

POSTでリクエストしてjsonを返す

DEMO
IDとパスワードを入力したらユーザー情報を返すなんていうのがこの形式です。
[jQuery部分]

$.ajax({
    url: "/api/ajax/post_json",
    type: 'post',
    dataType: 'json',
    data : {
        "id" : "9999",
        "name" : "osamuya"
        },
    }).done(function(data){
        /* 取得したjsonデータのパース */
        $.each(data, function(k,v){
            console.log(k,v);
            $("#out").append(k+": ");
            $("#out").append(v+"<br>");
        });
    });
});

[HTML部分] ※GETに同じ

<div id="ajax">Ajax test</a>

他とたいした違いはないです。

非同期じゃないXMLHttpRequestをメインスレッドで使うのはもう駄目らしい

とはいえjQueryを使ったAjaxはもう終わりに近いらしいです。
https://xhr.spec.whatwg.org/#the-open()-method

Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user’s experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when current global object is a Window object. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.

あと5年はちょっとしたものに使ってもダイジョブだと思いますが。。

Last update: 2018.01.20 (土)