Webページ全体の更新をしないで、一部分だけ更新する技術をAjaxといいます。

jQueryのバージョンによってAjaxの書き方が変わっているので、jQueryのバージョンに合わせた書き方をしなければなりません。

jQuery 1.8以降での書き方を紹介します。

Ajaxの基本的なテンプレート

<script type="text/javascript">
    
$(function () {
    $('a').click(function (event) {
       event.preventDefault();
    }),
        
    $.ajax({        
        url: "test.php"
        type: 'POST',
        data: {val:"test"},
        timeout: 10000,
        dataType: 'text'
    }).done(function (data) { //Ajax通信に成功したときの処理
        alert('success');
    }).fail(function (data) { //Ajax通信に失敗したときの処理
        alert('error');
    }).always(function (data) { //処理が完了した場合の処理
        alert('always');    
   });
});

</script>

.doneは通信に成功した場合
.failは通信が失敗した場合
.alwaysはdoneかfailを含めて処理が完了した場合

// HTMLでの送信をキャンセル
event.preventDefault();

Ajaxを行うとき、a要素をクリックしたときにリンク先に飛んでしまうのをキャンセルする処理です。

Ajaxの利用例

Ajaxでtext.phpのファイルの内容を表示させてみます。

<script type="text/javascript">
$(function () {
    $('a').click(function (event) {
       event.preventDefault();
    }),
        
    $.ajax({        
        url: "test.php"
        type: 'POST',
        data: {val:"test"},
        timeout: 10000,
        dataType: 'text'
    }).done(function (data) { //Ajax通信に成功したときの処理
 　　　　$("#ajax").html(data);
    }).fail(function (data) { //Ajax通信に失敗したときの処理

    }).always(function (data) { //処理が完了した場合の処理  

   });
});

</script>

//HTML
TEST

divのTESTと表示されている部分に、test.phpで返されたデータが表示されるようになります。

　$(“#ajax”).html(data)でidがajaxのクラスの中身を書き換えます。