Ajax - 기초 - (2)
이번 시간에는 JSON을 활용해서 데이터를 변환해서 데이터를 전달해보도록 하겠습니다. Ajax - 기초 (1)에서 까지는 단순히 문자열 데이터 한 개 만을 전달하고 응답했다면 JSON을 활용해서 json object로 변환해서 활용하는 방법을 살펴보겠습니다. json을 활용하면 어떤 것이 가능해지는지 중점적으로 살펴보면 좋을 것 같습니다. ( 참고로 이 블로그에서 사용하는 예제는 KOSTA edu에서 교육을 받으면서 공부했던 예제들입니다. )
JSON 라이브러리 활용 - 1
|
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 type="text/javascript">
function startAjax() {
let maker=document.getElementById("maker").value;
if(maker==""){
document.getElementById("modelView").innerHTML="";
document.getElementById("priceView").innerHTML="";
return;
}
let xhr=new XMLHttpRequest();
xhr.onload=function(){
//alert(xhr.responseText);
//응답정보를 json object 로 변환한다
let json=JSON.parse(xhr.responseText);
document.getElementById("modelView").innerHTML=json.model;
document.getElementById("priceView").innerHTML=json.price;
}
xhr.open("get","JSONObjectServlet?maker="+maker);
xhr.send();
}
</script>
</head>
<body>
<select id="maker" onchange="startAjax()">
<option value="">---</option>
<option value="현대">현대</option>
<option value="르노">르노</option>
<option value="기아">기아</option>
</select>
모델 <span id="modelView"></span> 가격 <span id="priceView"></span>
</body>
</html>
|
위의 예제는 <select> 태그를 이용하여 드랍다운을 만들고 <option> 태그를 활용하여 목록을 만듭니다. onchange 속성을 활용하여 목록을 하나 선택하게 되면 startAjax() 함수가 실행됩니다. 예를 들어 현대라는 값이 서버로 전달되면 미리 정의된 모델과 해당 가격을 전달합니다. 주목할 부분은 JSON.parse(xhr.responseText); 입니다. 해당 코드는 응답 정보 즉 xhr.responseText를 json object로 변환하는 코드입니다. 14~15 라인은 json의 키값을 이용해 value를 추출하는 것을 볼 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@WebServlet("/JSONObjectServlet")
public class JSONObjectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String maker=request.getParameter("maker");
CarDTO car=CarDAO.getInstance().getCarInfo(maker);
JSONObject json=new JSONObject(car);
System.out.println(json.toString());
out.print(json.toString());
out.close();
}
}
|
cs |
위의 코드에서 주목할 부분은 8-9번 라인이다. car 객체를 JSONObject로 바꾸는것을 볼 수 있다. 하지만 데이터를 응답할 때는 문자열로 바꾸어주는 것을 알 수 있다. json을 다른 방식으로 활용하는 예제를 살펴보자.
JSON 라이브러리 활용 - 2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script type="text/javascript">
function startAjax() {
let xhr=new XMLHttpRequest();
xhr.onload=function(){
let json=JSON.parse(xhr.responseText);
//alert(json);
//JSONArray로 서버가 응답했으므로 아래와 같이 loop가 가능하다
for(let i=0;i<json.length;i++){
alert(json[i]);
}
}
xhr.open("get","JSONArrayServlet");
xhr.send();
}
</script>
</head>
<body>
<button onclick="startAjax()">JSONArrayTest</button>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@WebServlet("/JSONArrayServlet")
public class JSONArrayServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
JSONArray ja=new JSONArray();
ja.put("김밥");
ja.put("라면");
ja.put("콜라");
out.print(ja.toString());
out.close();
}
}
|
cs |
이번에는 JSONArray를 활용하여 다수의 데이터(문자열)를 넣고 이를 전달하는것을 알 수 있다. 이런 방식도 가능하다는 것을 알았으면 한다.
JSON 라이브러리 활용 - 3
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script type="text/javascript">
function startAjax() {
let xhr=new XMLHttpRequest();
xhr.onload=function(){
let json=JSON.parse(xhr.responseText);
//alert(json);
//JSONArray로 서버가 응답했으므로 아래와 같이 loop가 가능하다
for(let i=0;i<json.length;i++){
alert(json[i].model+" "+json[i].price);
}
}
xhr.open("get","JSONArrayServlet2");
xhr.send();
}
</script>
</head>
<body>
<button onclick="startAjax()">JSONArrayTest</button>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@WebServlet("/JSONArrayServlet2")
public class JSONArrayServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
ArrayList<CarDTO> list=CarDAO.getInstance().getCarList("현대");
JSONArray ja=new JSONArray(list);
out.print(ja.toString());
out.close();
}
}
|
이번에도 JSONArray를 활용하지만 위의 예제와 다른점으로는 다수의 Objet를 JSONArray에 담는다는 것이다. 이 예제 또한 이런 식으로 JSON을 활용할 수 있구나 정도로만 알아도 충분하다. callback 함수 부분도 활용-1과 같이 배열 하나의 원소에 key값을 통해서 value를 얻어낸다.
'WEB > JavaScript' 카테고리의 다른 글
| Ajax - 기초 - (1) (0) | 2021.11.14 |
|---|