スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
Ajaxについて
Ajaxとは、ウェブブラウザ内で非同期通信をしてくれる技術です。
非同期通信とは、その名の通り、同期せずに通信を行うことです。ココで言う同期は、処理を「待つ」ということです。
通常のウェブサイトの仕組みは、URLにアクセスし、そのレスポンスを新たなページとして処理します。まぁ通常の画面遷移ですね。リンクをクリックしたら、別のページが表示されます。これが同期通信です。
これが非同期になると、画面遷移をせずに、裏（バックグラウンド）でページを読み込み、Javascriptと組み合わせればHTMLを書き換えたりできるので、より動的なウェブアプリが作れます。
Googleはこの技術を流行らせた第一人者なので例に上げると、Google MapやGmailがAjaxを利用してます。地図を動かすと、その先の地図が非同期に裏で読み込まれ、表示されていく部分がわかりやすいです。
やっていることは、ajaxで通信し、javascriptでHTML書き換えです。
一昔前は、Flashで魅せる時代でしたが、今はHTMLで済む時代になりました。
この便利なajaxをjQueryではとても簡単に使えるようになっています。
非同期通信とは、その名の通り、同期せずに通信を行うことです。ココで言う同期は、処理を「待つ」ということです。
通常のウェブサイトの仕組みは、URLにアクセスし、そのレスポンスを新たなページとして処理します。まぁ通常の画面遷移ですね。リンクをクリックしたら、別のページが表示されます。これが同期通信です。
これが非同期になると、画面遷移をせずに、裏（バックグラウンド）でページを読み込み、Javascriptと組み合わせればHTMLを書き換えたりできるので、より動的なウェブアプリが作れます。
Googleはこの技術を流行らせた第一人者なので例に上げると、Google MapやGmailがAjaxを利用してます。地図を動かすと、その先の地図が非同期に裏で読み込まれ、表示されていく部分がわかりやすいです。
やっていることは、ajaxで通信し、javascriptでHTML書き換えです。
一昔前は、Flashで魅せる時代でしたが、今はHTMLで済む時代になりました。
この便利なajaxをjQueryではとても簡単に使えるようになっています。
下記のサイトが、日本語の中で一番良くまとめられていました。
http://www.koikikukan.com/archives/2012/10/02-005555.php
当ブログでも簡単に紹介すると、
このようにして使います。
ちなみに、done、fail、alwaysは指定しなくても問題ありません。
次回は実際に使ってみましょう。
http://www.koikikukan.com/archives/2012/10/02-005555.php
当ブログでも簡単に紹介すると、
$.ajax({
url: 'db_add.php', // 裏でアクセスするURL
type: 'GET', // 通信タイプ。GETと、まだ説明してませんがPOSTもあります。
data: { // 渡したいデータです。typeでGETを指定したら、GET送信します。
vurl: "adult video",
thum: 'image URL'
},
dataType: 'html' // どんなデータが戻ってくるのか。受信するデータのタイプです。
})
.done(function( data ) {
// 成功したときの処理
// dataに、dataTypeで指定したデータタイプが入ってます。今回の例だとhtmlデータです。
})
.fail(function( data ) {
// 失敗したときの処理
})
.always(function( data ) {
// 通信が完了した時の処理
});
このようにして使います。
ちなみに、done、fail、alwaysは指定しなくても問題ありません。
次回は実際に使ってみましょう。
