Monthly Archives: 6月 2016

$.ajaxメソッドの主なパラメータ 一覧まとめました

jQueryでAjax通信を行うには$.ajaxメソッドを利用することになります。
ajaxメソッドには指定できる主なパラメータが複数あるので、ここにまとめみました。

分類 パラメータ 概要 デフォルト値
基本 url 通信先のURL (現在のページ)
type 使用するHTTPメソッド(GET/POST) GET
dataType 応答データの種類
(xml/html/script/json/jsonp/text)
xml/html
data 送信するデータ(ハッシュ形式)
処理 beforeSend リクエスト送信前に実行するコールバック関数
(引数はXMLHttpRequestオブジェクト)
complete Ajax通信完了時に実行するコールバック関数
(引数はXMLHttpRequestオブジェクト、ステータス文字列)
error 通信失敗時に実行するコールバック関数
(引数はXMLHttpRequestオブシェクト、ステータス文字列、Errorオブジェクト)
success 通信成功時に実行するコールバック関数
(引数は応答データ、ステータス文字列、XMLHTTPRequest)
設定 timeout 通信タイムアウト時間(ミリ秒)
contentType リクエストのコンテンツタイプ application/x-wwwform-urlencoded
async 非同期通信を行うか true
dataFilter 応答データをフィルタリングする関数
global グローバルイベントを有効にするか true
jsonp JSONPによる要求を行う際に利用するパラメータ名
cache キャッシュを行うか true
ifModified リクエストの内容に変更があった場合のみ通信を成功させるか false
processData dataオプションの内容をクエリ文字列に変換するか
(falseの場合はオブジェクトをそのまま送信)
true

ajaxを利用する上で、これらのパラメータがどんな意味を持っているのか確認しておくと、ajaxの理解が早まると思います!

この記事がみなさんのお役に立てれば幸いです。

Ajaxで簡単にローカルファイルを取得してみました!

今回はajaxを利用して、ローカルファイルを取得する方法をまとめてみました。
ajaxの練習で確認してみたり、これを応用して意図したファイルを取得してくるのに活用できるかと思います。

<script>
    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    url: 'sample.html',
                    dataType : 'html',
                    success: function( data ) {
                        $( '#sample-text' ).html( data );
                        $( '#sample-result' ).html( '<hr/><font color="blue">読み込みOK(IE,FireFox,SafariはOK)</font><hr/>' );
                    },
                    error: function( data ) {
                        $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
                    }
                } );
            }
        );
    } );
</script>

</head>
<body>
    <h1>Ajaxを利用してローカルの外部ファイルを読み込みます。</h1>
    <p>
        <input type="button" id="ajax-button" value="gooo"/>
        <br/>
    </p>
    <div id="sample-result"></div>
    <div id="sample-text"></div>
</body>

今回取得してくるhtml
sample.html

<p>testtest</p>

[demo]
http://htmlcsslaboratory.com/develop/javascript/ajax/index.html

何となくajaxには難しそうな印象を持っている方は少なくはないかもしれませんが、型を理解してしまえば何てことはないです!
また、ajaxについて簡単にまとめた記事を作成しようと考えていますので、時間のあるときに確認していただけたら、幸いです。

Cookieを利用して、訪問回数をカウントする方法

今回はcookieを利用して訪問回数をカウントする方法をまとめてみました。

javascriptが得意でない人でも、後からアレンジしやすいようにコメントを多めに入れておきましたので、よろしければ参考にご利用ください。

<script>
var cook; //cookieデータを格納する変数
var cStart,cEnd; //訪問回数部分を切取る為の位置を格納
var cnt; //訪問回数を格納

//cookieが使えるか確認
if (navigator.cookieEnabled){
  cook=document.cookie + ";"; //変数cookにcookieデータを入れる
  //変数cStartにカウントデータの最初の位置を入れる
  //indexOf()で指定した文字列を検索しています
  //この場合、"count="が存在すれば"0"、そうでなければ"-1"を返します
  cStart = cook.indexOf("counts=",0);

  //データの有無で分岐
  if (cStart == -1){
    //データの無い場合は最初の訪問
    document.write("1回目の訪問です!");
    //cookieに訪問回数=1を書き込む
    document.cookie="counts=1;";

  }else{
  //カウントデータの最後の部分「;」の位置を取得
  cEnd=cook.indexOf(";",cStart);
  //subString()で数値の部分だけを取り出します
  //(cStart+7,cEnd)は"counts="と";"の間を指定しています
  cnt=cook.substring(cStart+7,cEnd);

  //数値に変換できない例外が出た時の処理
    try{
      //取得した回数に+1して表示する
      cnt=parseInt(cnt)+1;
      document.write(cnt+"回目の訪問です!");
      //cookieに訪問回数を書き込む
      document.cookie="counts="+cnt+";";
    }catch(e){
    document.write("訪問回数の取得に失敗しました。");
    }
  }
}else{
  //cookieが使用できない時の処理
  document.write("cookieが使用できません。");
}
</script>

[demo]

基礎的な部分はこれをコピペしていただければ、大丈夫です。

ここから必要に応じてカスタマイズしていくことになると思います。

(この機能はローカル環境では確認できません。)

この記事を読んでくださった方の少しでも役に立てたなら幸いです!