[JS] Ajax와 Json을 활용해서 웹사이트 구현하기

 

01. 비동기와 동기

 

01) 비동기식(Asynchronous)

• 요청과 응답이 동시에 일어나지 않고 나중에 응답하는 것
• 웹페이지를 새로고침 하지 않고 데이터를 불러오는 방식으로 웹페이지의 일부분만 바뀔 때 사용하는 것이 좋음
• 처리결과에 의존하지 않고 성능적으로 빠른 처리가 가능함
• ex. 블로그나 카페에서 댓글을 작성할 때 페이지 전체가 로드되지 않고 댓글 영역 부분만 업데이트 됨

02) 비동기 통신의 장점과 단점

• 필요한 부분만 업데이트하기 때문에 웹페이지의 속도와 성능을 향상시킬 수 있음
• 서버와의 통신량이 줄어들고, 자원과 시간을 절약할 수 있음
• 요청과 응답이 동시에 일어나지 않기 때문에 요청을 보낸 후에도 다른 작업을 할 수 있음
• 동기 통신보다 코드가 어렵고 복잡도가 증가할 수 있음
• 요청의 처리 속도에 따라 요청과 응답의 순서를 보장할 수 없음
• 요청과 응답이 분리되어 있기 때문에, 에러가 발생했을 때 처리하는데 어려움이 있음

03) 동기식(Synchronous)

• 요청과 응답이 동시에 일어남
• 웹페이지를 새로고침하면서 데이터를 불러오는 방식
• 웹페이지의 전체를 갱신할 수 있게 해주는 기술로 전체적인 구조나 디자인을 바꾸는 경우 사용하는 것이 좋음
• 서비스 특징에 따라 처리 결과에 의해 처리하여 서비스의 질을 높일 수 있음
• ex. 폼(Form) 제출 : 웹페이지에서 사용자의 입력을 받아 서버에 전송하는 역할로, 클라이언트에서 폼을 제출하면 서버로부터 새로운 웹페이지를 받아서 화면에 표시

04) 동기 통신의 장점과 단점

• 비동기 통신보다 코드가 비교적 쉬움
• 요청과 응답이 순차적으로 이루어지기 때문에 코드의 간결성과 직관성을 유지할 수 있음
• 요청과 응답의 순서를 보장할 수 있음
• 요청과 응답이 연결되어 있기 때문에 에러가 발생했을 경우 에러에 대한 처리가 쉬움
• 서버와의 통신량이 많아지고, 웹페이지의 속도와 성능이 저하될 수 있음
• 요청과 응답이 동시에 일어나야 하기 때문에 요청을 보낸 후에는 다른 작업을 할 수 없음

 

 

02. Ajax

 

01) 의미

• AJAX(Asynchronous JavaScript And XML)
• 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식
• 웹페이지가 로딩된 후에도 서버로부터 필요한 데이터만 요청하고 받아서 웹페이지를 동적으로 갱신할 수 있음

02) 동작원리

1. 웹 브라우저에서 사용자의 요청이 발생하면, 자바스크립트로 XMLHttpRequest 객체를 생성
2. XMLHttpRequest 객체는 서버에 비동기적으로 요청을 보냄
3. 서버는 요청을 처리하고 응답을 XML이나 JSON 형식으로 보냄
4. XMLHttpRequest 객체는 응답을 받아서 자바스크립트로 처리
5. 자바스크립트로 처리된 결과를 웹 브라우저에 반영

03) Ajax의 장점과 단점

• 웹 페이지의 속도와 사용성을 향상시킬 수 있음
• 서버의 리소스를 효율적으로 활용할 수 있음
• HTML, XML, JSON 등의 다양한 데이터 형식 지원
• 보안과 브라우저의 호환성 문제가 있을 수 있음

04) 기본형식

$.ajax ({
  url	: "url", // 요청이 전송될 URL 주소
  type	: "GET", // http 요청 방식 (default: ‘GET’)
  async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
  cache : true,  // 캐시 여부
  timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
  data  : {key : value}, // 요청 시 포함되어질 데이터
  processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
  contentType : "application/json", // 요청 컨텐트 타입 
  dataType    : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
  beforeSend  : function () {
    // XHR Header를 포함해서 HTTP Request를 하기전에 호출
  },
  success : function(data, status, xhr) {
    // 정상적으로 응답 받았을 경우에는 success 콜백이 호출
    // 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있음
  },
  error	: function(xhr, status, error) {
        // 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 
        // error 콜백이 호출될 수 있음
        // 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
        // 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됨
  },
  complete : function(xhr, status) {
    // success와 error 콜백이 호출된 후에 반드시 호출됨
    // try - catch - finally의 finally 구문과 동일
  }
});

 

 

03. JSON

 

01) 의미

• JavaScript Object Notation : 경량의 DATA-교환 형식
• 사람이 읽을 수 있는 텍스트를 사용하여 데이터를 저장하고 전송하는 데이터 공유를 위한 개방형 표준 파일 형식
• JavaScript에서 파생되지만 언어 독립적인 데이터 형식으로 XML에 대한 좋은 대안

02) 파일구조

• 기본 형식은 { "key" : "value", "key" : "value", "key" : "value" } 키와 값이 쌍으로 작성됨
• ex. let names = {name1: "홍길동", name2: "김길동"}
        Systems.out.println(names.name1); // 홍길동

