예제)
HTML
번호를 선택하여 버튼을 클릭하게 되면 그 크기만큼 반복
JavaScript
$(document).ready(function() {
$("#call").click(function(){
var input = $("#num").val();
console.log(input);
var request = $.ajax({
url: "ajaxCallTest3.jsp", //요청 URL
method: "POST", //요청 방식
data: {
num1:input //전달할 데이터 (파라미터:값)
},
dataType: "json" //응답받을 데이터 형식(일반적으로 json)
}); // request END
request.done(function(data){
//테스트 코드
console.log(data);
//실행전에 내부 코드 정리
$("#myName").empty();
for(var i=0;i<data.result.length;i++){
$('#myName').append("<div>"+data.result[i]+"</div>");
}
});
request.fail(function(jqXHR,textStatus){
alert("응답 실패 " + textStatus);
});
});
});
JSP
요청받은 JSP에서 해야할 일
1.요청시 전달되는 응답 데이터 타입 설정
response.setContentType("application/json");
2.요청시 전달되는 전송방식에 대한 설정
response.setHeader("Content-Disposiont","inline") // 브라우저에서 응답하기
response.setHeader("Content-Disposiont","attachment") // 팝업(alert) 형태 응답하기
3.요청시 전달된 데이터가 있을 경우, request.getParameter( )를 이용하여 데이터 추출
String num = request.getParameter("num1");
4.요청 내용에 관한 처리(데이터베이스 접속이 필요한 경우에는 전달된 데이터를 VO객체에 저장하여 DAO에게 전달)
4-1. 데이터베이스 접속이 필요한 경우에는 전달된 데이터를 VO객체에 저장하여 DAO에게 전달할 수 있도록 처리
model2(MVC)에서는 Controller를 이용
4-2. 데이터베이스 접속이 필요없을 경우엔 내부에서 처리
5.결과 값을 Map 계열 클래스를 이용하여 JSON과 동일한 구조로 저장
Map<String,Object> map = new HashMap<String,Object>( );
map.put("result",data);
6.Map계열 객체를 JSON형식(포맷)으로 변환
Gson gson = new Gson( );
7.변환된 JSON 객체를 응답 처리
**
ajax : 서로 다른 언어간의 데이터를 주고 받기 위한 연결 역할을 담당하는 기능으로 만들어진 개념
jQuery : $.ajax({ });
({ }) 내부 : 1.대상 => url: "대상 주소",
2. 요청/전송방식 => method:"전송방식(ex/post)",
3.전송할 데이터 => data: { 파라미터값 },
4. 응답타입 => dataType: "데이터타입"
$.ajax({ }) => 응답에 대한 성공여부 확인이 가능
request => 응답 성공 done( ) // 응답 실패 fail( )
request.done(function(data){ });
* data 매개변수는 요청한 대상 결과값을 전달 했을 때 해당 결과 값을 전달 받는 매개변수
request.fail(function(jqXHR, textStatus){ });
* textStatus 매개변수는 응답 실패에 대한 메세지를 전달받는 매개변수
서로 다른 언어 간의 데이터를 주고 받는 경우 일반적으로 JSON형태를 사용
** JSON은 자바스크립트 객체 형태
JSON 형태 데이터의 내부구조
[ {
변수명(keyName): 값(Value),
변수명: 값,
},
{
변수명: 값,
변수명: 값,
.
.
}
];
자바 컬렉션 중 JSON 객체 형태의 구조를 가지고 있는 것은 Map계열 => 키와 값이 한쌍
Map<String, Object> map = new HashMap<String, Object>( );
map.put("keyName1","Value1");
map.put("keyName2","Value2");
*** 구조는 비슷하지만 언어가 다르므로 변환이 필요하다. (Map -> 자바 // 데이터 -> 자바스크립트)
JSON 변환 : 구글에서 제공해주는 라이브러리(gson.jar) // 라이브러리 임포트 필요!!
위의 예제 JSP를 보면
<%@ page import="com.google.gson.Gson" %>
gson 객체 생성
Gson gson = new Gson();
gson.toJson(map); //map에 담긴 데이터를 JSON형태로 변환!!
현재까지의 예제에서는 HTML -> jQuery통해서 -> JSP 요청
HTML <- jQuery <- JSP 응답
이러한 형태로 데이터를 주고 받았다.
** <form>태그가 없어도 데이터를 주고 받았을 수 있다.
데이터를 주고 받을 때의 JSP파일을 보면
안에 HTML코드는 하나도 없다.
그리고 상단 타입선언 부분도 다르다. 기본적으로 type이 html로 선언되는 반면에 데이터를 처리하는 JSP 파일은
application/json 타입을 갖게 된다.
JSP:
일반적인 JSP의 1번 라인
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
jQuery의 ajax( )를 통해 요청받는 JSP의 1번라인:
<%@ page language="java" contentType="application/json" pageEncoding="UTF-8" %>
예제)
HTML
<body>
<button type="button" id="ajaxCall">호출</button>
</body>
호출 버튼 클릭시 값이 콘솔에 제대로 찍히는 지 확인
JavaScript
$(document).ready(function() {
$("#ajaxCall").click(function(){
var request = $.ajax({
url: "ajaxResult.jsp",
method:"POST",
data:{ paraNum:1},
dataType:"json"
});
request.done(function(data){
//테스트
console.log(data);
//개별적으로 꺼내서 확인 가능
console.log(data.param1);
console.log(data.param2);
});
request.fail(function(jqXHR,textStatus){
alert("응답 실패 : " +textStatus);
});
});
});
JSP
** ajax 코드 작성 시에 done() 함수 부분은 JSP가 완성된 후에 작성
JSP에서 어떠한 값으로 넘겨줄지 정해진게 아니기 때문에 done()을 작성 할 수가 없다.
그렇기에 JSP파일을 먼저 작성하면서 값을 정한 후에 done() 부분을 마무리.
'Learn > KH정보교육원' 카테고리의 다른 글
| [KH정보교육원 당산] 62일 (쇼핑몰 급마무리..... SPRING 이론시작) (0) | 2021.06.09 |
|---|---|
| [KH정보교육원 당산] 연습문제7 (응용 SW) (0) | 2021.06.09 |
| [KH정보교육원 당산] Ajax , JSON (0) | 2021.06.07 |
| [KH 정보교육원 당산] jQuery - 실습4 (0) | 2021.06.07 |
| [KH 정보교육원 당산] 60일차(jQuery - 실습3) (0) | 2021.06.07 |