jQuery Academy · レッスン

AJAX操作

Q: 「AJAX操作」で何を学びますか？

AJAX操作 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

「AJAX操作」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン1/1です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全1レッスンが含まれています。

はじめに

こんにちは。

このレッスンでは、jQueryのAJAXメソッドを使ってリモートサーバーと通信する方法を学びます。

AJAX（Asynchronous Javascript And XML）は、Webページを更新せずにサーバーと非同期でデータを転送する技術です。

ページを更新せずにデータを転送できるため、特にユーザー体験が向上します。

Ajaxの例

実際、Facebook、Gmail、Youtubeなど、世界中で利用されている特に人気の高いWebアプリケーションでは、AJAX技術が頻繁に使われています。

AJAXを新しい技術だと考えるのではなく、Javascriptを使ってサーバーとクライアント間の非同期データ転送を実現する手法だと考えるとよいでしょう。

それでは、AJAXを使った関数の例を見てみましょう。

たとえば、youtube.comで動画を視聴して、「いいね」ボタンをクリックしたとします。この場合、いいねの操作はYoutubeページが更新される前に、バックグラウンドでYoutubeのサーバーへ送信されます。

これがAJAXリクエストによって行われる処理です。

Ajaxの例

AJAXリクエストの例を見てみましょう。

以下は、AJAXで作成した GETリクエストのコードです。送信先は https://api.coddykit.com/api/coddy-test です。

これはVanilla Javascriptで作成されているため、ご覧のとおり、構文が少し複雑です。

<div id="result"></div>

<script>
 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 
        && this.status == 200) {
      //we are writing the AJAX request response 
      //to div element that has result id
      var result = document.getElementById('result');
      result.innerHTML = JSON.stringify(this.responseText);
    }
  };
  xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
  xhttp.send();
</script>

警告

前に説明したとおり、jQueryはDOMを変更するライブラリであると同時に、AJAX操作を簡単にするメソッドも提供します。

Ajaxメソッド

jQueryを使うと、AJAXリクエストを管理するための非常にシンプルなメソッドを利用できます。

ajax()メソッドを使えば、Webで一般的に使われるget、post、putなどのHTTPメソッドを簡単に利用できます。

Ajaxメソッドの構文は次のとおりです。

$.ajax ({

url: 'remote URL'.

data: 'Data that we will send',

method: 'HTTP Method - Default GET',

success: 'Here, we should define function that work when Ajax get success result',

dataType: 'Interaction data type'

});

例を作成してみましょう

<div id="result"></div>

<script>
$.ajax ({
   url: 'https://api.coddykit.com/api/coddy-test',
   success: function(data){
   $('#result').text(JSON.stringify(data));
  }
});

</script>

Ajaxの例

AjaxのGETリクエスト

ここで例を改善してみましょう。

以下の例では、URL（https://api.coddykit.com/api/coddy-test）にajaxリクエストを送信しています。

HTTPメソッドを指定しない場合、デフォルトでGETリクエストが実行されます。

const https = require('https');

function ajax(url) {
  const callbacks = { success: [], fail: [], always: [] };
  const req = https.get(url, (res) => {
    let data = '';
    res.on('data', chunk => data += chunk);
    res.on('end', () => {
      callbacks.success.forEach(cb => cb(data));
      callbacks.always.forEach(cb => cb());
    });
  });
  req.on('error', (err) => {
    callbacks.fail.forEach(cb => cb(err));
    callbacks.always.forEach(cb => cb());
  });
  return {
    done: function(cb) { callbacks.success.push(cb); return this; },
    fail: function(cb) { callbacks.fail.push(cb); return this; },
    always: function(cb) { callbacks.always.push(cb); return this; }
  };
}

var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
  .done(function() {
   //success callback
  /*
  If our get request is sent to 
  the server with success (HTTP 2xx), 
  this function is called.
 */
  })
  .fail(function() {
   /* This function works 
       if the AJAX request fails.
   */
  })
  .always(function() {
   /*
   This function works in all cases when 
    the AJAX request is 
    successful or unsuccessful.
   */
  });

getメソッド

$.get()メソッドとGetリクエスト

$.get() メソッドを使って、サーバーにHTTPのgetリクエストを送信できます。

このメソッドはjQueryが提供しているもので、Vanilla Javascriptよりも簡潔で書きやすいコードでGETリクエストを送信できます。

例を作成し、コードがどれほど短くなっているか確認してみましょう。

<div id="result"></div> 

<script>
$.get("https://api.coddykit.com/api/coddy-test", 
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

Postメソッド

$.post()メソッドとPostリクエスト

$.post() メソッドを使って、サーバーにHTTP Postリクエストを送信できます。

例を作成し、コードがどれほど短くなるか確認しましょう。

特にWebフォームをサーバーに送信する場合など、Postリクエストは頻繁に使用します。

<div id="result"></div> 

<script>
$.post("https://api.coddykit.com/api/coddy-test", 
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

Putメソッド

Putリクエスト

$.put() メソッドを使って、サーバーにHTTP Putリクエストを送信できます。

例を作成してみましょう。

<div id="result"></div> 

<script>
$.ajax({
method:'PUT', 
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

Deleteメソッド

Deleteリクエスト

$.delete()メソッドを使って、サーバーにHTTP Deleteリクエストを送信できます。

例を作成してみましょう

<div id="result"></div> 

<script>
$.ajax({
method:'DELETE', 
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

リンク

以下のリンクから、AJAXメソッドの例と詳しい情報を確認できます。

おめでとうございます

おめでとうございます 🎉

このセクションでは、jQueryによるAJAXについて学びました。

jQuery For Beginners Courseを受講していただき、ありがとうございました。 🎉🎉🎉

これで試験を受けて、jQuery Tutorial For Beginnersコースの証明書を取得できます🚀🚀🚀

よくある質問

「AJAX操作」レッスンは無料ですか？

はい。「AJAX操作」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全1レッスンが含まれています。

「AJAX操作」で何を学びますか？

AJAX操作ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/1です。

「AJAX操作」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

← jQuery Academyに戻る