jQuery Ajax JSON: 동기 비동기 자바스크립트

코딩하는 포로리·2022년 1월 30일
jquery
1

jQuery

목록 보기
5/5
post-thumbnail

📌 1. 동기식 처리 모델(Synchronous Processing Model)

👉동기 비동기 처리 모델 포스팅 글 참고👈

📎 동기식 처리 모델이란?

동기식 처리 모델은 직렬적으로 일(task)을 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다.


📎 동기식 처리 모델 예시

만약 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업중단)이 된다.


📎 동기식 처리 모델 코드

아래는 동기식으로 동작하는 코드이다. 직렬적 = 순차적으로 진행되기 때문에 콘솔에 Hello1 → Hello2 → Hello3 순서로 출력된다. 

function hello1() {
  console.log('hello1');
  func2();
}

function hello2() {
  console.log('hello2');
  func3();
}

function hello3() {
  console.log('hello3');
}

hello1();



📌 2. 비동기식 처리 모델(Asynchronous Processing Model)

📎 비동기식 처리 모델이란?

비동기식 처리 모델은 동기식과 반대로 병렬적으로 태스크를 수행한다. 즉, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다.


📎 비동기식 처리 모델 예시

만약 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 태스크를 수행한다. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고, 이벤트 핸들러가 데이터를 가지고 수행할 태스크를 계속해 수행한다.


📎 비동기 방식 장점

페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.


📎 비동기식 처리 모델 코드

자바스크립트의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval) 그리고 Ajax 요청은 비동기식 처리 모델로 동작한다.

그리고 아래 코드는 비동기식으로 처리 되기 때문에 콘솔에 Hello1 → Hello3 → Hello2 순서로 출력된다.

비동기적 코드가 다른 코드가 실행되는 동안 처리가 계속 진행되지만 그 결과는 동기적 코드가 전부 실행 되고나서 값을 반환하기 때문이다.

function hello1() {
  console.log('hello1');
  func2();
}

function hello2() {
  setTimeout(function() {
    console.log('hello2');
  }, 0);

  func3();
}

function hello3() {
  console.log('hello3');
}

hello1();

👉 코드 해석

  1. hello1 함수가 실행되면서 콘솔에 hello1를 입력한다.
  2. hello2 함수가 실행되면서 setTimeout() 메소드가 뒤따라서 실행된다. 해당 메소드는 비동기식이기 때문에 이를 처리하는 다른 프로그램에 맡긴다.
  3. 곧바로 hello3 함수가 실행되면서 콘솔에 hello3를 입력한다.
  4. setTimeout() 메소드를 처리하는 프로그램은 비동기적 API를 제외한 모든 코드가 실행 된 이후 결과를 콘솔에 입력하기 때문에 맨 마지막에 hello2가 콘솔에 입력된다.


📌 3. Ajax(Asynchronous Javascript And XML)란?

📎 Ajax란?

Ajax, 자바스크립트의 라이브러리 중 하나이며 Asynchronous Javascript And XML의 약자이다. 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청한다.


📎 Ajax 장점

  • 웹페이지 속도향상
  • 서버의 처리가 완료될때까지 기다리지 않고 처리가 가능
  • 서버에서 DATA만 전송하면되므로 코딩 양이 줄어듦
  • 기존웹에서 불가능했던 다양한 UI가 가능

📎 Ajax 단점

  • 히스토리 관리가 잘 안됨
  • 페이지이동없는 통신으로 보안상 문제가 있음
  • 연속으로 데이터 요청하면 서버 부하가 있을 수 있음
  • ajax를 쓸 수 없는 브라우저에 대한 이슈가 있음
  • HTTP 클라이언트의 기능이 한정되어 있음
  • 지원하는 charset이 한정되어 있음
  • Script로 작성되므로 디버깅이 용이하지 않음
  • 다른 도메인과 통신이 불가능함

📎 Ajax 특징

  • 페이지의 전환 없이 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
  • 서버에서 처리가 완료될때까지 기다리지 않고 페이지 이동 없이 다른 프로세스를 진행할 수 있다.
  • 서버와 주고받을 수 있는 데이터 형식은 JSON,XML,HTML,텍스트 파일 등이 있다.

📎 Ajax 형식

$.ajax({
url: "",
type: "",
cache: ,
dataType: "",
data: "",
success: function(res){
},
error: function (request, status, error){
}
});

👉 url: 요청이 전송될 URL주소를 작성한다.
👉 type: 데이터 전송방식( GET 또는 POST )을 작성한다.
👉 cache: 요청 페이지의 캐시 여부(false 또는 true)를 작성한다.
👉 datatype: 서버에서 받아올 데이터를 어떤 형태(xml, json, html, script)로 해석할 것인지를 작성한다.
👉 data: 서버에 전송하고 싶은 데이터를 작성한다.
👉 success: Ajax 통신에 성공했을 때 실행되는 이벤트 (함수의 인자로 응답본문을 받는다.)
👉 error: Ajax 통신에 실패했을 때 실행되는 이벤트 (request, status, error로 에러 정보를 확인할 수 있다.)


