Ajax_비동기 방식
Ajax
Asynchronous JavaScript And Xml
: 비동기로 통신 하는 JavaScript(json) 와 xml 이라는 뜻
*동기화와 비동기화 방식의 차이점 *
*동기화
- 요청한 일이 끝날 때 까지 다른 일을 하지 못한다.
- 이전까지 한 내용 다 동기화 방식 / Form 방식을 통해서
- 값을 입력하고 실행하면 값이 사라짐
*비동기화
- 요청 해 놓고 다른일을 자유롭게 할 수 있다. (이거하면서 다른것도 할 수 있음)
- 중간에 누가 존재 너는 할일해 기다리는건 내가할게 : xmlhttprequest 객체필요
- Form 을 사용하지 않음
- 값을 입력하고 실행을 해도 입력한 값이 남아있음 (아이디 중복체크할 때 씀 )
필요한 라이브러리 pom.xml
잭슨 라이브러리 의 역할 : 자바코드를 자바스크립트로 바꿔줌 ( 단, 비슷한 데이터 타입으로 작성해야함)
Jackson databind,Jackson core 2.11.0 _ pom.xml
<!-- ajax 통신을 위한 라이브러리 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.11.0</version>
</dependency>
쓰는 방법
/Jquery로 쓸거야(자바스크립트는 어렵)/
$.ajax({
| type : '', | 전송 방식을 지정(post or get) |
| url : '', | 요청을 전송 할 url 주소 |
| data : {}, | 요청시 추가할 파라메터 |
| dataType : '', | 응답 받을 데이터 타입 (json or xml or text or jsonp) |
| timeout : 5000, | 요청 타임 아웃 (miliseconds) |
| success : function(data){ }, |
성공시 실행할 내용(data : 응답 받은 데이터) |
| error : function(e){} | 실패시 실행할 내용 |
});
*중요*
자바스크립트는 콘솔 꼭 찍어주기 ! - 이거없으면 에러찾기 힘듦
—— 순서 지키기
(Data랑 e 는 그냥 원하는 이름 넣는거거임)
$.ajax();
- 아작스 안에는 오브젝트가 들어가고
$.ajax({});
- 그 안에는 옵션이 많이 들어가고 (복수개의 데이터가 들어가면 object 형태로 {} /data )
- 복수개로 받을 수 있는건 object, 배열
- Object는 (key, value) (key,값) 형태
- 배열은 값만 쭉 들어가는거
ㄴ jquery에서 id를 가져오는 # 사용 $(“#id”) 만 가져오면 태그를 통째로 가져온대
그래서 val 함수 넣어주기 (value=“” 써줘야하나? )
[controller도 비동기에 맞게 변경해줘야 한다.]
1. response 객체를 이용해 응답해줘야 한다.
- 동기방식은 request객체를 사용하여 데이터를 담아 페이지로 전달해줄 수 있음
- 반면에 비동기 방식은 response객체 사용, 데이터를 전달하지 못함
- 데이터타입이 json인데 기존동기방식처럼 return “home”; 로 text html로 보낼 수 없음 - 이 경우 에러 메시지
2. javascript 가 알 수 있는 형태로 응답 해줘야 한다. (array, object)
- 자바에서 자바스크립트를 쓸 수 없으니까 잭슨 라이브러리를 사용
(비슷한 데이터 타입으로 써야 잭슨이 바꿔줌)
json 데이터 타입은 array(배열)나 object(객체)인데,
Array 는 java의 list 나 array list, object는 java의 hashmap으로
