ajaxのjQueryのバージョンによる基本的な書き方

ajaxはぺ－ジを更新しなくてもペ－ジの中身を入れ替えたりすることができる非同期処理を行うことができます。

そのためajaxは多くのサイトで使用されています。

今回はajaxの基本的な書き方を紹介していきたいと思います。

ajaxはjQueryのバージョンによって書き方が異なります。

旧バージョンの書き方に慣れている人も多いと思いますが新しいjQueryのバージョンで書き方が少し変わっているので注意しましょう。

ajaxの基本的な書き方

jQuery1系～のajaxの書き方

jQuery.ajax({
	url: "https:〇〇〇〇",
	type: "post",
	data: {
		// データを指定
	}
})
.then(
// 1つめは通信成功時のコールバック処理
function (data) {

},
// 2つめは通信失敗時のコールバック処理
function () {
	//エラー
}

jQuery2系のajaxの書き方

jQuery.ajax({
         url:'https:〇〇〇〇',
         type:'post',　　
         cache: false,       
         dataType:'html',
         data:data,
         success:function(mydata){
             ～
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log("XMLHttpRequest : " + XMLHttpRequest.status);
　　              console.log("textStatus     : " + textStatus);
　　              console.log("errorThrown    : " + errorThrown.message);
                        }　

         }
});

jQuery3系のajaxの書き方

jQuery.ajax({
         url:'https:〇〇〇〇',
         type:'post',
         cache: false,
         dataType:'html',
         data:data,
      .done(function(response) {
         ～
      })
      .fail(function(xhr) { 
         ～
      })
      .always(function(xhr, msg) {
         ～
});

jQuery2系と書き方はほとんど同じですが違うところはajax通信が成功、失敗、完了したときの処理の書き方が違います。