ajaxとは?【初心者向け】

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

#目次
1.他画面遷移とは?
2.自画面遷移とは?
3.非同期通信（Ajax）とは?
4.Ajaxの書き方（jquery）

Ajaxについて知るためには1~3の知識を身につけると理解が深まります。
※非同期通信について理解している方は目次の4まで読み飛ばしてもらって構いません。

#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) {
      // 通信失敗時の処理を記述
  });
})