タグ別アーカイブ: ajax

複数RSS の取得と一覧表示

普段は RSS の取得は PHP で処理していますが、今回は以下の提案を頂きました。
「サブドメイン配下にある複数の Blog の RSS 一覧を HTML 拡張子で表示したい。」
それに合わせて今回はRSSの取得をやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                // Set URL
                var maxFeed = 10;
                var urls = [
                    'http://jsource.nakweb.com/?feed=rss2',
                    'http://jsource.nakweb.com/?feed=comments-rss2'
                ];

                // Get RSS
                var arrFeed = new Array();
                var cntFeed = 0;
                for ( var urlCnt = 0; urlCnt < urls.length; urlCnt++ ){
                    $.ajax({
                        url      : urls[urlCnt],
                        dataType : 'xml',
                        success  : function(xml) {
                            // Get Feed
                            $(xml).find('item').each(function(){
                                var title = $(this).find('title').text();
                                var link  = $(this).find('link').text();
                                var date  = $(this).find('pubDate').text();
                                // Date Format
                                date = getFormatDate(date);
                                // Set Array
                                arrCnt = arrFeed.length;
                                arrFeed[arrCnt] = new Array();
                                arrFeed[arrCnt]['date'] = date;
                                arrFeed[arrCnt]['feed'] = '<dl><dt><a href="' + link + '">' + date + '</a></dt><dd><a href="' + link + '">' + title + '</a></dd></dl>';
                            });
                            cntFeed++;
                            exeDispFeed();
                        },
                        error    : function() { // Error
                            //$('#disp_area').append('<p>Not Read Feed</p>');
                            cntFeed++;
                        }
                    });
                }

                // Feed Disp Function
                var exeDispFeed = function(){
                    // Feed Disp
                    if (cntFeed >= urls.length) {
                        // Sort
                        arrFeed.sort(function(a, b) {
                            return (a.date > b.date) ? -1 : 1;
                        });
                        // Disp
                        for ( var feedCnt = 0; feedCnt < arrFeed.length; feedCnt++ ){
                            if (maxFeed <= feedCnt) {
                                return;
                            }
                            $('#disp_area').append(arrFeed[feedCnt]['feed']);
                        }
                    }
                };

                // Day Format
                var getFormatDate = function(date){
                    var getDate  = new Date(date);
                    var year     = getDate.getFullYear();
                    var month    = getDate.getMonth() + 1;
                        month    = ('0' + month).slice(-2);
                    var day      = getDate.getDate();
                        day      = ('0' + day).slice(-2);
                    var dispDate = year + '/' + month + '/' + day + '/';
                    return dispDate;
                };

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 20px;
            }
            dd {
                margin-bottom    : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <ul id="disp_area"></ul>
        </div>

    </body>
</html>

sample

sample を開くと当サイトの Feed が一覧表示されます。
投稿とコメントの Feed です。
# コメントが余りにも無いんで「投稿」しか表示されていませんが(笑)

RSSを指定すると指定数分の URL からの情報を取得します。
一応投稿日付によって Sort して指定数までの Feed を表示します。

全部読みこんでから表示する必要もあるのでちょっと悩みましたが
こんな感じでどうでしょう。
apache の設定を変えても良かったんですが、これも良い感じではないでしょうか。

今度から Blog の投稿一覧はこれでも良い気がします。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。

PHP/Ajax での認証機能

今回は簡単な認証機能用のフォーム作成です。
実際の認証処理は PHP で行うのですが、PHP で認証した後に内容を出力し
ajax で内容の入れ替えを行います。
まぁ、主となる部分が PHP で行う形なので、本ブログで扱う内容として
「適切なのかな・・・。」とは思いますが(笑)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#exeCheck').click( function () {
                    $.ajax({
                        type     : 'POST',
                        dataType : 'text',
                        url      : 'sample_110.txt',
                        data     : {
                                     id : $('#checkID').val(),
                                     pw : $('#checkPW').val()
                                   }
                    }).done(function(data) {
                        // ajax ok
                        $("#input_area").hide();
                        $("#disp_area").html(data).show();
                    }).fail(function(data) {
                        // ajax error
                        $("#disp_area").html('once more, please');
                    });
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #div {
                margin           : 20px;
            }
            
            #disp_area{
                display          : none;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="input_area">
                ID : <br />
                <input type="text" id="checkID" name="id"><br />
                PASSWORD : <br />
                <input type="password" id="checkPW" name="password"><br />
                <input type="button" id="exeCheck" name="submit" value="Submit">
            </div>
            <div id="disp_area">
            </div>
        </div>

    </body>
