, 삼
그리고
- .
JSON은 무엇이고 왜 사용하나요? JSON 소개 json 형식은 어떤 데이터와 함께 사용되나요?
JSON 또는 JavaScript 객체 표기법은 키-값 쌍 및 순서 목록의 원칙을 기반으로 구조화된 데이터의 구조화되지 않은 텍스트 표현을 구현하는 형식입니다. JSON은 JavaScript에서 시작되었지만 기본적으로 또는 특수 라이브러리의 도움을 받아 대부분의 언어에서 지원됩니다. 일반적으로 Json은 웹 클라이언트와 웹 서버 간에 정보를 교환하는 데 사용됩니다.
지난 15년 동안 JSON은 공식적인 데이터 교환 표준이 되었으며 사실상 인터넷의 모든 곳에서 사용됩니다. 오늘날 거의 모든 웹 서버에서 사용됩니다. 이러한 인기의 또 다른 이유는 많은 데이터베이스가 JSON을 지원한다는 사실이었습니다. PostgreSQL 및 MySQL과 같은 최신 관계형 데이터베이스는 이제 JSON으로 데이터 저장 및 내보내기를 지원합니다. MongoDB 및 Neo4j와 같은 데이터베이스도 JSON을 지원하지만 MongoDB는 약간 수정된 JSON 버전을 사용합니다. 이 기사에서는 JSON이 무엇인지, XML에 비해 장점과 단점, 그리고 언제 사용하는 것이 가장 좋은지 살펴보겠습니다.
JSON 형식이 필요한 이유와 작동 방식을 이해하려면 연습이 필요합니다. 먼저 이 예를 살펴보겠습니다.
{
"firstName": "조나단",
“성”: “프리먼”,
“로그인 개수”: 4,
"isWriter": 사실,
"worksWith": ["Spantree 기술 그룹", "InfoWorld"],
"애완동물": [
{
“이름”: “릴리”,
"유형": "너구리"
}
]
}
이 프레임워크에서 우리는 개인의 일부 속성을 명확하게 정의했습니다. 먼저 이름, 성, 시스템 로그인 횟수, 이 사람이 작가인지 여부, 그가 일하는 회사 목록, 애완동물 목록을 확인했습니다. 이 구조 또는 유사한 구조는 서버에서 웹 브라우저 또는 모바일 애플리케이션으로 전송될 수 있으며, 그런 다음 이 데이터를 사용하여 필요한 모든 작업(예: 표시 또는 저장)을 수행할 수 있습니다.
JSON은 문자열, 숫자, 부울(1 또는 0), 목록, 개체 및 null과 같은 최소 개수의 값 유형을 사용하는 일반 데이터 형식입니다. JSON은 JavaScript의 하위 집합이지만 가장 널리 사용되는 프로그래밍 언어에는 이러한 유형의 데이터가 있으므로 JSON은 다른 언어로 작성된 프로그램 간에 데이터를 전달하는 데 적합한 후보입니다.
왜 JSON을 사용해야 할까요?
JSON의 유용성과 중요성을 이해하려면 인터넷 상호작용의 역사를 조금 이해할 필요가 있습니다. 2000년대 초반부터 웹사이트의 상호작용 방식이 변화하기 시작했습니다. 당시 브라우저는 정보를 표시하는 역할만 하고 웹 서버는 표시할 콘텐츠를 준비하는 모든 작업을 수행했습니다. 사용자가 브라우저에서 버튼을 클릭하면 요청이 서버로 전송되고, 여기서 HTML 페이지가 구성되어 표시될 준비가 됩니다. 이 메커니즘은 느리고 비효율적이었습니다. 이를 위해서는 데이터의 작은 부분이 변경된 경우에도 브라우저가 페이지의 모든 내용을 다시 렌더링해야 했습니다.
당시에는 전송된 데이터 양에 따라 전송 비용이 청구되었으므로 개발자는 전체 페이지를 다시 로드하는 데 비용이 매우 많이 든다는 것을 깨닫고 사용자 인터페이스를 개선하기 위한 새로운 기술을 고려했습니다. 그런 다음 Internet Explorer 5에 추가된 백그라운드에서 웹 요청을 수행하는 기능은 표시할 데이터를 점진적으로 로드하는 데 상당히 실행 가능한 접근 방식임이 밝혀졌습니다. 페이지를 다시 로드하는 대신 버튼을 클릭하면 백그라운드에서 실행되는 웹 요청이 실행됩니다. 콘텐츠가 로드되는 즉시 업데이트됩니다. 브라우저용 범용 프로그래밍 언어인 JavaScript를 사용하여 제어할 수 있습니다.
처음에는 XML 형식으로 데이터를 전송했지만, 자바스크립트에서는 사용하기 어려웠습니다. JavaScript에는 이미 언어로 데이터를 나타내는 데 사용되는 개체가 있으므로 Douglas Crockford는 JS 개체 구문을 가져와 JSON이라는 새로운 데이터 교환 형식에 대한 사양으로 사용했습니다. 이 형식은 JavaScript 브라우저에서 읽고 구문 분석하기가 훨씬 쉬웠습니다. 곧 개발자들은 XML 대신 JSON을 사용하기 시작했습니다.
오늘날 빠른 JSON 데이터 교환은 서버와 클라이언트, 모바일 애플리케이션, 심지어 내부 시스템 서비스 간 데이터 전송을 위한 사실상의 표준입니다.
JSON 대 XML
위에서 말했듯이 JSON의 주요 대안은 XML이었습니다. 그러나 XML은 새로운 시스템에서 덜 일반적입니다. 그리고 그 이유를 이해하는 것은 매우 쉽습니다. 다음은 XML을 통해 Json에서 위에서 본 데이터를 작성하는 예입니다.
데이터를 작성하는 데 기본적으로 두 배의 공간을 차지하는 코드 중복성 외에도 XML은 데이터 구조를 분석할 때 약간의 모호함을 가져옵니다. XML을 JavaScript 개체로 변환하는 데는 수십 줄에서 수백 줄의 코드가 필요할 수 있으며 구문 분석되는 각 개체에 대한 미세 조정이 필요합니다. JSON을 JavaScript 개체로 변환하는 작업은 한 줄로 수행되며 구문 분석되는 개체에 대한 사전 지식이 필요하지 않습니다.
JSON 제한 사항
JSON은 많은 프로그래밍 언어에서 작업하기 쉬운 비교적 압축되고 유연한 데이터 형식이지만 몇 가지 단점이 있습니다. 다음은 몇 가지 제한 사항입니다.
- 구조가 없습니다.한편으로 이는 원하는 방식으로 데이터를 표시할 수 있는 완전한 유연성을 가지고 있음을 의미합니다. 반면에 구조화되지 않은 데이터를 쉽게 저장할 수 있습니다.
- 한 가지 유형의 숫자만 있습니다. IEEE-754 부동 소수점 및 배정밀도 형식이 지원됩니다. 그 수는 꽤 많지만 다른 언어가 가지고 있는 다양한 숫자 유형을 사용할 수는 없습니다.
- 날짜 유형이 없습니다.개발자는 날짜의 문자열 표현을 사용해야 하며, 이로 인해 형식 불일치가 발생할 수 있습니다. 또는 Unix 시대의 시작(1970년 1월 1일) 이후 경과된 밀리초 수를 날짜로 사용합니다.
- 아직 댓글이 없습니다- 코드에서 직접 필요한 필드에 주석을 달 수 없습니다.
- 세부 사항- JSON은 XML보다 덜 장황하지만 가장 압축된 데이터 교환 형식은 아닙니다. 고급 서비스 또는 전문 서비스의 경우 보다 효율적인 형식을 사용하는 것이 좋습니다.
언제 JSON을 사용해야 합니까?
브라우저 또는 기본 모바일 애플리케이션과 상호 작용하는 소프트웨어를 개발하는 경우 JSON을 사용하는 것이 더 좋습니다. XML 사용은 더 이상 사용되지 않습니다. 서버 간 통신의 경우 JSON은 그다지 효율적이지 않을 수 있으므로 Apache Avro 또는 Apache Thrift와 유사한 직렬화 프레임워크를 사용하는 것이 더 좋습니다. 여기에서도 JSON은 나쁜 선택이 아니며 필요한 모든 것을 제공할 수 있습니다. 하지만 무엇을 선택해야 할지 정확한 답은 없습니다.
MySQL 데이터베이스를 사용하는 경우, 프로그램은 데이터베이스에서 수행되는 작업에 크게 의존하게 됩니다. JSON을 지원하는 관계형 데이터베이스에서는 JSON을 최대한 적게 사용하는 것이 좋습니다. 관계형 데이터베이스는 특정 스키마를 사용하는 데이터용으로 설계되었습니다. 현재 대부분은 JSON 데이터 형식을 지원하지만 이를 사용한 작업 성능은 크게 저하됩니다.
결론
JSON은 주로 웹 서버와 브라우저 또는 모바일 애플리케이션 간에 데이터를 전송하는 것을 목표로 하는 데이터 형식입니다. 형식은 단순한 디자인과 유연성을 갖고 있어 읽고 이해하기 쉽고 대부분의 프로그래밍 언어에서 이러한 데이터를 사용하기 쉽습니다. 엄격한 스키마가 없기 때문에 형식에 유연성이 있지만 이러한 유연성으로 인해 때로는 데이터를 읽고 이해하기 어려울 수 있습니다.
Scala나 Elm과 같은 강력한 형식의 언어에서는 JSON을 사용하여 작업하는 데 어려움을 겪을 수 있지만 형식이 널리 채택된다는 것은 복잡한 문제에도 도움이 되는 유틸리티와 라이브러리가 있다는 것을 의미합니다. 이제 json이 무엇인지, 어떻게 사용하는지 알았습니다.
JSON(JavaScript Object Notation)은 데이터 전송 형식입니다. 이름에서 알 수 있듯이 형식은 JavaScript 프로그래밍 언어를 기반으로 하지만 다른 언어(Python, Ruby, PHP, Java)로도 사용할 수 있습니다.
JSON은 .json 확장자를 사용합니다. 다른 파일 형식(예: .html)에서 사용되는 경우 JSON 문자열이 인용되거나 변수에 할당됩니다. 이 형식은 웹 서버와 클라이언트 또는 브라우저 간에 쉽게 전송됩니다.
가볍고 이해하기 쉬운 JSON은 XML의 훌륭한 대안입니다.
이 튜토리얼에서는 JSON의 이점, 개체, 일반 구조 및 구문을 소개합니다.
JSON 구문 및 구조
JSON 객체는 키-값 형식이며 일반적으로 중괄호로 작성됩니다. JSON으로 작업할 때 모든 개체는 .json 파일에 저장되지만 프로그램 컨텍스트에서 별도의 개체로 존재할 수도 있습니다.
JSON 개체는 다음과 같습니다.
"first_name": "존",
"성": "스미스",
"위치": "런던",
"온라인": 사실,
"팔로워": 987
이것은 매우 간단한 예입니다. JSON 객체에는 여러 줄이 포함될 수 있습니다.
보시다시피 객체는 중괄호로 묶인 키-값 쌍으로 구성됩니다. JSON의 대부분의 데이터는 객체로 기록됩니다.
키와 값 사이에 콜론이 배치됩니다. 각 쌍 뒤에는 쉼표를 넣어야 합니다. 결과는 다음과 같습니다.
"키" : "값", "키" : "값", "키" : "값"
JSON 키는 왼쪽에 있습니다. 키는 큰따옴표로 묶어야 합니다. 유효한 문자열은 모두 키로 사용할 수 있습니다. 하나의 객체 내에서 모든 키는 고유해야 합니다. 키에는 공백("이름")이 포함될 수 있지만 프로그래밍에서는 이러한 키에 액세스하는 데 문제가 있을 수 있습니다. 따라서 공백 대신 밑줄(“first_name”)을 사용하는 것이 좋습니다.
JSON 값은 열 오른쪽에 있습니다. 모든 단순 데이터 유형을 값으로 사용할 수 있습니다.
- 문자열
- 숫자
- 사물
- 배열
- 부울 데이터(true 또는 false)
값은 복잡한 데이터 유형(예: 개체 또는 JSON 배열)으로 표시될 수도 있습니다.
JSON은 위에 나열된 각 데이터 유형에 대해 개별 구문을 지원합니다. 값이 문자열로 표시되면 인용되지만 숫자이면 인용되지 않습니다.
일반적으로 .json 파일의 데이터는 열에 기록되지만 JSON은 행에 기록될 수도 있습니다.
( "first_name" : "John", "last_name" : "Smith", "online" : true, )
이는 JSON 데이터가 일반적으로 다른 파일 형식에 기록되는 방식입니다.
JSON 데이터를 열에 기록하면 파일의 가독성이 향상됩니다(특히 파일에 데이터가 많은 경우). JSON은 열 사이의 공백을 무시하므로 이를 사용하여 데이터를 관리 가능한 수의 열로 나눌 수 있습니다.
"first_name": "존",
"성": "스미스",
"온라인": 사실
JSON 개체는 JavaScript 개체와 매우 유사하지만 형식이 동일하지는 않습니다. 예를 들어 JavaScript에서는 함수를 사용할 수 있지만 JSON에서는 사용할 수 없습니다.
JSON의 가장 큰 장점은 이 형식의 데이터가 널리 사용되는 많은 프로그래밍 언어에서 지원되므로 빠르게 전송할 수 있다는 것입니다.
이제 기본 JSON 구문에 익숙해졌습니다. 그러나 JSON 파일은 중첩된 배열과 객체를 포함하는 복잡한 계층 구조를 가질 수 있습니다.
JSON의 복합 유형
JSON은 중첩된 개체와 배열을 저장할 수 있으며, 이는 할당된 키 값으로 전달됩니다.
중첩된 객체
아래에는 사용자 데이터가 포함된 users.json 파일의 예가 나와 있습니다. 각 사용자에 대해
(“john”, “jesse”, “drew”, “jamie”) 중첩된 객체는 값으로 전달되며, 이 값 역시 키와 값으로 구성됩니다.
메모: 첫 번째 중첩된 JSON 개체는 빨간색으로 강조 표시됩니다.
"존" :(
"사용자 이름": "존",
"위치": "런던",
"온라인": 사실,
"팔로워": 987
"제시" :(
"사용자 이름": "제시",
"위치": "워싱턴",
"온라인": 거짓,
"팔로어": 432
"그려" :(
"사용자 이름": "드류",
"위치": "파리",
"온라인": 거짓,
"팔로어": 321
"제이미" :(
"사용자 이름": "제이미",
"위치": "베를린",
"온라인": 사실,
"팔로어": 654
중괄호는 중첩된 개체와 기본 개체 모두에 사용됩니다. 중첩된 개체의 쉼표는 일반 개체와 동일한 방식으로 사용됩니다.
중첩 배열
데이터는 값으로 전달되는 JavaScript 배열을 사용하여 JSON에 중첩될 수 있습니다. JavaScript는 배열의 시작과 끝 부분에 대괄호()를 사용합니다. 배열은 다양한 유형의 데이터를 포함할 수 있는 정렬된 데이터 모음입니다.
배열은 그룹화할 수 있는 대량의 데이터를 전송하는 데 사용됩니다. 예를 들어 사용자 데이터를 기록해 보겠습니다.
{
"first_name": "존",
"성": "스미스",
"위치": "런던",
"웹사이트": [
"설명": "일",
"URL": "https://www.johnsmithsite.com/"
},
{
"desciption": "튜토리얼",
"URL": "https://www.johnsmithsite.com/tutorials"
"소셜 미디어" : [
"설명": "트위터",
"링크": "https://twitter.com/johnsmith"
"설명": "페이스북",
"링크": "https://www.facebook.com/johnsmith"
"설명": "github",
"링크": "https://github.com/johnsmith"
"websites" 및 "social_media" 키에는 대괄호 안에 배치된 값으로 배열이 할당됩니다.
중첩된 배열과 객체를 사용하면 복잡한 데이터 계층 구조를 만들 수 있습니다.
JSON 또는 XML?
XML(eXtensible Markup Language)을 사용하면 인간과 기계가 이해하기 쉬운 형식으로 데이터를 저장할 수 있습니다. XML 형식은 수많은 프로그래밍 언어에서 지원됩니다.
XML과 JSON은 공통점이 많습니다. 그러나 XML에는 훨씬 더 많은 텍스트가 필요하므로 이러한 파일은 더 크고 읽고 쓰기가 더 어렵습니다. 또한 XML은 XML 인터프리터를 통해서만 처리되는 반면, JSON은 간단한 함수를 사용하여 처리할 수 있습니다. JSON과 달리 XML은 배열을 저장할 수 없습니다.
두 파일을 비교해 보겠습니다. 두 파일에는 동일한 데이터가 포함되어 있지만 첫 번째 파일은 XML 형식으로 작성되고 두 번째 파일은 JSON으로 작성되었습니다.
사용자.xml
사용자.json
("사용자": [
("사용자 이름" : "John", "위치" : "런던"),
("사용자 이름" : "제시", "위치" : "워싱턴"),
("사용자 이름" : "Drew", "위치" : "파리"),
("사용자 이름": "JamieMantisShrimp", "위치": "베를린")
JSON은 매우 컴팩트한 형식이며 XML만큼 많은 태그가 필요하지 않습니다. 또한 XML은 JSON과 달리 배열을 지원하지 않습니다.
HTML에 익숙하다면 XML 형식(특히 태그)이 HTML과 매우 유사하다는 것을 알 수 있을 것입니다. 예를 들어 JSON은 더 간단하고 텍스트가 덜 필요하며 AJAX 애플리케이션에서 사용하기가 더 쉽습니다.
물론 형식은 응용 프로그램의 필요에 따라 선택해야 합니다.
JSON용 도구
JSON은 JavaScript에서 일반적으로 사용되지만 형식은 다른 프로그래밍 언어에서도 널리 사용됩니다.
JSON 호환성 및 처리에 대한 자세한 내용은 프로젝트 웹사이트 및 jQuery 라이브러리에서 확인할 수 있습니다.
JSON을 처음부터 작성하는 경우는 거의 없습니다. 일반적으로 데이터는 소스에서 로드되거나 JSON으로 변환됩니다. 오픈 소스 도구 Mr.를 사용하여 CSV 또는 탭으로 구분된 데이터를 JSON으로 변환할 수 있습니다. 데이터 변환기. XML을 JSON으로 또는 그 반대로 변환하려면 utilities-online.info를 사용하세요. 자동 도구로 작업할 때는 반드시 결과를 확인하세요.
JSONLint 서비스를 사용하여 JSON 파일(변환된 데이터 포함)을 검사할 수 있습니다. 웹 개발 컨텍스트에서 JSON을 테스트하려면 JSFiddle을 참조하세요.
결론
JSON은 간단하고 가벼운 데이터 형식입니다. JSON 파일은 전송, 저장, 사용이 쉽습니다.
오늘날 JSON은 API에서 자주 사용됩니다.
JSON은 데이터를 기록하기 위한 텍스트 형식입니다.이를 통해 단일 숫자나 문자열 및 복잡한 구조(예: 데이터가 있는 배열)를 텍스트 형식으로 표현할 수 있습니다. 이 기록 형식을 사용하면 읽기 쉽고 직관적이며 동시에 매우 복잡한 데이터 구조를 저장할 수 있으므로 편리합니다. 게다가 xml보다 콤팩트하기 때문에 웹 브라우저와 서버 간 데이터 교환에는 더 바람직하다고 생각합니다.
예제가 포함된 JSON 구문
json 형식은 일반적으로 두 가지 변형으로 작성됩니다.
1. 값의 순서. 예를 들어 JSON 형식의 시퀀스 10, 15 및 "test"는 다음과 같습니다.
2. 쌍으로 녹음하기 핵심 가치 . 예를 들어:
(“성명”: “Ivanov Sergey”, “생년월일”: “1975년 3월 9일”)
약간 더 복잡한 예:
("전체 이름": "Ivanov Sergey", "주소": ("도시": "모스크바", "거리": "Pyatnitskaya", "집": "35") )
JSON 형식 작업을 위한 PHP 함수
버전 5.2부터 PHP 언어로. 4가지 기능만 있습니다:
- json_decode- JSON 문자열 디코딩(json 형식 문자열에서 데이터 가져오기)
- json_encode- 데이터의 JSON 표현을 반환합니다(데이터를 JSON 문자열로 변환).
- json_last_error_msg- json_encode() 또는 json_decode()에 대한 마지막 호출의 오류 메시지를 나타내는 문자열을 반환합니다.
- json_last_error- 마지막 오류를 반환합니다.
기본적으로 대부분의 경우 두 가지 기능만 사용됩니다. json_encode그리고 json_decode. 구문에 대해 자세히 설명하지 않겠습니다. 자세한 내용은 php.net을 참조하세요. 사용 예:
$arr1 = 배열(0,1,2); $json_str = json_encode($arr1); 에코 $json_str; // json 문자열을 출력합니다: $arr2 = json_decode($json_str); 에코 $arr2; // 출력됩니다: 1
메모 : 에 러시아어로 JSON 데이터 형식으로 인코딩, json_encode 함수는 러시아어 문자를 다음으로 변환합니다. 유니코드, 즉. 그것들을 다음으로 대체합니다. \uXXXX따라서 json 문자열은 사람이 읽을 수 없게 됩니다(그러나 브라우저에서는 이해할 수 있습니다). 유니코드로의 변환을 방지하려면(예: 코드 디버깅 시) JSON_UNESCAPED_UNICODE 옵션을 사용하면 됩니다.
또한 인코딩 중에 이스케이프 슬래시가 추가되지 않도록 하고 숫자가 포함된 문자열이 숫자로 인코딩되도록 JSON_UNESCAPED_SLASHES 및 JSON_NUMERIC_CHECK를 사용할 수 있습니다. 결과적으로 json 문자열을 사람이 읽을 수 있도록 만들기 위해 예를 들어 다음과 같이 합니다.
$arr = array("fio" => "이바노프 세르게이", "age" => "32", "vk_url" => "https://vk.com/id11111"); echo json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);
이 옵션을 사용하지 않으면 줄은 다음과 같습니다.
( "fio" : "\u0418\u0432\u0430\u043d\u043e\u0432 \u0421\u0435\u0440\u0433\u0435\u0439", "age" : "32", "vk_url": "https:\/\ /vk.com\/id11111" )
옵션을 사용하면 읽을 수 있는 줄을 얻을 수 있습니다.
( "fio" : "Ivanov Sergey", "age" : 32, "vk_url" : "https://vk.com/id11111" )
한 가지 더: json 문자열을 디코딩하는 함수가 필요한 경우 json_decode가 정확히 배열을 반환했습니다., true와 동일한 두 번째 매개변수를 함수에 추가하기만 하면 됩니다.
$json_str = "( "a":1, "b":2, "c":3 )"; $obj = json_decode($json_str); // 객체를 얻습니다. echo $obj->a; // 1을 출력합니다. $arr = json_decode($json_str, true); // 연관 배열을 얻습니다. echo $arr["a"]; // 1을 인쇄합니다.
이것으로 PHP 함수에 대한 리뷰를 마칩니다.
JSON 형식 작업을 위한 JavaScript 함수
JSON 형식은 원래 JavaScript 언어용으로 개발된 후 단순히 다른 언어에서 사용되는 별도의 텍스트 형식이 되었다는 사실부터 시작하겠습니다. 분명히 이것이 JSON 구문이 일반 개체 및 배열을 작성하는 구문과 매우 유사한 이유입니다.
// JavaScript 배열의 예 arr = ; 경고(arr); // 1을 표시합니다 // JavaScript의 객체 예 obj = ( "name": "Vasya", "age": 35, "isAdmin": false ) Alert(obj.name); // "Vasya"를 인쇄합니다.
JSON 형식 간 변환에 사용되는 JavaScript 함수:
- JSON.parse- JSON 문자열 디코딩(문자열을 객체 및/또는 배열로 변환)
- JSON.stringify- 데이터의 JSON 표현을 반환합니다(객체 및/또는 배열을 json 문자열로 변환).
JSON 문자열을 숫자가 있는 배열로 디코딩하는 간단한 예:
Str = ""; arr = JSON.parse(str); 경고(arr); // 1을 인쇄합니다.
객체를 JSON 문자열로 변환(직렬화)하는 예:
Obj = ( "이름": "Vasya", "age": 35, "isAdmin": false ) Alert(JSON.stringify(obj)); // 표시됩니다 ("name":"Vasya","age":35,"isAdmin":false)
객체를 JSON 문자열로 직렬화(변환)할 때 메서드가 호출됩니다. toJSON이 객체(존재하는 경우) 메소드가 없으면 객체의 모든 속성이 나열됩니다. toJSON 메소드를 사용하여 객체를 변환하는 예:
Obj = ( "name": "Vasya", "age": 35, "isAdmin": false, toJSON: function() ( return this.age; ) ) Alert(JSON.stringify(obj)); // 35를 인쇄합니다.
JSON 형식의 실제 적용 사례
실제로 저는 개인적으로 두 가지 주요 상황에서 JSON 형식을 사용합니다.
1. Ajax 요청을 사용하여 브라우저와 서버 간에 데이터를 전송합니다.
예를 들어, 페이지를 다시 로드하지 않고 데이터를 업데이트해야 하는 일부 페이지가 있습니다. 서버에서 "다운로드"하기 위해 직원 목록과 해당 데이터가 포함된 정보가 필요하다고 가정해 보겠습니다.
JavaScript에서는 jQuery를 사용하여 이를 간단하게 만들고 브라우저에 테이블 형식으로 데이터를 표시합니다.
$.getJSON("get-info.php").success(function(data) ( // ajax 요청, 서버의 데이터는 데이터 변수 htmlstr = "에 기록됩니다.
| " + 데이터[i].생일 + " | "; // 두 번째 열 - 생년월일 htmlstr += ""; ) htmlstr = "
서버에서 ajax 요청이 이루어지는 get-info.php 스크립트는 예를 들어 다음과 같을 수 있습니다.
$user_info = 배열(); // 데이터가 포함된 배열 생성 $user_info = array ("fio" => "Ivanov Sergey", "birthday" => "03/09/1975"); $user_info = array ("fio" => "알렉세이 페트로프", "생일" => "1983년 9월 18일"); echo json_encode($user_info); 출구;
이 예에서 서버에서 브라우저로 전달된 JSON 문자열은 다음과 같습니다.
[("fio":"세르게이 이바노프","생일":"1975년 3월 9일"),("fio":"알렉세이 페트로프","생일":"1983년 9월 18일")]
의도적으로 "나무" 형태로 선을 표시하지 않았습니다. 정확히 이런 형태로 전송됩니다. 그리고 어떻게 평가할 수 있나요? JSON 형식으로 데이터를 기록하면 매우 컴팩트한 것으로 나타났습니다., 이는 이 데이터가 서버에서 브라우저로 거의 즉각적으로 전송된다는 것을 의미합니다.
2. 데이터베이스에 복잡한 데이터 구조를 작성합니다.
때로는 다양한 데이터를 저장하기 위해 데이터베이스에 다른 테이블을 생성하는 것이 바람직하지 않은 상황이 있습니다. 사이트에 등록된 사용자가 배경색과 텍스트 색상을 사용자 정의할 수 있는 기회가 있다고 가정해 보겠습니다.
2가지 설정에 대한 또 다른 테이블을 생성하는 대신 사용자 설정 데이터를 배치할 사용자 목록이 포함된 테이블에 텍스트 열을 생성하기만 하면 됩니다. 그러면 설정 업데이트 요청은 예를 들어 다음과 같을 수 있습니다.
UPDATE 사용자 SET 설정 = "("배경색":"#FFFFFF", "text-color":"#000000")" WHERE user_id = 10
앞으로는 테이블에서 얻은 것입니다. 사용자정보가 있는 경우, PHP 스크립트는 설정을 통해 해당 정보를 배열로 쉽게 되돌릴 수 있습니다. 예를 들어 $user_info 변수에 사용자 테이블에서 사용자에 대해 얻은 데이터가 포함되어 있는 경우 설정이 포함된 배열을 가져오는 것은 매우 간단합니다.
$settings = json_decode($user_info["settings"], true); echo "배경색 = ".$settings["Background-color"]; echo "텍스트 색상 = ".$settings["text-color"];
예를 들어 JSON 형식에서는 구매자가 선택한 제품 옵션을 데이터베이스에 기록할 수도 있습니다.
("15":["45","47"], "18":"52") // 옵션 15에는 값 45와 47이 선택되고 옵션 18에는 값 52가 선택됩니다.
원칙적으로 다음과 같이 장바구니의 전체 내용을 JSON 형식으로 작성할 수도 있습니다.
( "user_id" : 10, "session_id" : "2c2l3h4ii271aojentejtdcmh3", "products": [ ( "product_id" : 15, "options" : ( "15" : , "18" : 52), "수량" : 1, "가격" : 1500 ), ( "제품_ID" : 16, "옵션" : ( "15" : , "18" : 51 ), "수량" : 2, "가격" : 1000 ) ] )
일반적인 트리가 아닌 형식에서 이 JSON 문자열은 다음과 같습니다.
("user_id":10,"session_id":"2c2l3h4ii271aojentejtdcmh3","제품":[("product_id":15,"옵션":("15":,"18":52),,"수량":1 , "가격":1500),("제품_ID":16,"옵션":("15":,"18":51),,"수량":2,"가격":1000)])
따라서 예제에서 볼 수 있듯이 거의 모든 정보를 JSON 형식으로 저장하고 전송할 수 있습니다.
JSON(JavaScript Object Notation)은 JavaScript 개체 구문을 기반으로 구조화된 데이터를 표시하기 위한 표준 텍스트 형식입니다. 일반적으로 웹 애플리케이션의 데이터 전송에 사용됩니다(예: 웹 페이지에 표시할 수 있도록 서버에서 클라이언트로 일부 데이터를 전송하거나 그 반대로 전송). 이런 문제를 자주 접하게 될 것이므로 이 문서에서는 JSON 구문 분석을 포함하여 JavaScript를 사용하여 JSON 작업에 필요한 모든 것을 제공하므로 내부 데이터에 액세스하고 JSON을 생성할 수 있습니다.
아니, 정말 JSON이 뭐죠?
우리는 이를 페이지에 로드하고 다음과 같이 깔끔한 DOM 조작을 사용하여 렌더링할 것입니다.
JSON 수신
JSON을 수신하기 위해 우리는 XMLHttpRequest(종종 호출됨)라는 API를 사용합니다. XHR). 이는 JavaScript를 통해 서버에서 리소스(예: 이미지, 텍스트, JSON, 심지어 HTML 스니펫까지)를 검색하도록 네트워크 요청을 할 수 있는 매우 유용한 JavaScript 개체입니다. 즉, 전체 페이지를 다시 로드하지 않고도 콘텐츠의 작은 섹션을 업데이트할 수 있습니다. . 이로 인해 웹 페이지의 반응성이 향상되었으며 듣기에도 흥미로웠지만 안타깝게도 이에 대해 훨씬 더 자세히 설명하는 것은 이 기사의 범위를 벗어납니다.
- 우리가 받고 싶은 JSON URL을 변수에 저장할 것이라는 사실부터 시작해 보겠습니다. 다음 JavaScript 코드를 추가합니다. var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
- 요청을 생성하려면 new 키워드를 사용하여 XMLHttpRequest 생성자에서 새 요청 객체 인스턴스를 생성해야 합니다. 마지막 줄에 다음을 추가하세요: var request = new XMLHttpRequest();
- 이제 . 다음 줄을 추가하세요: request.open("GET", requestURL);
여기에는 최소한 두 개의 매개변수가 필요합니다. 사용 가능한 다른 매개변수도 있습니다. 이 간단한 예에는 두 가지만 필요합니다.
- 네트워크 요청을 할 때 사용할 HTTP 메서드입니다. 이 경우는 간단한 데이터를 검색하는 것이므로 괜찮습니다.
- 요청의 URL은 앞서 저장한 JSON 파일의 URL입니다.
- 그런 다음 다음 두 줄을 추가합니다. 여기서는 서버가 JSON을 반환하고 이것이 뒤에서 JavaScript 개체로 변환되어야 함을 XHR이 알 수 있도록 JSON으로 설정합니다. 그런 다음 request.responseType = "json"; 메소드를 사용하여 요청을 보냅니다. request.send();
- 이 섹션의 마지막 부분에는 서버의 반환 응답을 기다린 다음 이를 처리하는 작업이 포함됩니다. 이전 코드 아래에 다음 코드를 추가합니다. request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )
여기서는 요청에 대한 응답(속성에서 사용 가능)을 superHeroes 변수에 저장합니다. 이제 이 변수에는 JSON 기반 JavaScript 개체가 포함됩니다! 그런 다음 이 객체를 두 개의 함수 호출에 전달합니다. 첫 번째 호출이 채워집니다.
요청 객체에서 로드 이벤트가 실행될 때 실행되는 이벤트 핸들러에 코드를 래핑했습니다(참조). 이는 응답이 성공적으로 반환될 때 로드 이벤트가 실행되기 때문입니다. 이렇게 하면 우리가 뭔가를 시도할 때 request.response를 확실히 사용할 수 있게 됩니다.
헤더 채우기
이제 JSON 데이터를 추출하여 JavaScript 개체로 변환했습니다. 위에 연결한 두 함수를 작성하여 활용해 보겠습니다. 먼저 이전 코드 아래에 다음 함수 정의를 추가합니다.
함수 populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "고향: " + jsonObj["homeTown"] + " // 형성됨: " + jsonObj["formed"] header.appendChild(myPara);
이 JavaScript 객체가 JSON에서 유래했음을 상기시키기 위해 매개변수 이름을 jsonObj로 지정했습니다. 여기서는 먼저 요소를 생성합니다.
with 를 사용하여 개체의 squadName 속성과 동일하게 설정한 다음 with 헤더에 추가합니다. 그런 다음 단락에 대해 매우 유사한 작업을 수행합니다. 단락을 만들고, 텍스트 내용을 설정하고, 제목에 추가합니다. 유일한 차이점은 해당 텍스트가 객체의 homeTown 및 형성된 속성을 모두 포함하는 연결된 문자열로 지정된다는 것입니다.
영웅 정보 카드 만들기
그런 다음 슈퍼히어로 카드를 생성하고 표시하는 코드 하단에 다음 함수를 추가합니다.
함수 showHeroes(jsonObj) ( var Heroes = jsonObj["members"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }
먼저 JavaScript 개체의 멤버 속성을 새 변수에 저장해 보겠습니다. 이 배열에는 각 영웅에 대한 정보가 포함된 여러 개체가 포함되어 있습니다.
그런 다음 배열의 각 개체를 반복하는 데 사용합니다. 그들 각각에 대해 우리는:
- 몇 가지 새로운 요소를 만들어 보겠습니다.
, - 설치 중
현재 영웅의 이름을 포함합니다.
- secretIdentity , age , 그리고 "Superpowers:"라는 줄로 세 문단을 작성하여 목록에 정보를 입력하세요.
- 우리는 superPowers라는 또 다른 새로운 변수에 powers 속성을 저장합니다. 여기에는 현재 영웅의 초능력을 나열하는 배열이 포함됩니다.
- 현재 영웅의 초능력을 순환하기 위해 또 다른 for 루프를 사용합니다. 각각에 대해 요소를 생성합니다.
- , 그 안에 초능력을 넣은 다음 listItem을 요소 안에 넣습니다.
- (myList)는appendChild()를 사용합니다.
- 마지막으로 할 일은 추가입니다.
,
그리고
- 내부에
(myArticle)을 추가한 다음 V . 항목이 추가되는 순서는 HTML 내에 표시되는 순서이므로 중요합니다.
메모. JavaScript 개체에 액세스하는 데 사용하는 점/괄호 표기법을 따르는 데 문제가 있는 경우 다른 탭이나 텍스트 편집기에서 슈퍼 히어로.json 파일을 열고 JavaScript를 볼 때 이를 참조하는 것이 도움이 될 수 있습니다. 점 및 괄호 표기법에 대한 자세한 내용은 당사 기사를 참조하세요.
개체와 텍스트 간 변환
위의 예에서는 .
