前置き

Ajaxとは、「Asynchronous JavaScript + XML」の略で、ブラウザ内でJavaScriptの通信機能を使って、XML形式のデータを送受信する技術のことです。

1.他画面遷移とは?

他画面遷移とはログイン画面で新規登録をクリックすると、
アカウント登録画面に移動するように、別のページへ遷移することを意味します。

2.自画面遷移とは？

一方、自画面遷移とはログイン画面でログインが失敗して「パスワードが間違っています！」というエラーメッセージが表示されるように同じ画面（同じURL）が帰ってくる処理です。
この時、Ajaxで書かれていなければ、全てのHTMLのソースコードが読み込まれています。（同期通信と言います）

同期通信では、ページ表示のためのHTMLとjavascript両方のソースコードが全て帰って来るため、再度ページが更新されています。

3.非同期通信(Ajax)とは？

非同期通信とは、自画面遷移の一種です。”ログイン画面”でログインに失敗した際、同期通信では”ログイン画面”で使われている全てのHTMLコードとjavascriptコードが帰ってきますが、非同期通信では、ページの更新はせず、「パスワードが間違っています！」というメッセージだけが帰ってきます。

つまり、必要な情報のみ取得して表示させています。
なので同期通信よりも速度が早くなります。

4.Ajaxコードの書き方

Ajaxのソースコードの例は以下の通りです。


$('#button').on('click', function(){ 
  // Ajax通信を開始
  $.ajax({
    url: 'controller.java',　//接続するクラス名(phpでもok)
    type: 'GET',　　　　　　　 //GET通信なのか、POST通信なのか
    dataType: 'json',　　　　 //javaに送信するデータのタイプ
        data: {　　　　　　    //この形式の書き方をjsonと言います。
        userid: 1,           //useridという変数名に1という情報を保持
        password: 'hoge',
    },

  })
  .success(function(result) { 
      // 通信成功時の処理を記述(resultにはjavaから取得してきた情報を保持している）
  })
  .error(function(result) {
      // 通信失敗時の処理を記述
  });
})

ajaxとは?【初心者向け】

前置き

目次

1.他画面遷移とは?

2.自画面遷移とは？

3.非同期通信(Ajax)とは？

4.Ajaxコードの書き方