728x90
반응형
1. 데이터 보내기
- JSON의 일반적인 용도는 웹서버와 데이터를 교환하는 것입니다.
- 웹서버에서 데이터를 수신할 때 데이터는 항상 문자열입니다.
## 코드 보기
- 자바스크립트 객체의 데이터를 php 파일에 데이터로 보내는 방법입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON Server</title>
</head>
<body>
<script>
const originData = { name : "진", age : 31, birth: "1992-12-04" };
const changeData = JSON.stringify(originData);
window.location = "test.php?x=" + changeData;
</script>
</body>
</html>- 주소표시줄을 통해 파라미터로 php파일에 데이터를 보냅니다.
## 결과 보기
- 주소표시줄에 보면 php파일에 데이터를 보내고 있는 것이 확인됩니다.
- 이건 실제 서버도 아니고 현재 php 파일이 없이 때문에 php파일이 없다고 문서에 표시됩니다.
- 실제 php 파일과 서버라면 데이터를 보낼 수 있습니다.
728x90
반응형
2. 서버의 JSON
- AJAX의 XMLHttpRequest 객체를 사용하여 서버에서 데이터를 가져올 수 있습니다.
- 더 자세한 강좌는 AJAX강좌로 계속 이어갈 예정입니다.
- 지금은 데이터를 가져오는 것만 보도록 하겠습니다.
## test.json
{
"name" : "진",
"age" : 31,
"birth": 1992
}
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JSON Server</title>
</head>
<body>
<script>
const xmlhttp = new XMLHttpRequest(); //XMLHttpRequest를 사용하여 서버에서 데이터가져오기
xmlhttp.onload = function() { //데이터가 로드되면
const changeData = JSON.parse(this.responseText); //응답된 문자열을 자바스크립트 객체로 변환해서 변수에 담기
alert(changeData.name); //그 객체 중 name속성값을 호출
};
xmlhttp.open("GET", "test.json"); //test.json 데이터에서 값을 얻어옴
xmlhttp.send();
</script>
</body>
</html>- 자세한 강좌는 다음 강좌인 AJAX파트에서 더 자세히 보도록 하겠습니다.
## 결과 보기
- json파일에 있던 결과가 잘 호출되는 것을 확인할 수 있습니다.
728x90
반응형
'웹언어 > JSON' 카테고리의 다른 글
| [JSON강좌] 5강 JSON.stringify() 메서드 - 오쌤의 니가스터디 (0) | 2022.11.17 |
|---|---|
| [JSON강좌] 4강 JSON parse() 메서드 - 오쌤의 니가스터디 (0) | 2022.11.11 |
| [JSON강좌] 3강 JSON 데이터 유형 - 오쌤의 니가스터디 (2) | 2022.11.11 |
| [JSON강좌] 2강 데이터형식 비교(JSON VS XML) - 오쌤의 니가스터디 (0) | 2022.11.10 |
| [JSON강좌] 1강 JSON 소개와 문법 - 오쌤의 니가스터디 (0) | 2022.11.08 |
