[Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단)
안녕하세요.
오늘은 제이쿼리 AJAX에 대해서 설명드리겠습니다.
- AJAX란?
Ajax란 (asynchronous Javascript and XML)의 줄임말 입니다. 자바스크립트를 이용하여 비동기 식으로 서버와 통신을 합니다. 비동기통신이기 때문에 서버에 요청이 가더라도 화면의 깜빡 거림이나 화면이 이동 된다는 느낌을 주지 않고 상당히 자연스럽고 빠르게 클라이언트의 화면을 변화 시켜줍니다. 최근에는 XML형식이 아닌 JSON형식을 더 많이 사용하고 있습니다.
- AJAX의 장단점
♣장점
● 서버에서 처리가 완료될때까지 기다리지 않고 다른 프로세스를 진행할 수 있다.
● 비동기 방식이기 때문에 동기 방식과 다르게 UI를 변경할 수 있어서 장점이 된다.
● 웹페이지 속도향상.
♣단점
● 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
● 히스토리 관리가 안되므로 보안에 좀 취약하다.
● HTTP 클라이언트의 기능이 한정되어 있다.
- 소스설명
♣ Value Object를 생성합니다.
↓ Vo 소스 참조.
|
1
2
3
4
5
6
7
8
9
10
11
|
@Getter@Setter
public class TestVo{
private String name;
private String sex;
private String age;
private String tellPh;
}
|
♣ 컨트롤러(controller)를 생성 후 Ajax에서 호출할 메서드(Method)를 생성합니다.
↓ 컨트롤러(Controller) 소스 참조.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@Controller
public class TestController {
@PostMapping("/test/ajax")
@ResponseBody
public Map<String, Object> testAjax(TestVo testVo){
Map<String, Object> result = new HashMap<String, Object>();
// 홍길동
System.out.println(testVo.getName());
// 남자
// 20
// 010-0000-0000
System.out.println(testVo.getTellPh());
// 응답 데이터 셋팅
return result;
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
♣ 성명, 성별, 나이, 전화번호를 가진 input 엘리먼트(element)와 아래에 제출 버튼을 생성 합니다.
↓ HTML 소스 참조.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<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>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
♣ 'request'라는 id를 가진 버튼을 클릭 했을때 서버에 전송할 데이터를 json타입으로 포맷(format)을 해주고 Ajax통신을 실행된다.
↓ 스크립트(SCRIPT) 소스 참조.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<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>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
- 글을 마치며
오늘은 웹(Web)개발을 하면서 자주 쓰이게 되는 Ajax에 대해서 알아 봤습니다. 제 나름대로 정리를 했다고는 했는데 보시는 분들이 쉽게 접근이 가능하게 썼는지는 잘모르겠네요... 그래도 제 글을 읽어 주셔서 항상 감사합니다. 궁금하신점이 있다면 댓글을 남겨주시면 자세히 설명 드리겠습니다.
↓ Ajax를 이용한 비동기 파일업로드 소스 설명 및 예제로 이동
2019/09/27 - [JAVA] - [ JAVA ] 자바 파일업로드 유틸 예제(ajax 파일 업로드)
'JavaScript' 카테고리의 다른 글
| [Jquery] 제이쿼리 텍스트(문자열) 변경 실시간 감지방법 설명(간단) (0) | 2020.02.19 |
|---|---|
| [Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함) (0) | 2020.02.19 |
| [Javascript/Jquery] 자바스크립트 onclick 이벤트 리스너 설명 및 소스(초간단) (0) | 2020.02.13 |
| 자바스크립트(JavaScript)란 무엇이며 특징 및 장단점(기초) (0) | 2020.02.12 |
| [ Jquery ] 제이쿼리 addClass(), removeClass() 설명 및 예제(간단) (0) | 2020.02.04 |
이 글을 공유합시다
