«
»

JavaScriptが無効なときのメッセージ

2008年8月13日

Filed under: Ajax,JavaScript — admin @ 11:00 AM

JavaScriptが無効なときと、ロード中のメッセージを超簡単に表示する方法。

PLAIN TEXT
HTML:
  1. <div class="noJS">
  2. <script type="text/javascript">
  3. document.write("ロードしています。");
  4. </script>
  5. <noscript>JavaScriptを有効にしてください。</noscript>
  6. </div>

JavaScriptがオフなときは、「JavaScriptを有効にしてください。」という表記が。
ロード中は、jsによって、「ロードしています。」という表記がされる。

«
»

JavaScriptでロールオーバーを簡単に実装する – rollover.js

2008年5月27日

Filed under: Ajax,JavaScript — admin @ 7:19 PM
PLAIN TEXT
JavaScript:
  1. //
  2. window.onload = function(){
  3.     var conf = {
  4.         className : 'btn',  // クラス名
  5.         postfix : '_o'    // マウスオン時の画像のファイル名
  6.     };
  7.     var imgNodeList = getElementsByClassName(conf.className);
  8.     var node;
  9.     for (var i=0, len=imgNodeList.length; i<len>
  10.         node = imgNodeList[i];
  11.         node.originalSrc = node.src;
  12.         node.rolloverSrc = node.originalSrc.replace(/(.gif|.jpg|.png)/,
  13.             conf.postfix+"$1");
  14.         preloadImage(node.rolloverSrc);
  15.         node.onmouseover = function() {
  16.             this.src = this.rolloverSrc;
  17.         };
  18.         node.onmouseout = function() {
  19.             this.src = this.originalSrc;
  20.         };
  21.     }
  22. };
  23. //  クラス名によるエレメントノード配列取得
  24. function getElementsByClassName(name) {
  25.     var elements = [];
  26.     var allElements = document.getElementsByTagName('*');
  27.     var re = new RegExp("(^|\s)" + name + "($|\s)");
  28.     for (var i=0, len=allElements.length; i</len><len ;>
  29.         if (allElements[i].className.match(re)) {
  30.             elements.push(allElements[i]);
  31.         }
  32.     }
  33.     return elements;
  34. }
  35. //  プリロード
  36. preloadedImages = [];
  37. function preloadImage(url) {
  38.     var p = preloadedImages;
  39.     var l = p.length;
  40.     p[l] = new Image();
  41.     p[l].src = url;
  42. }

«
»

XMLHttpRequest

2007年12月14日

Filed under: Ajax,JavaScript — admin @ 1:58 AM

元記事はこちら

PLAIN TEXT
JavaScript:
  1. //XMLHttpRequestオブジェクト生成
  2. function createHttpRequest(){//Win ie用
  3.     if(window.ActiveXObject){
  4.         try {
  5.             //MSXML2以降用
  6.             return new ActiveXObject(”Msxml2.XMLHTTP”); //[1]’
  7.         }
  8.         catch (e) {
  9.             try {
  10.                 //旧MSXML用
  11.                 return new ActiveXObject(”Microsoft.XMLHTTP”); //[1]’
  12.             }
  13.             catch (e2) {
  14.                 return null;
  15.             }
  16.         }
  17.     }
  18.     else if(window.XMLHttpRequest){
  19.         //Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
  20.         return new XMLHttpRequest(); //[1]’
  21.     }
  22.     else {
  23.         return null;
  24.     }
  25. }
  26.  
  27. //ファイルにアクセスし受信内容を確認します
  28. function requestFile( data , method , fileName , async ){
  29.     //XMLHttpRequestオブジェクト生成
  30.     var httpoj = createHttpRequest(); //[1]
  31.  
  32.     //open メソッド
  33.     httpoj.open( method , fileName , async ); //[2]
  34.  
  35.     //受信時に起動するイベント
  36.     httpoj.onreadystatechange = function(){ //[4]
  37.         //readyState値は4で受信完了
  38.         if (httpoj.readyState==4){ //[5]
  39.             //コールバック
  40.             on_loaded(httpoj);
  41.         }
  42.     }
  43.     //send メソッド
  44.     httpoj.send( data ); //[3]
  45. }
  46.  
  47. //コールバック関数 ( 受信時に実行されます )
  48. function on_loaded(oj){
  49.     //レスポンスを取得
  50.     res  = oj.responseText; //[6]
  51.  
  52.     //ダイアログで表示
  53.     alert(res);
  54. }

PLAIN TEXT
HTML:
  2. <input type="button" value="test.txtをリクエストした時のレスポンス”" onclick="requestFile( '', 'GET', './test.txt', true )"/>
  3. </form>

最初の関数、createHttpRequest()は、ブラウザ別にXMLHttpRequestオブジェクトを生成して返します。Win版IE 用にエラー回避しつつ新旧2種類のMSXML[1]’を試し、その他の実装ブラウザではnew XMLHttpRequest()[1]で生成します。もし、失敗すればnullを返します。

そして、その次の関数、requestFile()で、このオブジェクトを利用し、送受信を行っています。openメソッド[2]で POST/GET、URLなどの設定を行い、send[3]で送信しています。 ( ちなみに、requestFile()内で、ここでは変数httpoj をvarによってローカル変数化していますが、もしここでvarを付けずにグローバル変数へ格納すると複数レスポンスを受信した時に問題が起こる可能性があります。)

受信したデータは、受信時に起動するイベントonreadystatechange[4]内でreadyState値[5]が4の受信完了時に取得します。ここでは、コールバック用関数 on_loaded(httpoj)を作り、レスポンスを引数で渡し、受信データはresponseText[6]で受け取っています。 ( ちなみに、sendをonreadystatechangeの前に記述すると、ieでは動作しなくなります、、、。)

ボタンクリック時に動作する関数requestFileの引数として、HTTPメソッドとして’GET’、リクエストURLに ‘./test.txt’ 、非同期オプションに trueを指定して、データは ” を渡しています。 ( よく見かけるサンプルでは、このsend()に渡されるデータをnullとするものが多いのですが、konquerorでエラーが発生するのでここでは、とりあえず、send('') としました。)

« 前ページへ