jQuery – Ajax関数によるGET通信とPOST通信

jQueryの導入

jQueryはDOM(Document Object Model)を操作するためにJavaScriptを元に設計されたJavaScriptの拡張ライブラリですが、導入するには以下の方法があります。

  1. CDN(Content Delivery Network)をオンラインで使う(テーマ)
    jQuery本体非圧縮版 : http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js
    jQuery本体圧縮版 : http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
    jQuery UI非圧縮版 : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js
    jQuery UI圧縮版 : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
  2. 自サーバーに配置(WordPress本体)
    wp-includes/js/jquery/jquery.js

ブラウザの役割は、ユーザーが要求したURLのリソースをサーバーに要求して、ブラウザウィンドウに表示(レンダリング)することですが、内部では以下の2つを行なっています。

  1. HTMLを読み込むことでDOMを生成
  2. JavaScriptやjQueryがプログラムからDOMにアクセスできるようにNodeインターフェイスを提供

nodeインターフェイスを通してアクセスできるDOMの最上位オブジェクト(エレメント)は、html開始タグ<html>とhtml終了タグ</html>から生成されるdocumentオブジェクトです。

JavaScriptとjQueryの実行タイミング

ブラウザがHTMLページの読み込み時に処理を実行させる方法は主に3つあります。

  1. bodyタグのonload属性に関数指定
  2. JavaScriptのwindowオブジェクトに対してonloadでイベントを発生
  3. jQueryでDOM構築直後に処理を実行させる。

bodyタグを読み込んだ瞬間に、onload属性に指定したJavaScript関数を実行させるタイミングは、JavaScriptのwindowオブジェクトに対して関数onloadを呼び出すwindow.onloadと余り変わらないようです。

HTMLタグ内のonload属性に関数指定する場合

JavaScriptのwindowオブジェクトに対してonloadでイベントを発生させる場合

jQueryで関数指定する場合

一方でjQueryは、セレクタ(処理対象となるDOM要素を指定するための記法)に対してメソッド(処理)をドットで繋げていく言語であり、基本形は

ドル記号(”セレクタ”).メソッド(パラメータ);

であり、DOMが構築された直後に実行されるので速いです。

DOM構築後に実行する部分を中カッコ{~}内に記述しますが、その中括弧を囲む部分の書き方はいろいろあります。

例えば$(document).ready(function($){~});は「document構築準備が整ってからfunction内部を実行しろ」という意味になります。

また$(ドルマーク)はjQuery関数そのもののエイリアスなので、$(function(){~});とjQuery(function(){~});は同じ意味になります。

HTTPプロトコルのGETとPOST

以前PHPのデータ受け渡しについて以下のように書いたことがあります(「PHPによるHTMLフォームからのデータの受け取り方」から)。

HTMLフォームにデータを入力させて、ブラウザからデータをサーバーのファイルに引き継ぐ場合に使うのがGETメソッドかPOSTメソッドで、これらは全部HTTPプロトコルの中に定義されています。

ただ言葉の意味から考えてみるとGETはフォームに入力したデータを元ににサーバーから情報を取得することに重きを置いており、Google検索やWordPressの下書きとして保存などはGETです。

GETメソッドは、URLの後ろに「?」で始まり、「=」で結ばれた名前と値を「&」で連結したクエリ文字列によってデータを引き継ぎます。

一方POSTはフォームのデータを投稿することに重きを置いており、WordPressの新規投稿はPOSTになります。

ちなみにURL(Uniform Resource Locator)は、現在ではより広義のURI(Uniform Resource Identifier)と呼ぶほうが適切らしいです。

しかしこの言葉がイマイチ一般に普及しきれていないのは、インターネットユーザーにとって呼び方は何であれ「インターネット上のアドレスを表すもの」という意味が重要なのであって、いまさら変えることに意味がないからかもしれません。

jQueryの$.ajax()関数とコールバック関数

ページのリフレッシュなしで、サーバープログラムにデータを渡して処理結果を受けとることができるAsynchronous(アシンクロナス)な非同期通信ですが、$.ajax()関数の引数としてfunction()というコールバック関数が渡されています。

サーバーから取得する元情報も、$.ajax()関数内で引数として渡す書き方も、キーと値で定義していくJSON形式に準拠しています。

JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている(Wikiより)。

サーバーから取得するJSONフォーマットのデータ

$.ajax()のshorthandメソッドである$.get()と$.post()

非同期通信でユーザービリティを高めるためには、AjaxをJavaScriptでガチで実装するよりjQueryのAjax関数、特にshorthandメソッドを使うと実装が楽です。

$.ajax()関数のshorthandメソッド(ショートカットみたいなもの)が$.load()や$.get()であり、引数の書き方が$.ajax()関数よりも簡素化されています。

show.php

こんな投稿も読まれています