【jQuery入門】Ajaxの技術を使用し、外部ファイルを読み込む

【今回の紹介】

jQueryの学習の中で、Ajaxの学習を行った。

　内容的には

　・外部ファイルの読み込み
　・外部ファイル読み込み後に、処理を行う
　　など

【内容】

■jQuerytとAjax

　jQueryを使えばかなり簡単にAjax通信を行えるらしい
　

　参考にしたのは以下のサイト

　　Ajax編

処理内容①「外部ファイルの読み込み」

　■処理手順

　　①キャッシュの消去
　　②読み込みファイルの指定
　　③読み込む情報のDOMの指定

　■ソース

<div id="result"></div>

///////////////////////////

$.ajaxSetup({cache:false});

function input(){
$('#result').load('./Ajaxtest.txt');
}

　
　■処理内容②「セレクタ指定を行い、外部ファイル読み込む」

　　①キャッシュの消去
　　②読み込みファイルの指定と読み込みセレクタの指定
　　③読み込む情報のDOMの指定

　■ソース

<div id="result"></div>

///////////////////////////

$.ajaxSetup({cache:false});

function input(){
$('#result').load('./link.htm li:first');
}

　■処理内容③「外部ファイル読み込み後に、処理を行う」

　処理手順
　
　　①キャッシュの消去
　　②読み込みファイルの指定と読み込みセレクタの指定
　　③読み込む情報のDOMの指定
　　④読み込み後のイベントの設定

　■ソース

<div id="result"></div>

///////////////////////////


function input(){

$('#result').load('./link.htm li:first'
			,function (){
				$(this).fadeOut().fadeIn();
				console.log("処理が終わりました");
			}
);

　■処理内容④「外部ファイル読み込み後に、処理を行う」（$getバージョン）

　処理手順
　
　　①キャッシュの消去
　　②読み込みファイルの指定と読み込みセレクタの指定
　　③読み込む情報のDOMの指定
　　④読み込み後のイベントの設定

　■ソース

function input(){

$.get('./link.htm'
,function(data){
$('#result').html(data);

})
}

【メモ】

①.loadと$.getの位置づけ

　.loadと$.getの明確な使い方の違いは
　まだわかっていない部分が多いが、
　☆ただ外部ファイルを読み込むだけなら→.load
　
　☆外部ファイルを読み込んだファイルをもっと詳しく扱いたい
　　（テキスト・結果ステータス・XMLHttpRequestオブジェクトで受け取る）
　　　→$.get

　☆より複雑なAjaxの処理（非同期・同期の選択・失敗・成功の場合分け処理などなど）
　　　→$.ajax

　と今の段階だと思っている。
　今後、もう少し学習すすめていったらより具体的になったり、違うかんがえになるかもしれない。