</html>

sample

sample では入力欄が2つあります。
ここで適正なID・PASSを入力してPHP 側での処理を行います。
本sample ではPHPを設定していないので何を入力しても正常となりますが(笑)

今回は WordPress にて特定のページだけ認証をしたいとの要望があったため
試験的に試してみました、この Blog では余り相応しくなかったかもしれませんね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

pjaxもどき

最近はいろんなところで良く「pjax」を使用したサイトを見るようになりました。
ただ「pjax」はプラグインであり、実際には 「ajax」と「pushState(HTML5)」を組み合わせたものの様です。
今回はpjaxもどきを試してみたいと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            var state = '';

            function funcDispChange(pageData) {

                $.ajax({
                    type     : 'POST',
                    dataType : 'text',
                    url      : 'sample_958_' + pageData + '.txt'
                }).done(function(data) {
                    // ajax ok
                    history.pushState(state, '', 'sample_958_' + pageData + '.txt');
                    $("#main_area p").html(data);
                }).fail(function(data) {
                    // ajax error
                    $("#main_area p").html('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

            $(window).on('popstate', function(e) {
                state = e.originalEvent.state;
            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">
            <h1>Page Title</h1>

            <div id="header_area">
                <p>Head Area</p>
                <p>
                    <a href="javascript:void(0);" onclick="funcDispChange(1);">Click Link 1</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(2);">Click Link 2</a><br />
                    <a href="javascript:void(0);" onclick="funcDispChange(3);">Click Link 3</a><br />
                </p>
            </div>

            <div id="main_area">
                <p>Main Area</p>
            </div>

            <div id="footer_area">
                <p>Foot Area</p>
            </div>

        </div>

    </body>
</html>

sample

sample では link を click するとページが変わります。
その際に URL は変更されており、ページもスムーズに入れ替わります。

実際のサイトを作成する時には pjax のプラグインを使用する形だと思います。
すでに複数の Plugin も作成されていますからね・・・

それでも今回の内容を自分でやってみるのは結構面白かったですね。
こういった内容をやるとWebサイトの進歩を感じます。
本当に HTML5 など凄いものですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

(番外編)郵便番号から住所を取得する。

今回は jQuery だけでは完結していないので番外編となっています。
近いうちに仕事で使いそうな処理の予習です。

まぁ、内容は非常に簡単です。
■郵便番号を入力してからボタンを押すと、県(Select)と県名を除く住所(Input)の中身を取得する。

こんな場合の強い味方は ajax となります。
なお、jQuery だけで行う方法もありますが、今回は仕事の予習のため PHP を使用します。
といっても、このブログは jQuery の備忘録なので PHP の処理は省いて記事を記載しています。
というか PHP 部分はまだ作って無いので書けません(笑)
※ jQuery だけで行う方法(getJSON)に関しては、掲載要望があるか、私の気が向いたら書くかもしれません。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            function funcSetAddress() {
                $.ajax({
                    type     : 'POST',
                    dataType : 'json',
                    url      : 'sample_608.txt',
                    data     : {
                                 zip1 : $('#zip1').val,
                                 zip2 : $('#zip2').val
                               }
                }).done(function(data) {
                    // ajax ok
                    $('#pref').val(data[0].prefcode);
                    $('#addr').val(data[0].citydata);
                }).fail(function(data) {
                    // ajax error
                    alert('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

        --></script>

    </head>
    <body>
        <div id="zip_area">
            <h1>zip code</h1>
            <input id="zip1" name="zip1" value="522" readonly="readonly"> - <input id="zip2" name="zip2" value="0052" readonly="readonly">
            <input type="button" onclick="funcSetAddress();" value="zip -> addr">
        </div>
        <div id="addr_area">
            <h1>addr code</h1>
            <select id="pref" name="pref">
                <option value="">none select</option>
                <option value="1">pref1</option>
                <option value="2">pref2</option>
                <option value="3">pref3</option>
                <option value="4">pref4</option>
                <option value="5">pref5</option>
            </select>
            <input id="addr" name="addr">
        </div>

    </body>
</html>

sample

まず、郵便番号を入力して変更用のボタン「zip -> addr」をクリックします。
※今回の sample では郵便番号の値は変更できませんが、本番ではもちろん変更可能にします。

クリックすると、ajax にて特定のページに 郵便情報を送信します。
まぁ、郵便番号をもとに PHP で住所情報を取得するわけですが、今回の注目する個所は dataType の設定です。
以前に「ajaxで画面遷移なしに表示切替」でも、さらっと書きましたが、ajax で情報を取得する場合には
dataType の値を変更することで 取得できる形式が変わります。

今回は dataType として JSON を指定しています。
jQuery を使用して、複数の情報を取得する場合はやっぱり JSON データが便利ですね。
今回は情報取得に PHP を使用する予定なので1件分の情報しか取得しませんが、getJSON を使用する場合は必須ですね。

ちなみに今回の sample では以下の JSON データを受け取ることを想定しています。(sample_608.txt の中身です。)

[{"prefcode":"3","citydata":"city_address"}]

ajax で正常に情報が受け取れた場合には、json の内容を分割して対象の内容を変更しています。
なお、data[0].prefcode の 0 はデータの件数になるため忘れ内容にしましょう。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

ajaxで画面遷移なしに表示切替

今回は ajax を使用した表示内容の切替です。

jQuery を使用しない ajax は使ったことが有りましたが、結構大変面倒くさかった覚えがあります。
ajax は jQuery で楽になっているのでしょうか?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            function funcDispChange() {
                $.ajax({
                    type     : 'POST',
                    dataType : 'text',
                    url      : 'sample_110.txt',
                    data     : {
                                 id   : '00001',
                                 Flg  : true
                               }
                }).done(function(data) {
                    // ajax ok
                    $("#disp_area").html(data);
                }).fail(function(data) {
                    // ajax error
                    $("#disp_area").html('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

        --></script>

    </head>
    <body>

        <div>
            <p id="disp_area">Normal Disp Text</p>
            <input type="button" onclick="funcDispChange();" value="Disp Change">
        </div>

    </body>
</html>

sample

えぇ、非常に簡単になってます!
すごいなぁ、コレで通信ができるのかぁ・・・

ちなみに ‘sample_110.txt’ の中身は以下の内容です。

Change Disp Text!!!

本来は urlオプションに php を指定して、dataオプションの値によって適切な値を受け取ります。
dataTypeオプションを ‘json’ などにすれば、テキストでなくデータも取得できます。
まぁ、php で成形した出力内容を表示する方が簡単に思いますけどね

また、結果の取得方法は jQuery のバージョンによって変わるようですが、今回は 1.8 での取得方法です。
ちなみに結果取得は以下のオプションを使用できます。
 done
  ajax通信が成功時の処理を指定します。
 fail
  ajax通信が失敗時の処理を指定します。
 always
  ajax通信が完了時の処理を指定します。
  成功,失敗 どちらの場合でも、完了時にここに記載した処理を実行します。

ajax 以外の方法でも外部のデータを取得する方法はいくつかあります。
しかし、エラー時の処理を指定できるは、ajax通信の強みですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 4 人中 3 人がこの 投稿 は役に立ったと言っています。