📌 4. 파일별 Ajax 사용 방법

📎 HTML 파일에서 Ajax 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
	
	$().ready(function(){
		
		$("#sendData").click(function(){
			
			// json 형식으로 데이터를 전송할 형식 지정
			var params = {
				id : $("#id").val() ,
				pwd : $("#pwd").val(),
				account : $("#account").val()
			}
			
			// ajax 통신
			$.ajax({
				url : "ajaxEx02Pro.jsp",
				type : "post",
				data : params,
				success: function(){
					alert("성공하였습니다.");
					$("#id , #pwd , #account").prop("disabled" , true);
				},
				error : function(){
					alert("통신이 실패하였습니다.");
				}
				
			});
			
		});
		
	});
	
</script>
</head>
<body>
	<form>
		<fieldset>
			<p><label for="id">id : </label><input type="text" id="id"></p>
			<p><label for="pwd">pwd : </label><input type="password" id="pwd"></p>
			<p><label for="account">account : </label><input type="text" id="account"></p>
			<input type="button" id="sendData" value="데이터 전송">
		</fieldset> 
	</form>
</body>
</html>

📎 JSP 파일에서 Ajax로 넘겨받은 데이터 출력 예시

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxPro</title>
</head>
<body>

	<% 
		request.setCharacterEncoding("utf-8");
	
		System.out.println("--- 전송된 데이터 확인 ---");
		System.out.println("id : " + request.getParameter("id"));
		System.out.println("pwd : " + request.getParameter("pwd"));
		System.out.println("account : " + request.getParameter("account"));
		System.out.println();
		
	%>

</body>
</html>

👉 콘솔에서 출력된 값=Ajax로 받은 값!

📌 5. JSON(JavaScript Object Notation)

📎 JSON이란?

자바스크립트에서 객체를 만들 때 사용하는 표현식이다. JSON으로 가져올 수 있는 데이터는 해당 자바스크립트가 로드된 서버의 데이터에 한정되어 있다.


📎 JSON 형식

{ name1 : value2 , name2 : value2 , name3 : value3... }

  • 중괄호로 오브젝트를 묶는다.
  • 데이터는 name/value 쌍으로 생성한다.
  • 복수의 데이터는 ‘,’로 분리한다.
  • 배열은 대괄호를 사용한다. (예시 [1,2,3,4,5])

📎 JSON 특징

  • 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다.
  • 가벼운 텍스트 기반 교환 형식이다.
  • 언어에 의존하지 않는다.

📎 JSON 데이터 타입

타입설명
NumberJavaScript에서 배정되는 정밀한 부동 소수점 형식
String큰 따옴표를 사용한 유니코드
Booleantrue 또는 false
Array연속된 값들의 정렬
Valuestring, number, true 또는 false, null 등
Object정렬되지 않은 key:value 콜렉션
Whitespace토큰쌍 사이에서 사용 가능
null비었음

📎 JSON의 형식변환

메소드내용
JSON.parse(SON 형식의 텍스트)(파싱) 문자열을 자바스크립트의 데이터로 변환한다.
JSON.stringify(JSON 형식(문자열)으로 변환할 값)(문자열화) 자바스크립트의 데이터를 문자열로 변환한다.

📎 JSON 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON 기초</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>

	$(document).ready(function(){
		
		var product = {
			productCode : "0000-1362",
			productName : "samsung TV",
			quantity : 777,
			isSoldOut : false,
			tvSize : [30,50,70]
		};
		
		console.log(product);
		console.log(product["productCode"]);
		console.log(product["productName"]);
		console.log(product["quantity"]);
		console.log(product["isSoldOut"]);
		console.log(product["tvSize"]);
		console.log(product["tvSize"][0]);
		console.log(product["tvSize"][1]);
		console.log(product["tvSize"][2]);
		console.log("");
		
		product["productCode"] = "0000-1363";
		product["productName"] = "samsung smart TV";
		product["quantity"] = 0;
		product["isSoldOut"] = true;
		
		console.log(product);
		console.log(product["productCode"]);
		console.log(product["productName"]);
		console.log(product["quantity"]);
		console.log(product["isSoldOut"]);
		console.log(product["tvSize"]);
		console.log(product["tvSize"][0]);
		console.log(product["tvSize"][1]);
		console.log(product["tvSize"][2]);
		console.log("");

	});
	
</script>
</head>
<body>

</body>
</html>



📖 참고

profile
코딩하는 포로리
이전 포스트

jQuery Event 이벤트

0개의 댓글