Ajax(Asynchronous JavaScript And XML, 비동기적 자바스크립트와 XML)와 JSON

AJAX란, Asynchronous Javascript And Xml

- 자바스크립트의 라이브러리 중 하나

- 클라이언트가 서버와 적은 양의 데이터를 교환하여 비동기적으로 웹페이지를 업데이트하는 기술

- 비동기적으로 업데이트한다는 것은, 곧 웹페이지를 다시 로딩하지 않고도, 페이지의 일부만을 갱신할 수 있다는 것이다.

- 빠르고 동적인 웹페이지를 만드는데 유용한 기술

- 사용 예 : 구글 맵, 키워드 검색 기능 등

1) 동기식과 비동기식

Synchronized : A작업이 종료된 후 -> B 작업 시작 가능(single thread)

Asynchronized : A작업과 B작업을 동시에 실행 가능(multi thread)

2) 비동기식 서버 요청과 관련된 메소드

$.ajax({
type: "POST", --전송방식
url : "loginPro.jsp", --파일이름,url 적을 수 있음(요청url)
data: query, --전송할 데이터
success: function(data){} --정상적으로 처리되었을 때의 코드(요청 성공 시에 실행될 콜백함수)
});

3) 고전 모델 vs Ajax 모델

고전모델(Classic web app model)은 브라우저 클라이언트가 UI를 통해 웹 서버로 요청하면, 웹 서버가 백엔드 단의 내용을 처리한 뒤, 그 결과의 데이터를 HTML,CSS(JSP가 컴파일되어)와 함께 유저 인터페이스에 전달하여 화면에 보이게 한다. 위의 그림을 보면, 클라이언트 쪽에서 작업이 진행되다가 서버쪽으로 요청하게 되면 데이터가 서버로 들어와 서버단에서 처리하게 된다. 그 처리된 결과를 클라이언트 단에 보내주면 그 기간에서 갭이 생기게된다.

이 같은 딜레이를 막기 위해서 Ajax엔진이 추가된 Ajax web app model이 등장하였다.

Ajax모델은 유저 인터페이스에서 자바스크립트를 call하면, 브라우저 내의 Ajax Engine이 서버 측에 요청하게 되고, 서버(web or xml)는 그 결과를 백단에서 처리한 뒤 XML data형식으로 만들어 Ajax Engine에게 보낸다. 그러면 Ajax Engine은 디코딩을 통해 HTML,CSS DATA로 만들어 화면에 출력한다.이처럼 ajax가 중간 개입되어 갭 없이 빠른 처리가 가능해졌다.

제이쿼리, AJAX를 활용해 구구단 출력하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax1</title>
<script src="../include\jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#button1").click(function(){ //1.버튼을 클릭하면
		var dan = $("#dan").val(); //2.입력한 텍스트필드의 값을 가져와서 변수 var에 넣음.
		$.ajax({ //3.비동기적 방식으로 서버 호출
			type : "post", --데이터 전송방식
			url : "result.jsp", --전송할 곳
			data : "dan="+dan, //쿼리스트링 방식(변수=값)사용 --전송할 데이터
			success : function(data){ //콜백함수(처리 완료 실행) --성공 시 실행되는 함수
				$("#result").html(data);--매개변수는 ajax를 통해 응답받은 데이터
			}
		});
	});
});

</script>
</head>
<body>
<h2>동기식(single thread) : 실행시 깜빡이는 현상(gap 존재) </h2>
<form action="result.jsp">
 단을 입력하세요 : <input type="text" name="dan">
 <input type="submit" value="확인">
</form>

<h2>비동기식(multi thread) : 실행할 때 깜빡이는 현상이 없음</h2>
 단을 입력하세요 : <input type="text" id="dan">
 <input type="button" id="button1" value="확인">
 
 <div id="result">결과 출력 영역</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>result</title>
</head>
<body>
<% 
int dan = Integer.parseInt(request.getParameter("dan"));
for(int i=1;i<=9;i++){
	out.println(dan + "x" + i + "=" + dan*i + "<br>");
	
}

%>


</body>
</html>

ajax를 사용하면, 처리 속도가 확실히 빠르다는 것(깜빡임 없음)을 확인할 수 있었으나, 단점 역시도 존재한다.

ajax를 너무 많이 사용하면 서버 쪽에 부하가 온다.

