FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JSONを使ってAjaxでデータ受信してみる

Ajaxでのデータ受信はXMLしか知らなかった。
JSONも覚えた方がいいよなと思い立ち、やり方を調べて使ってみた。

結論から言えば、JSONはXMLに比べるとかなり楽。覚えるのもプログラミングも。
JavaScriptで使用するデータを渡す場合はJSONの方がいいな。
XMLパースエラーを気にせずに、< > & をそのまま送れるのもいい。" は \ でエスケープする必要があるが。

去年私用で作ったプログラムを、JSONを使うように変更した。
変更前のDjangoテンプレート
msg は処理結果メッセージ文字列で、outdataLがデータ配列
  <?xml version='1.0' encoding='UTF-8'?>
  <doc>
    <msg>{{ msg }}</msg>
    {% if outdataL %}
      {% for outdata in outdataL %} <data>{{ outdata }}</data>
      {% endfor %}
    {% endif %}
  </doc>

JSON用に変更したDjangoテンプレート
  {"msg" : "{{msg}}"
    {% if outdataL %}
      ,
      "dataL" : [
      {% for outdata in outdataL %} "{{ outdata }}"
        {% if not forloop.last %},{% endif %}
      {% endfor %}
      ]
    {% endif %}
  }
配列の最後にコンマを付加しないよう、forloop.last で判定した。

HTTPヘッダのContent-TypeもJSON用に変更。
  self.response.headers['Content-Type'] = ('text/javascript; '
      'charset=utf-8')
サーバー側の変更はこのぐらい。他にもXMLパースに関する部分を少々変更したが略。

JavaScriptの、JSONを使ってAjaxでデータ受信する部分は以下のようになった。jQueryはver1.4.4を使用。
  $.ajax({
    url: acturl, // 実行されるURL
    type: 'GET',
    dataType: 'json',
    timeout: 20000, // タイムアウト時間(ミリ秒)
    beforeSend: function() { // 送信前に実行される処理
      $sbtn.css('display','none'); // 送信ボタン非表示
      $msgdiv.text('データ送信中'); // 送信メッセージ表示
    },
    success: function(getdata) { // 通信成功時に実行される処理
      var outhtml = getdata.msg + '<br>';
      var dataArr = getdata.dataL;
      for (var i = 0; i < dataArr.length; i++) {
        /* 受信データ処理部分は略 */
      }
      $datadiv.html(outhtml); // 受信データ表示
      $sbtn.css('display','inline'); // 送信ボタン表示
      $msgdiv.remove(); // 送信メッセージ削除
    },
    error: function(XMLHttpRequest, status) { // 通信エラー時に実行される処理
      $sbtn.css('display','inline'); // 送信ボタン表示
      $datadiv.text(status); // エラーステータス表示
      $msgdiv.remove(); // 送信メッセージ削除
    }
  });
受け取ったデータを、そのままオブジェクトとして利用できるから楽だ。

ハマることも無く、すぐにJSONを使うことができた。
Ajaxの勉強は、XMLより先にJSONを使った方がいいんじゃないかと思った。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。