5. Ajax

Webでのページ遷移とAjax

• まずは旧来のWebの仕組みの確認：
  • クライアントからサーバにHTTPリクエストを送ると
  • サーバからのレスポンスが返ってくる。
  • そのタイミングで、一旦ブラウザの画面がクリアされ、
  • レスポンスとして送られてきたコンテンツが画面に表示される。
    • つまり、ページの遷移（まるごと書き換え）が発生する。
• Ajaxとは何か
  • HTMLでリンクをクリックしてもページ遷移をせずに
  • 通信を行い、その結果がページの内容に反映される技術
  • 昨今はクリック以外のタイミングでも通信が発生する。
• 動作の概要
  1. クリック
     （HREFパラメータのない、または値として”#”などが設定されたAタグ、や
     actionパラメータのついたform に含まれない INPUT要素、 あるいは BUTTON要素など）
  2. それらの onClick属性（またはイベントリスナー）で、 JSのコードが呼ばれる。そのコードの中で、
  3. 後述の方法で通信が発生する。
  4. 通信が完了した時点で($.ajax()に第２引数として渡した）コールバック関数（後述）が呼ばれ、その中で、
  5. 何らかのDOM操作が行われ、画面に変化が現れる。
• ネイティブJSの場合：
  • 関数（オブジェクトでもある）XMLHttpRequestがすべてのモダンブラウザに実装されている。

• jQueryの関数:

  ＄関数

  • jQueryのドキュメントにajaxの章があり、
  • jQuery.ajax(を略記する $.ajaxという書き方が一般的)と、
    それを（HTTPのメソッドごとに用意された）簡略に呼ぶAPIが用意されている。

  クロスドメイン

• クロスドメイン制約とその回避

  • JSONP と コールバック
  • $.getJSON 関数（jQueryの新しい機能）

• 実例：郵便番号検索

    doctype html
    script src=src="https://code.jquery.com/jquery-3.1.1.min.js"
    p 
      span zip:
      input value="386-1298"
      button go
    #result
    javascript:
      function go() {
        var zip=$('input').val()
        console.log(`zip=${zip}`)
        $.get(`http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}`,(data)=>{
          $('#result').textContent=data
        })
      }
      $('button').click(go)
  

  =>SLIMソース、HTML版

• ただし、上記のコードは、クロスオリジン制約により、 殆どのブラウザで動作しないだろう。

  • 回避策として、$.get でなく $.getJSON を使うよう変更してみる。

        $.getJSON(`http://zipcloud.ibsnet.co.jp/api/search?zipcode=${zip}&callback=?`,(data)=>{
        	var rslt=""
            $.each(data.results, (i, item)=>{
              var r=item.address1+item.address2+item.address3
              rslt+=`<p>${r}</p>`
              console.log(rslt)
              $('#result').append(rslt) 
            })
          })
    

  =>SLIMソース、HTML版

コールバック関数について（補足）

• C, Java等の逐次型プログラミング言語では、関数呼び出しは「同期型」で行われてきた。すなわち、
  1. 関数が呼び出される
  2. その関数の実行が終了するまで、呼出元のコードの実行は待つ（次の行・文・式に移行しない）。
  3. 呼び出された関数の実行が終了し、戻り値が返される。
  4. その返された戻り値を（おそらく）使って、次の処理・計算が行われる。

  というような流れであった。

  • 言い換えれば、「結果の値」と「結果に対する処理」とを、呼出元の責任で出会わせる、という考え方。
• JavaScriptでは、「非同期型」の呼出が頻繁に使われる。
  • その典型例は前に紹介した関数 setTimeout および setInterval で、
  • 第１引数に（時間がきたら）「何を」（させるか）に相当することを記述する仕様になっている。
  • $.ajax(やその仲間の関数）でも同様に、 　　 サーバとの間の一往復のHTTPによる通信 （コンピュータの速度から見ると格段に時間がかかる）が終了するのを待つのではなく、
    「あとはよきにはからえ」的に要求だけ出しておいて関数を終了する（プログラム上は次の行に移る）。
  • 実際に「よきにはからえ」ですませる訳にはいかないので、代わりに、「（通信の結果として）応答が帰ってきたら何をするか」を指示する、
  • それがこの引数である。

  ラムダ式

• 「何を」に相当することを指示する書き方としては以下の２種類から選んで使うことができる。

  1. 無名（匿名）関数 あるいはラムダ式と呼ばれる形：
     JavaScriptでは以下の２つの記法が（ほぼ同じ意味のものとして）使える。

        function (引数列) { 処理... } 
     
        (引数列) => { 処理... }
     

     （上の $.get、$.getJSONの例を参照）

  2. 予め名前をつけて定義してある関数の、関数名。（使用例はたとえばここ）
  3. プログラムとして解釈して実行することができる文字列。（使用例はたとえばここ）
  • ただし３の記法はあまり使わないほうがいいとされている。
  • なお、近代プログラミング言語ではJavaScriptに限らず概ねどれでも1,2の記法が使える。
  • HTMLのタグの属性（たとえば onClick属性）の値として渡すという場面では、2,3が使える。