[jQuery] AJAX 아작스(에이잭스)

 

 

AJAX(Asynchronous JavaScript And XML)

 

AJAX는 XML 파일 조각 단위로 데이터를 받아 페이지의 일부를 동적으로 갱신한다.

즉, 페이지 전체 로딩이 아닌 일부만 재 로딩 되기 때문에 고속으로 화면을 전환할 수 있다.

 

AJAX의 장점

1. 비동기 통신

2. 서버측의 부하 감소

3. 속도

등등..

 

 

 

AJAX 사용 (Ajax Form Submit)

 

ajax 함수를 사용해서 form 데이터를 넘겨보자. 기본 형태는 다음과 같다.

 

$.ajax({
	type: "POST",
	url: url,
	data: data,
	success: success,
	dataType: dataType,
	error: error 
});

 

 

 

 

예제 코드

 

<form runat="server" />
<div>
	<div>
		<label for="fname">이름</label>
		<input type="text" name="fname" id="fname" value="꽁쥐" />
	</div>
	<div>
		<input type="button" value="전송" onclick="fSubmit()" />
	</div>
</div>

 

var name = $("#fname").val();

function fSubmit() {
	$.ajax({ 
		type: "POST", 
		url: "/TEST/test.aspx",
		data: "{'NAME': '" + name + "'}",
		success: function(data) {
			if(data) {
				alert("성공"); 
			} 
		},
		error: function (xhr, status, error) { 
			alert(error);
		} 
	}); 
}

 

 

 

 

 

 

예제 코드2

 

<form runat="server" />
<div>
	<div>
		<label for="fname">이름</label>
		<input type="text" name="fname" id="fname" value="꽁쥐" />
	</div>
	<div>
		<input type="button" value="전송" onclick="fSubmit()" />
	</div>
</div>

 

var name = $("#fname").val();

function fSubmit() {
	if(TestPage.List != null) {
		var result = TestPage.List(name).value;
	}
}

 

public partial class TestPage : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e) 
	{ 
		// AJAX 선언
		Ajax.Utility.RegisterTypeForAjax(typeof(TestPage)); 

		[AjaxMethod()]
		public string List()
		{ 
		...
		}
	}
}

 

 

 

[jQuery] ajaxStart, ajaxStop 실행 및 특정 ajax에서는 실행되지 않도록 설정

[JavaScript] AJAX 동기식 처리 (순서대로 처리)