이번에는 개발을 하면서 자주 등장하는 개념인 ajax와 json에 대해서 알아보았다.
1. Ajax (Asynchronous Javascript And Xml) : 비동기 통신
-
빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.
-
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
-
Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
-
서버와는 다양한 형태의 데이터를 주고받을 수 있다. ( json, xml, html, txt파일 ... )
Ajax의 장점
-
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
-
웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
-
웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.
-
백그라운드 영역에서 서버로 데이터를 보낼 수 있다.
Ajax의 한계
-
클라이언트가 서버에 데이터를 요청하는 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
-
Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.
-
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
-
클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.
2. JSON (JavaScript Object Notation)
-
JavaScript에서 객체를 만들 때 사용하는 표현식
-
사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다.
-
AJAX로 전송가능한 형식
-
사용 가능한 자료형은 숫자(number) , 문자열(string) , 불리언(boolean) , 객체(object) , 배열(array) , NULL이 있다.
-
JSON.parse()메서드 : (파싱) 문자열을 자바스크립트의 데이터로 변환한다.
-
JSON.stringify()메서드 : (문자열화) 자바스크립트의 데이터를 문자열로 변환한다.
[형식] : { name1 : value2 , name2 : value2 , name3 : value3... }
1) 중괄호로 오브젝트를 묶는다.
2) 데이터는 name/value 쌍으로 생성한다.
3) 복수의 데이터는 콤마( , )로 분리한다.
4) 배열은 대괄호를 사용한다. (예시 [1,2,3,4,5])
<script>
$().ready(function (){
// 세팅
var product = {
productCode : "0000-1362",
productName : "samsug TV",
qty : 50,
soldout : false,
tvSize : [30, 50, 40]
};
// 출력
console.log(product);
console.log(product["productCode"]);
console.log(product["tvSize"][0]);
// 변경
product["productCode"] = "0000-1234";
// 문자열 화 -> 데이터가 많아지면 여러 데이터를 하나의 문자열로 변환하여 보내준다.
var strProduct = JSON.stringify(product);
console.log(strProduct);
});
</script>JSON 형식의 AJAX 비동기 통신 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#sendData").click(function(){
var checkedDataValueList = "";
$("input[name='hobbies']:checked").each(function(){
checkedDataValueList += $(this).val() + " ";
});
var dataSet = {
id : $("#id").val(),
pwd : $("#pwd").val(),
gender : $("input[name='gender']:checked").val(),
hobbies : checkedDataValueList,
travel : $("#travel").val(),
content : $("#content").val()
}
$.ajax({
url:'practice03_pro.jsp',
type:'post',
data:dataSet,
success: function() {
$("#id").prop("disabled",true);
$("#pwd").prop("disabled",true);
$("input[name='gender']").prop("disabled",true);
$("input[name='hobbies']").prop("disabled",true);
$("#travel").prop("disabled",true);
$("#content").prop("disabled",true);
}
});
});
});
</script>
</head>
<body>
<form>
<fieldset>
<p><label for="id">아이디 : </label><input type="text" id="id" name="id"/></p>
<p><label for="pwd">비밀번호 : </label><input type="password" id="pwd" name="pwd"/></p>
<p>
성별 : <input type="radio" name="gender" value="1"/>남자
<input type="radio" name="gender" value="2"/>여자
</p>
<p>
취미 : <input type="checkbox" name="hobbies" value="운동"/>운동
<input type="checkbox" name="hobbies" value="잠자기"/>잠자기
<input type="checkbox" name="hobbies" value="공부하기"/>공부하기
</p>
<p>
가고 싶은 여행지 :
<select id="travel" name="travel">
<option>일본</option>
<option>중국</option>
<option>미국</option>
</select>
</p>
<p>
<label for="content">메모</label><br/>
<textarea rows="10" cols="50" id="content" name="content"></textarea>
</p>
<input type="button" id="sendData" value="Ajax전송">
</fieldset>
</form>
</body>
</html>