Ajaxを使って非同期通信する。(ローカルファイルの読み込み)

ajax

ajaxはサーバ間通信を非同期で通信するためによく使われているイメージがあります。ローカルファイルをわざわざ非同期で読み込む必要は現実的にはあまりないと思います。(ファイルサイズが大きければ別ですが)
ただし通信先をローカルファイルにすることで複雑になりがつなajaxのロジックがより理解しやすくなると思います。

[スポンサーリンク]

この章でやること

ローカルファイル(html)をajaxで読みこみます。

ローカルファイルの読み込み

ローカルファイル読み込みの本体(index.html)

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>Ajaxを利用してローカルの外部ファイルを読み込む</title>
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<script>
    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    url: 'sample.html',
                    dataType : 'html',
                    success: function( data ) {
                        $( '#sample-text' ).html( data );
                        $( '#sample-result' ).html( '<hr/><font color="blue">読み込みOK(IE,FireFox,SafariはOK)</font><hr/>' );
                    },
                    error: function( data ) {
                        $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
                    }
                } );
            }
        );
    } );
</script>

</head>
<body>

    <h1>Ajaxを利用してローカルの外部ファイルを読み込みます。</h1>
    <p>
        <input type="button" id="ajax-button" value="gooo"/>
        <br/>
    </p>
    <div id="sample-result"></div>
    <div id="sample-text"></div>


</body>
</html>

読み込むファイル(sample.html)

<p>あいうえお</p>

解説

ajaxを使って外部URLへ通信する場合は、17行目の箇所に外部URLを指定します。今回はローカルのファイルを読み込む処理としたので、カレントのファイル名(sample.html)を指定して実行しています。

実行環境

このプログラムを動かすにはjqueryが必要です。
jqueryはローカル環境へダウンロードせずに、Google Developersから読込んでいます。
詳しくは、jQueryをGoogle Developersから読込む方法を参考にして下さい。

ブラウザについて

こちらで紹介するプログラムは、Chromeではエラーになります。Chromeの使用でajaxを使ってローカルファイルを読み込むことが出来ません。
IE、FireFox、Safariで動作確認を行っています。