Ajax超入門|第一回jQueryで非同期通信させてみる

Ajax超入門|第一回jQueryで非同期通信させてみる
Ajaxこれから始めようとしている方向けの記事です。
jQueryを使って外部ファイルのhtmlファイルのデータを読み込ませます。

ソースだけのご紹介ですが、最後に参考になったサイトご紹介し手ますのでよかったらのぞいてみてください。
では、早速！

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' ) .on("click" , function() {
                $.ajax( {
                    url: 'sample.html',
                    dataType : 'html',
                }).done(function(data){
                        $('#result1').html( data );
                        $('#result2').html( '<hr/><font color="blue">読み込みOK(IE,FireFox,Safariで表示確認できます)</font><hr/>' );
                }).fail(function(data){
                    $("#sample-result").html('<font color="red">読込NG(Chromeでは確認できません)</font>');
                });
            }
        );
    } );
</script>
 
</head>
<body>
 
    <h1>Ajaxを使ってローカルの外部ファイルを読み込む</h1>
    <p>
        <input type="button" id="ajax-button" value="クリックすると読み込みます"/>
        <br/>
    </p>
    <div id="result1"></div>
    <div id="result2"></div>
</body>
</html>

sample.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<p>sample.htmlのテキストだよ</p>
	</body>
</html>

 

参考になったサイト

やる前にこちらの記事が参考になりました。

jQueryのバージョン別の記載方法

http://blog.toshimaru.net/jquery-ajaxdeferredajax/

ソースのベースはこちらを使わせていただきました。
http://javatechnology.net/ajax/json-local-read/

jQueryのバージョン別の記載方法は結構勉強になりました♪
いろんな書き方あってどれつかっていいかわからなかったので良い記事に出会えました。
次回は、CSVファイルを読み込んだやつでも作ってみます♪