🤔 Ajax ?

AjaxはAsynchronous JavaScriptとXMLの略です.
Ajaxは、高速で動作する動的Webページを作成するための開発方法の1つです.
Ajaxは、Webページ全体を再ロードする必要はありません.Webページの一部を更新するだけです.
すなわち、Ajaxは、バックグラウンド領域でサーバと通信することができ、結果をWebページの一部にのみ表示することができる.
この場合、JSON、XML、HTML、テキストファイルなどの形式のデータを交換することができます.
Ajaxのメリット
Ajaxを使うメリットはたくさんあります.

ページ全体を再ロードする必要はありません.ページの一部を更新するだけです.

ページをロードすると、サーバにデータ要求を送信できます.

ページをロードすると、サーバからデータを受信できます.

バックグラウンド領域からサーバにデータを送信できます.

Ajaxの限界
Ajaxを使うメリットはたくさんありますが、Ajaxも以下のことを処理できません.

Ajaxは、クライアントがサーバにデータを要求するクライアントプール方式を使用して、サーバがプッシュするリアルタイムサービスを作成できません.

Ajaxリクエストを

Ajaxスクリプトを含むサーバ以外のサーバに送信できません.

Ajax要求を

クライアントのPCに送信できません.

Ajaxの動作原理

Ajaxに関するjQueryコマンド

load(url, parmeters, callback)

URLとパラメータでAjaxリクエストを送信すると、callback関数がリクエスト完了時に呼び出され、応答テキストが一致する要素のコンテキストを置き換え、HTML結果値であれば使いやすくなります.url:要求を送信するサーバ側URLparameters:URLに送信するデータcallback:応答結果データが一致するセルにロードされた後に呼び出される関数
例

$(function(){
	$('#letter-a a').click(function(){ 
		$('#dictionary').hide().load('a.html', function(){
			$(this).fadeIn();
		});
		
		return false;
	})
});

get(url, parameters, callback), post(url, parameters, callback)

URLを使用してGET、POSTリクエストをサーバに送信
パラメータをクエリー文字列として渡すurl:要求を送信するサーバ側URLparameters:URLに添付されたクエリー文字列を構成するProperty付きオブジェクト.callback:応答結果データが一致するセルにロードされた後に呼び出される関数

$.getJSON(url, parameters, callback)

URLを使用してサーバにGETリクエストを送信
パラメータをクエリー文字列として渡す
応答はJSON文字列として解釈され、結果はcallback関数に渡されます.url:要求を送信するサーバ側URLparameters:URLに添付されたクエリー文字列を構成するProperty付きオブジェクト.callback:応答結果データが一致するセルにロードされた後に呼び出される関数
例

$(function(){
	$('#letter-b a').click(function(){
		$.getJSON('b.json', function(data){ //callback함수의 파라미터 변수에는 서버의 결과값이 온다.
			//결과값: [{},{}] -> 배열
			$('#dictionary').empty();
			$.each(data, function(index, item){
				var html = '<div class="entry">';
				html += '<h3 class="term">' + item.term + '</h3>';
				html += '<div class="part">' + item.part + '</div>';
				html += '<div class="definition">' + item.definition + '</div>';
				html += '</div>';
				
				$('#dictionary').append(html);
			});
		});
		
		return false;
	});
});

$.ajax(options)

optionsによるAjaxリクエストの送信options:要求パラメータを定義するプロパティ・オブジェクト

$.ajax({
	url : 'b.json',
	type : 'get',
    dataType : 'json',
	success : function(data){
	}
    
    ...
})