JSON 데이터를 활용해, AJAX로 사칙연산

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax2</title>
<script src="../include\jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#cal").click(function(){
		var x = $("#x").val();
		var y = $("#y").val();
		//JSON이라는 데이터타입으로 보내기
		var jsonData = {"x" : x, "y" : y};//json데이터 
		$.ajax({
			type : "post",
			url : "ajaxRes.jsp",
			data : jsonData,
			success : function(data){ //성공한다면
				$("#result").html(data);//데이터 출력
			}
		})
	});
});

</script>
</head>
<body>
<h2>두 수의 사칙연산</h2>
x : <input type="text" id="x"><br>
y : <input type="text" id="y"><br>
<input type="button" id="cal" value="확인"><br>

<div id="result">결과 출력 영역</div>

</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxRes.jsp</title>
</head>
<body>
<%
int x = Integer.parseInt(request.getParameter("x"));
int y = Integer.parseInt(request.getParameter("y"));

out.println("x+y : " + (x+y) + "<br>");
out.println("x-y : " + (x-y) + "<br>");
out.println("x*y : " + (x*y) + "<br>");
out.println("x/y : " + (x/y) + "<br>");


%>


</body>
</html>

ML과 JSON

XML(eXtensible Markup Language)

웹 상에서 데이터를 교환하기 위한 표준 방식

XML 문서 만드는 법

- 루트 노드 이름 결정: <result>

- 한 row 단위 node 이름 결정 : <item>

- row 하위에 들어갈 child node 이름 결정

- <item> <area>서울</area> <sales>100</sales></item>

- 태그에 종속적인 값은 속성지정 <item id="아이디">

XML의 기본 문법

- 인코딩 속성은 다국어 표현을 위해 UTF-8사용

<?xml version="1.0" encoding="utf-8" ?>

- 루트 태그는 하나만 존재

- 태그는 대소문자 구별

- 태그를 열었으면 반드시 닫을 것 (하위노드가 없다면 <mx:Button />도 가능하다.

- 태그는 서로 엇갈려서는 안된다.

XML 파싱

- XML문서를 읽어들여 문법을 검증하고 데이터를 이용하도록 처리하는 과정

*Parsing? 컴퓨터에서 컴파일러가 원시 부호를 기계어로 번역하는 과정 중 한 단계로, 각 문장의 문법적 구성과 구문을 분석하는 과정. 원시 프로그램의 토큰 열을 받아들여 이를 그 언어의 문법에 맞게 구문 분석 트리로 구성해 내는 일이다. 파싱은 크게 하향식, 상향식으로 구분된다.

XML 파서의 종류 : DOM, SAX

1) DOM(Document Object Model) Parser

장점) 한 번 파싱되면 언제든 읽을 수 있다.

단점) 한 번 읽어서 사용하기 때문에 많은 정보를 읽어들이는 경우에는 시간이 걸린다. 읽어들여야 할 게 많을 경우 메모리를 많이 사용하기에 앱이 죽을 수 있다.

2)SAX(Simple API for XML) Parser

장점) 라인으로 읽기 때문에 일정하고 적은량의 메모리 사용

단점) 원하는 정보를 얻으려면 반드시 파싱이 필요. 특정 Element에 대해서 어떻게 동작할지 사용자가 직접 정의해야함.

* well-formed / valid

well-formed : 기본문법 준수(하나의 유일한 루트 노드, 시작태그와 끝 태그 반드시 한 쌍, 엘리먼트 간 겹치지 않기)

valid : well-formed + DTD(Document Type Definition, 문서규격) 준수

*네임스페이스(Name Space) : 동일한 태그를 구분짓는 접두어

- XML에서 접두사를 사용하는 경우 접두사의 네임 스페이스를 정의해야한다.

- 네임 스페이스는 요소의 시작 태그에서 xmlns 속성으로 정의 가능하다.

- 네임 스페이스 선언은 xmlns : 접두사 = "url"

JSON(JavaScript Object Notation) : 텍스트 기반 데이터 교환 형식

- JSON이 XML보다 입출력 속도가 빠르다.

- JSON 구문 규칙 {"이름":"값"}

- JSON은 자바스크립트 객체 표기법에서 파생되었으므로, 만일 자바스크립트에서 JSON을 사용한다면 다음과 같은 형식을 취한다. { name : "kim" }

- JavaScript에서 JSON 사용시 다음과 같이 객체를 만들고 데이터 접근을 할 수 있다.

객체 생성) var person = { name : "kim" , age : 31, city : "Seoul" };

객체 액세스) person.name;

JSON 객체 생성 및 액세스 접근

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonEx1</title>
<script src="../include\jquery-3.6.0.min.js"></script>
</head>
<body>
	<p id="demo"></p>
	<p id="demo2"></p>
	<p id="demo3"></p>
