スポンサーサイト

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

はてなブックマークに追加 はてなブックマーク - スポンサーサイト

Ajaxを使ったページ遷移なしのスライドショー補足

MyHome Portal Ver.2.59で追加したAjaxを使ったページ遷移なしのスライドショーについての補足です。

ページ遷移なしのスライドショーと言っても、全画像をあらかじめ読み込んで切り替えている訳ではありません。任意のフォルダの数十枚、数百枚の画像のスライドショーを実現するのに、その方式は現実的ではありません。順次、次に表示する画像を読み込みながら、スライドショーを行なっています。

画像の読み込みは、jQueryを使って行なっています。
$("#img_slide_main_"+c_p).attr("src", "img-get.php?page="+nxt);

ただ、フェードアウト・フェードインと組み合わせる場合、フェードアウトしてから、次の画像を.attr()で指定して読み込んでもフェードイン開始に間に合わず、おかしな動作になってしまいます。そこで、<img>タグを2つ用意して、
<img id="img_slide_main_0" ..... >
<img id="img_slide_main_1" ..... >
スライドショーの時間間隔を空けるためのsetTimeout()をする前に、次の画像を事前にもう一つの<img>タグに.attr()で読み込み、2つの<img>タグを交互に切り替えて使っています。
$("#img_slide_main_"+c_p).css("display","none");
$("#img_slide_main_"+a_p).css("display","");
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - Ajaxを使ったページ遷移なしのスライドショー補足

theme : JavaScript
genre : コンピュータ

Ajaxのセキュリティ警告の画期的な回避策?

IEの標準のセキュリティレベルで、自宅のPCからAjaxでインターネット上のWebサービスにアクセスすると「このページは、制御範囲外の情報にアクセスしています。セキュリティ上の問題がある可能性があります。」という警告が出てしまいます。FirefoxやGoogle Chromeでは、警告は出ませんが、天気予報が表示できません。

この問題の回避策をネットで調べても回答が見つかりませんでした。

ふと、PHPのfile_get_contentsでネット上のホームページファイルを取得できることを思い出しました。

サーバサイドで、一旦これを使ってWebサービスのXMLデータを取得して、クライアントに返せば回避できるかもと思ってやってみたところ、うまくいきました。

これで、IEの警告画面が出なくなり、FirefoxとGoogle Chromeでも天気予報を表示できるようになりました。

自分では、画期的な回避策だと思っているのですが、どうなんでしょう。みなさん、知っていることなんでしょうか。それとも、もっとスマートな方法があるのでしょうか?

一応、中間バッファ処理のソースを載せておきます。

$url ="http://weather.livedoor.com/forecast/webservice/rest/v1?city=".$_GET['city']."&day=".$_GET['day'];
$contents = file_get_contents($url);
header("Content-type: text/xml");
header("Cache-Control: no-cache");
print $contents;

はてなブックマークに追加 はてなブックマーク - Ajaxのセキュリティ警告の画期的な回避策?

theme : Ajax
genre : コンピュータ

超シンプル簡単Ajax

MyHome Portal のユーザー登録画面で、アカウント名とハンドル名が登録済かどうかチェックするためにAjaxを使っています。

ただ、Ajaxといっても、XMLもJSONも使っていません。ステータスの文字列を返しているだけです。Ajaxの超簡単な利用例となっています。

また、最初はHTTP通信にprototype.jsを使っていたのですが、テキストのやりとりだけですので、専用スクリプトファイルを作成しました。
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter02/005/index.html
を参考にしています。

function createXMLHttpRequest (cbFunc) {
  var XMLhttpObject = null;
  try {
    XMLhttpObject = new XMLHttpRequest();
  } catch (e) {
    try{
      XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try{
        XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        return null;
      }
    }
  }
  if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
  return XMLhttpObject;
}

60.jpg

はてなブックマークに追加 はてなブックマーク - 超シンプル簡単Ajax

theme : Ajax
genre : コンピュータ

プロフィール

ok.2nd

Author:ok.2nd
HomePage:
http://ok2nd.web.fc2.com/
Email: m.ok.2nd@gmail.com

最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2ブログランキング

FC2Blog Ranking

検索フォーム
カテゴリ
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ユーザータグ

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