OSDN -- オープンソース・ソフトウェアの開発とダウンロード
日本語の翻訳状況 translation status for ja
編集 | ページ一覧 |  最近の更新  | 

Ajax 手法のお勉強

Webページ版ぺったんで使用が期待できる Ajax 手法のお勉強．

Ajax 手法の一覧

手法GETPOSTPUT,DELETEファイル送信クロスオリジン
form + iframe○○△html5○△iframeプロキシ
XMLHttpRequest○○×××
XMLHttpRequest level2○○○○△
jsonp○×××○
【未検証】動的scriptタグ(json)多分○×××?
flash○○○○○

上記未検証！ 他には java, silverlight ( unity ) といったプラグインを使う、とか．flash も含め、これらの拡張を利用するメリットとして、あらかじめアップロードするファイルのサイズ等の制限をチェックできる、などが期待できる．10MBの画像をあげ終えてから駄目でした、ではユーザーにはストレスが、運営者には請求が発生してしまう．

ブラウザ対応表

XMLHttpRequest

  • ie 4.0 以降 ie6 以前は ActiveX
  • Firefox 1.0 以降
  • NN 7　以降
  • Opera 7.6 以降
  • Safari 1.2 以降
  • Konqueror 3 以降

以上は 入門 ajax 増補改訂版より

XMLHttpRequest level2

  • ie8 以降 new XDomainRequest

機能メモ

form + iframe

隠し iframe を生成してそこに form.submit() 結果をもらうようにする．（form.target = iframe.name）

結果が欲しい場合、親フレームは、iframe のロード状況を監視してその内容や script タグでセットされたグローバル変数を拾う．（その際にオブジェクトへの参照を保持してしまうとまずそうなので deepcopy 的なことをしたほうがよさそう）．サーバ側は、この特殊な動作のために専用の軽量なリザルトページを返してあげる必要がある．こんな感じ？？ 

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
  4.  <body>
  5.  <script>
  6.  result = { code: 200, original_picture_id: 7, filesize 5000, .... }
  7.  </script>
  8.  </body>
  9.  </html>
動的 iframe は嵌りどころが多いので注意． クロスオリジンにしたい場合、受け取り側（サーバ側）に iframe 用の html を置き、その iframe をパラメータつきで呼び出す．iframe にはパラメータを解析し、post 結果を iframe 通信で 呼び出し元 ドメインに返す．

XMLHttpRequest

  • ie6 までは ActiveX オブジェクトとして提供されるので、ActiveX が切られている場合には動作しない．

XMLHttpRequest level2

メモ

【未検証】動的 script タグ(json)

動的な script たぐの追加による json の読み込み．検証まだです！ 

  1.  var script = document.createElement( 'script' );
  2.  script.src = 'hoge.json';
  3.  
  4.  script.onload = function(){
  5.      var json = this.text;// script タグの中身を取れる？
  6.  }
  7.  script.onreadystatechange = function(){
  8.      if(this.readyState=="loaded"||this.readyState=="complete"){ // キャッシュからとった場合のために 2つが必要らしい．
  9.          this.onreadystatechange = new Function(); // 確かこんな感じでないと ie6 でメモリリークする．
  10.          this.onreadystatechange = null;
  11.          var json = this.text;// script タグの中身を取れる？
  12.      }
  13.  }
  14.  
  15.  document.body.appendChild( script );
jQuery の getJson は、ie6 で ActiveX が切れている場合も XMLHttpRequest を使おうとしてこけてるみたい．script タグを追加・監視してその文字列を取得、パースしてjsonデータの取得、ってできないの？

編集 履歴 削除
設定

[ページ情報]  更新日時: 2013-01-20 11:48:34, 更新者: itozyun
[権限]  表示:無制限, 編集:ログインユーザ, 削除/設定:メンバー
[IRI]  https://ja.osdn.net/projects/pettanr/wiki/SutdyOfAjax