jQueryを使ったAjax入門

jQueryで行うAjaxの基本的な構文

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ってAjaxを実装するにあたり、その基本的な構文の書き方について解説致します。
講師:
03:37

字幕

このレッスンでは jQuery を使ってAjax を実装するにあたりその基本的な構文の書き方について解説していきます。まずはダウンロードしてきたこちらの頭が 02_01 から始まるフォルダーの中に入っているこちらの index.html ファイルとindex.js ファイルをエディターで開いてください。そして、これがそれらのファイルを開いた状態です。これらのファイルを使って、今回のレッスンの解説を進めていきたいと思います。まずこちらの index.html ファイルは今回はあまり利用いたしません。1つだけこちらのボタンですね。input タグに付いているこちらのid のところだけ覚えておいてください。そして、次に index.js ファイルを見ていきます。こちらの部分では Ajax を行う為の基本的な構文が書かれています。それがこちらの部分です。こちらの部分を見ていく前にまずはこちらの部分から見ていきましょう。まず Ajax を発動する為にボタンのクリックイベントを記述しています。それがこちらの部分ですね。まず先程確認して頂いたinput タグに付いた id を指定してあげてそして on を使ってクリックイベントを登録します。 そして、こちらにはこのようにclick と書きます。そして、先程のボタンをクリックしたらこの getData というユーザー定義関数を発動するようにしています。この getData を定義しているのがこちらの部分ですね。こちらのこの getData のユーザー定義関数でAjax が発動するようにしています。では Ajax の基本構文を見ていきましょう。Ajax を発動させるためにはこのような形で記述します。まず $ マークのドット ajax と書いて( ) ですね。そしてこの間に { } と書きます。そしてその ( ) の後にドットと書いてfail と繋ぎます。そして fail の後に、更に (そしてこれの閉じる ) がこちらの部分にあります。そして、その中には function があってそして { } がありますね。そして、こちらの ) の後にもドットで繋いで、done と書きます。そして、同じく (そしてここに ) があって同じように function ですね。この中にあってそして { } といった形になります。このように Ajax の基本的な構文としてこちらの部分とこの fail の部分そして done の部分の大きく3つの構成に分かれるといった形になります。 この3つの構成部分に関しては以降のレッスンで順次取り上げていきますのでそちらも併せて参考にしてください。まずはこのレッスンにおいてはこの Ajax の基本のこの形を覚えておいてください。以上でレッスンは終了です。今回は jQuery を使ってAjax を実装するにあたりその基本的な構文の書き方について解説いたしました。

jQueryを使ったAjax入門

AjaxとはAsynchronous JavaScript + XML の略で、JavaScriptを使って非同期通信を利用しWebサイトのコンテンツを動的に書き換える手法です。このコースではモダンなWebサイト作るうえで必須の技術となっているAjaxjについて、その機能を簡単に実装できるjQueryを使って解説します。

1時間30分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年09月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。