<script type="text/javascript">
var myObj, x,y,z;
//{"변수명":"값","변수명":"값",....}
myObj = {"name":"kim","age":30,"city":"seoul" };//json 데이터 타입(K:V)
//key변수에 "" 적는 게 정석이지만, 빼도 상관없다.
x = myObj.name;
y = myObj.age;
z = myObj.city;

document.getElementById("demo").innerHTML = x;
$("#demo2").html(y);
$("#demo3").html(z);
</script>
</body>
</html>

JSON 데이터를 배열로 처리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonEx2</title>
<script src="../include\jquery-3.6.0.min.js"></script>
<script>
//배열처리
$(function(){
	var students = [{'name':'김유신','age':21},{'name':'김춘태','age':16},{'name':'김인혜','age':31}];
	console.log("배열로 들어온 students값은 ?" + students);
	var name = "";
	var age ="";
	for(i=0;i<students.length;i++){
		name += students[i].name + " ";
		age += students[i].age + " ";
	}
	$("#name").html(name);
	$("#age").html(age);
});
</script>
</head>
<body>
<h4>학생 명단</h4>
<p style="background-color:yellow;">
 이름 : <span id="name"></span>&nbsp; 나이:<span id="age"></span>
</p>
</body>
</html>

따로 JSON파일을 만들어서 가져오기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json_parse</title>
<script src="../include\jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
	//json데이터를 가져오는 함수 
	$.getJSON("student.json", function(data, textStatus) {
		console.log("data:" + data);
		console.log("textStatus:" + textStatus);
		//요소 추가시에 append사용
		$("#students").append("<tr><td>번호</td><td>이름</td><td>전화번호</td></tr>");
		//for문과 같은 것으로 돌리면서 데이터를 가져와야한다.
		//jQuery에서 제공하는 $.each함수
		$.each(data,function(){//each()는 java의 for each문과 유사
			$("#students").append("<tr><td>"+this.num+"</td><td>"+this.name+"</td><td>"+this.tel+"</td></tr>");
		});
	
	});
});


</script>
</head>
<body>
 <table id="students" style="width:500px;" border="1">
 
 </table>
</body>
</html>

[{"num":1,"name":"kim","tel":"010-1234-5678"},
{"num":2,"name":"park","tel":"010-2345-5876"},
{"num":3,"name":"lee","tel":"010-1345-2352"},
{"num":4,"name":"song","tel":"010-3344-3125"},
{"num":5,"name":"choi","tel":"010-5644-5328"}]

$.getJSON(url,[data],[success]);

url : 요청을 보낼 주소

data : 요청과 함께 서버로 보낼 데이터

success : 전송 완료 후에 실행될 콜백함수, function(data,textStatus){};

$.each(object,function(index,item){

});

- jQuery.each()함수 : 배열, 객체를 반복적으로 처리할 때 사용

- 첫 번째 인자에는 배열이나 객체가 올 수 있다.

- 두 번째 인자에는 각 요소를 반복하면서 처리할 콜백 함수

- 콜백함수는 배열의 인덱스 또는 객체의 키값, 인덱스와 키 값의 value값 두 개의 매개변수를 가진다.

'WEB' 카테고리의 다른 글

JQUERY MOBILE WEB 기초 (0)	2022.07.06
제이쿼리 예제(2) (0)	2022.07.06
jQuery와 예제 (0)	2022.07.04
UI 설계 및 구현 (0)	2022.06.22
XML, JSP 맛보기 및 입력 태그 (0)	2022.06.13

ADUNG_DEVELOP

Ajax(Asynchronous JavaScript And XML, 비동기적 자바스크립트와 XML)와 JSON

AJAX란, Asynchronous Javascript And Xml

1) 동기식과 비동기식

2) 비동기식 서버 요청과 관련된 메소드

3) 고전 모델 vs Ajax 모델

ML과 JSON

XML(eXtensible Markup Language)

JSON(JavaScript Object Notation) : 텍스트 기반 데이터 교환 형식

'WEB' 카테고리의 다른 글

티스토리툴바

Ajax(Asynchronous JavaScript And XML, 비동기적 자바스크립트와 XML)와 JSON

AJAX란, Asynchronous Javascript And Xml

1) 동기식과 비동기식

2) 비동기식 서버 요청과 관련된 메소드

3) 고전 모델 vs Ajax 모델

ML과 JSON

XML(eXtensible Markup Language)

JSON(JavaScript Object Notation) : 텍스트 기반 데이터 교환 형식

'WEB' 카테고리의 다른 글

관련글

티스토리툴바