03) pom.xml에 json.jar 파일 등록하기

 

[ STEP 1 ]  <dependencies> 안에 아래의 코드 추가하기

<!-- https://mvnrepository.com/artifact/org.json/json -->
		<dependency>
			<groupId>org.json</groupId>
			<artifactId>json</artifactId>
			<version>20230227</version>
		</dependency>

 

[ STEP 2 ] 파일이 잘 들어갔는지 확인

 

 

04) JSON vs XML

• XML은 인터넷을 통한 데이터 교환을 위해 사용되는 파일 형식
• JSON은 XML 파일 형식에 비해 명확하고 읽기 쉬운 데이터 보기를 제공함
• JSON은 XML에 비해 동일한 데이터 세트를 정의하는 문자수가 적기 때문에 데이터 전송 오버헤드를 줄일 수 있음

 

 

04. Ajax 활용하여 중복 아이디 가입 제어하기

 

01) join.jsp

<script type="text/javascript">
$(function() {
	$("#idCheck").click(function () {
		let id = $("#id").val();// id의 값을 뽑아내서 변수에 담음
		
		// 비어있거나 4글자 미만일 경우
		if ( id == "" || id.length < 4 ) {
			$("#resultMSG").text("Please enter at least 4 characters.");
			$("#resultMSG").css("color", "#E91E63").css("font-size", "12pt");
			$("#id").css("border","2px solid #E91E63").focus();
			
		} else {// 정확히 입력했을 경우
			$.ajax({// ajax 시작
				url : "./checkID",// post-mapping의 checkID
				type : "post",
				data : {"id" : id},// 값으로 id를 보냄
				dataType : "json", // json형태 : {result : 0}
				success : function(data){// 성공했을 경우
					if (data.result == 1) {// 이미 등록된 아이디일 경우
						$("#resultMSG").text("This username is already taken.").css("color", "#E91E63").css("font-size", "12pt");
						$("#id").css("border","2px solid #E91E63").focus();
						
					} else {// 가입할 수 있는 경우
						$("#resultMSG").text("This username is available.").css("color", "#424242").css("font-size", "12pt").css("font-weight", "border");
						$("#id").css("border","1px solid black").css("background-color","#E8F0FE");
					}
				},
				error : function (request, status, error){// 실패했을 경우
					// 에러는 기본적으로 3가지 종류가 있음 : request, status, error
					$("#resultMSG").text("Sorry, there was an error with your registration.").css("color", "#E91E63").css("font-size", "12pt");
				}
			});
		}
		return false;// 더 이상 진행을 멈춤
	});
});
</script>

 

 

02) ResttController.java

• @ResponseBody : return값만 가지고 body에 전달하며 이 내용이 없는 경우엔 해당 jsp 파일이 호출됨

// 기본 형식
@ResponseBody
@PostMapping("/checkID")
public String checkID(@RequestParam("id") String id) {
	return "";
}

// 활용 형식
@PostMapping("/checkID")
public @ResponseBody String checkID(@RequestParam("id") String id) {
	return "";
}

 

• 아이디 중복 검사하는 코드
  (@RequestParam : 필수로 들어와야 하고 들어오지 않는다면 에러 발생
  (@RequestParam("id") String id) == (@RequestParam(String id)  같은의미

// 아이디 중복검사
@ResponseBody
@PostMapping("/checkID")
public String checkID(@RequestParam("id") String id) {// 반드시 id 값이 들어와야 동작
	int result = loginService.checkID(id);
	JSONObject json = new JSONObject();
	json.put("result", result);// result란 이름으로 result를 담음

	return json.toString();// 타입을 string으로 맞춰줘야 함
}

 

03) Loginservice.java

public int checkID(String id) {
	return loginDAO.checkID(id);
}

 

04) LoginDAO.java

public int checkID(String id) {
	return sqlSession.selectOne("login.checkID", id);
}

 

05) login-mapper.xml

<select id="checkID" parameterType="String" resultType="Integer">
	SELECT COUNT(*) FROM members WHERE m_id = #{id }
</select>

 

실행화면

 

 

05. Json 이용해서 'board2' 만들기

 

01) ResttController.java

• @RestController : @Controller + @ResponseBody가 합쳐진 것으로 Json 형태로 객체 데이터를 반환하는 것
• @Autowired 는 사용할 때마다 새로 써줘야 함

//boardList2
@GetMapping("/boardList2")
public String boardList2() {
    // loginService.boardList2()을 받아서 list의 map타입으로 오는 것
    List<Map<String, Object>> list = loginService.boardList2();
    System.out.println(list);
    return "";
}

 

02) LoginService.java

public List<Map<String, Object>> boardList2() {
	return loginDAO.boardList2();
}

 

03) LoginDAO.java

public List<Map<String, Object>> boardList2() {
	return sqlSession.selectList("login.boardList2");// login 안에다가 boardList2 만들기
}

 

04) login-mapping.xml

<select id="boardList2" resultType="Map">
    SELECT *
    FROM boardview LIMIT 0, 10
</select>

 

 

 

참고자료
블로그, '🌐 웹의 비동기(Async) / 동기(Sync) 통신 정리 (tistory.com)'
블로그, 'https://devyj.tistory.com/1'