ajax 예제/ 에이젝스의 개념 이해/ 아젝스란/ #ajax 문법 등

웹사이트 개발시 ajax를 많이 사용하고 있다.

 

ajax를 이해하기 위해 정적인 것과 동적인 것에대한 느낌을 알필요가 있다.

 

보통 웹사이트는 페이지에서 페이지로 이동된다. 그리고 이 때 필요한 정보들을 짜여진 코드를 타고 받아온다.

 

ajax는 페이지로의 이동없이 해당 페이지에서 필요한 데이터를 받아오는 동적인 역할을 수행한다.

 

이제 이해가 됬다면 문법을 알아보도록 하자.

 

<button onclick="ajaxEvt();"> Ajax이벤트버튼 </button>

<form id="fromName" method="post" action="../..do">
	<input type="hidden" id="ID" />
</form>

// 첫번째
function ajaxEvt() {
	abcutil.runAjax('POST', '${contextPath}/file/eventList.do', $("#formName").serialize(),
    function(data) {
    	var data = $.parseJSON(data.responseText);
        console.log("data : " + data);
        location.reload();
    });
}

// 두번째
function ajaxEvt() {
	var i = ${'#ID').val();
    
	$.ajax({
    	url : "${contextPath}/file/eventList.do",
        typse : "POST",
        data : { i : i},
        success : function(data) {
        var data = $.parseJSON(data);
     },
     error : function(data, err) {
     	console.log(data);
        console.log(err);
     }
}

 

첫번째 문법은 formName이란 아이디명을 가진 form태그에 있는 값들을 넘겨주는 것이고,

두번째 문법은 i란 변수명의 값만 넘겨주고 있다.

 

정확히는 모르겠으나 사용을 한 경험을 토대로 생각했을 땐

첫번째 문법은 리스트같은 값을 reload할 때 사용되는 반면 두번째 문법에서는 success 이후 if문을 사용해 어떤 값들을

비교할 때 많이 사용했었다.