[JQuery] Ajaxが使える状態かどうかチェックする方法

JQueryでAjaxを行うときに、Ajaxが使える状態にあるかどうかを調べる方法についてです。
プログラムから離れている期間が長かった後、久しぶりにAjax関係に触れてみたら、Ajaxが動かずに苦労することがあったのでチェック方法をまとめてみました。

まず JQuery が正常に動いているかの確認です。
下記のようなコードで設定できます。バージョンは自分の使いたいバージョンに値を変更してください。

Contents

1 JQueryの動作チェック
2 Ajaxの動作チェック

JQueryの動作チェック

まず、JQueryをインポートします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

次に、リンクをクリックすると新しいページでウェブが開かれるというコードを記載してみます。

HTML

<a href="http://google.com">Google</a>

1	<a href="http://google.com">Google</a>

JQuery

<script type="text/javascript">
$(function(){
    $("a[href^='http://']").attr("target","_blank");
});
</script>

$(function(){

$("a[href^='http://']").attr("target","_blank");

});

</script>

これでリンクをクリックしてブラウザの新しいページ（タブ）でGoogleのページが開かれたら、JQueryは正常に動いています。

Ajaxの動作チェック

次に下記のコードをページのヘッダ部分に記載してください。

<script type="text/javascript">
$.ajax({
     success : function(response){
         alert('成功');
     },
     error: function(){
         //通信失敗時の処
         alert('通信失敗');
     }
 });
</script>

$.ajax({

success : function(response){

alert('成功');

error: function(){

//通信失敗時の処

alert('通信失敗');

}

});

</script>

ソースの記載後にページにアクセスしたら

このような画面が出れば、Ajax通信は行われています。

作っておいたソースをコピペして使うときに、前のサイトでは動いていたのが、今回は動かない！なんていう時は、環境がうまく整っていないこともあるので、環境が整っているかをチェックしましょう。

SearchLight