FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【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



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

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }