728x90
반응형
AJAX란 무엇인가?
- 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능
- 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
비동기 방식이란?
- 웹페이지를 리로드 하지 않고 데이터를 불러오는 방식
- 웹페이지에서 기타 코드들을 요청할 경우, 웹 페이지를 리로드 하면서 불필요한 리소스가 낭비 되는데, 비동기 방식을 이용하면 필요한 데이터만 불러오면서 리소스 낭비를 줄일 수 있다.
- AJAX는 XMLHttpRequest 객체를 통해 서버에 request 한다.
- JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
AJAX의 장점
- 웹페이지 속도향상
- 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
- 기존 웹에서 불가능했던 UI를 가능하게 해줌
AJAX의 단점
- 페이지 이동이 없는 통신으로 보안상의 문제가 있을 수 있음
- 연속으로 데이터 요청시 서버 부하가 증가
- 히스토리 관리가 안된다.
- Script로 작성되서 디버깅이 용이하지 않음
- HTTP 클라언트의 기능이 한정되어 있다.
Value Object를 생성합니다.
↓ Vo 소스 참조.
컨트롤러(controller)를 생성 후 Ajax에서 호출할 메서드(Method)를 생성합니다.
↓ 컨트롤러(Controller) 소스 참조.
성명, 성별, 나이, 전화번호를 가진 input 엘리먼트(element)와 아래에 제출 버튼을 생성 합니다.
↓ HTML 소스 참조.
<body>
<div>
<section>
<div>
<article>
<div>
<h2>ajax 설명 입니다.</h2>
<dl>
<dt>성명</dt>
<dd>
<input type="text" id="name" value="홍길동"/>
</dd>
</dl>
<dl>
<dt>성병</dt>
<dd>
<input type="text" id="sex" value="남자"/>
</dd>
</dl>
<dl>
<dt>나이</dt>
<dd>
<input type="text" id="age" value="20"/>
</dd>
</dl>
<dl>
<dt>전화번호</dt>
<dd>
<input type="text" id="tellPh" value="010-0000-0000"/>
</dd>
</dl>
<dl>
<dd>
<input type="button" id="request" value="제출"/>
</dd>
</dl>
<br>
</div>
</article>
</div>
</section>
</div>
</body>
'request'라는 id를 가진 버튼을 클릭 했을 때 서버에 전송할 데이터를 json타입으로 포맷(format)을 해주고 Ajax통신을 실행된다.
↓ 스크립트(SCRIPT) 소스 참조.
<script>
// 'request'라는 id를 가진 버튼 클릭 시 실행.
$("#request").click(function(){
// json 형식으로 데이터 set
var params = {
name : $("#name").val()
, sex : $("#sex").val()
, age : $("#age").val()
, tellPh : $("#tellPh").val()
}
// ajax 통신
$.ajax({
type : "POST", // HTTP method type(GET, POST) 형식이다.
url : "/test/ajax", // 컨트롤러에서 대기중인 URL 주소이다.
data : params, // Json 형식의 데이터이다.
success : function(res){ // 비동기통신의 성공일경우 success콜백으로 들어옵니다. 'res'는 응답받은 데이터이다.
// 응답코드 > 0000
alert(res.code);
},
error : function(XMLHttpRequest, textStatus, errorThrown){ // 비동기 통신이 실패할경우 error 콜백으로 들어옵니다.
alert("통신 실패.")
}
});
});
</script>
- type : GET 또는 POST 지정
- url : ajax로 요청할 대상 URL 지정
- async : 동기, 비동기 지정(boolean) - 비동기 true / 동기 false
- dataType : 받아올 테이터의 자료형 지정
- data : 요청 할때 보낼 데이터 지정
- success : ajax 요청 성공시 실행할 이벤트 지정 (function, array)
- error(xhr, status, error): ajax 요청 실패 시 실행할 이벤트 지정(function)
- complete : ajax 요청 완료시 실행할 이벤트 지정(function)
728x90
반응형
'📌 Front End > └ jQuery' 카테고리의 다른 글
| [jQuery] 전역 함수와 매개변수 처리 방법 (0) | 2023.03.10 |
|---|---|
| [jQuery] 변수앞에 달러를 붙이는 이유 (0) | 2023.03.10 |
| [jQuery] $.fn.extend({ }) vs $.extend({ }) 비교하기 (0) | 2023.03.10 |
| [JQuery] 이벤트 처리 방법(event binding) (0) | 2023.03.10 |
