Ajax(Asynchronous JavaScript and XML):
클라이언트와 서버가 페이지 새로고침 없이 데이터를 주고받도록 구현하는 방식
JSON(JavaScript Object Notation):
javascript객체 문법을 따르는 문자기반의 데이터 포맷
문자열 형태로 존재 -> 네트워크를 통해 전송할 때 아주 유용
문자열에서 네이티브 객체로 변환하는 것을 파싱(Parsing)
네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은
문자열화(Stringification)이라고 한다.
SampleDto.java
public class SampleDto {
private String name;
private int age;
public SampleDto() {
super();
// TODO Auto-generated constructor stub
}
public SampleDto(String name, int age) {
super();
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
@Override
public String toString() {
return "SampleDto [name=" + name + ", age=" + age + "]";
}
}AjaxForm.jsp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxForm</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
var v = 1;
$("#myButton").click(function(){
//get - $.get(url, data, function(rData) {}), post - $.post()
// $.get("ajaxSend.jsp", {"v" : v}, function(rData){
$.getJSON("ajaxSend.jsp", {"v" : v}, function(rData){
$.each(rData, function(){ // rData : 배열
var name = this.name;
var age = this.age;
var tr = "<tr>";
tr += "<td>" + name + "</td>";
tr += "<td>" + age + "</td>";
tr += "</tr>"; //<tr><td>홍길동</td><td>20</td></tr>
$("#myTable").append(tr);
});
});
});
});
</script>
</head>
<body>
<input type="button" value="데이터 가져오기" id="myButton"/>
<table border="1" id="myTable">
<tr></tr>
</table>
</body>
</html>Ajaxsend.jsp
<%@page import="com.gu.vo.SampleDto"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
List<SampleDto> list = new ArrayList<>();
list.add(new SampleDto("홍길동", 20));
list.add(new SampleDto("최길동", 30));
list.add(new SampleDto("고길동", 40));
list.add(new SampleDto("김길동", 50));
list.add(new SampleDto("초길동", 60));
//JSONArray - [], JSONObject - {}
JSONArray jsonArray = new JSONArray(); // []
for(SampleDto dto : list){
JSONObject jsonObject = new JSONObject(); // {}
jsonObject.put("name", dto.getName()); // {"name" : "홍길동"}
jsonObject.put("age", dto.getAge()); // {"name" : "홍길동", "age" : 20}
jsonArray.add(jsonObject); //[{"name":"홍길동", "age":20}, {}, {}]
}
String data = jsonArray.toJSONString();
out.print(data);
%>data.jsp
${data}
'JSP' 카테고리의 다른 글
| Servlet lifecycle(서블릿 생명주기) (0) | 2024.01.22 |
|---|---|
| MVC 패턴(Model 2) (0) | 2023.09.12 |
| servlet(서블릿) 정리 예제 2 (1) | 2023.09.12 |
| servlet(서블릿) 정리 예제1 (0) | 2023.09.12 |
| EL 정리 예제 2 (0) | 2023.09.12 |
댓글