> 웹 프론트엔드 > JS 튜토리얼 > JSON에 대한 간단한 이해

JSON에 대한 간단한 이해

怪我咯
풀어 주다: 2017-04-01 09:47:06
원래의
1661명이 탐색했습니다.

Json은 js객체입니다.
------
간단히 말하면 JSON은 JavaScript 개체에 표시된 데이터 세트를 문자열으로 변환한 다음 함수 간에 이 문자열을 쉽게 전달하거나 웹 클라이언트에서 비동기 애플리케이션의 서버측 프로그램으로 문자열을 전달합니다. 이 문자열은 약간 이상해 보이지만(나중에 몇 가지 예를 볼 것임) JavaScript는 이를 쉽게 해석하며 JSON은 이름/값 쌍보다 더 복잡한 구조를 나타낼 수 있습니다. 예를 들어, 단순한 키와 값 목록이 아닌 배열과 복잡한 객체를 표현하는 것이 가능합니다. 간단한 JSON 예
가장 간단한 형태의 다음 JSON을 사용하여 이름/값 쌍을 나타낼 수 있습니다.

{ "firstName": "Brett" }

이 예 매우 기본적이며 실제로 동등한 일반 텍스트 이름/값 쌍보다 더 많은 공간을 차지합니다.
firstName=Brett

그러나 여러 이름/값 쌍을 함께 문자열로 묶으면 JSON이 해당 값을 반영합니다. 먼저 다음과 같은 여러 이름/값 쌍을 포함하는 레코드를 생성할 수 있습니다.

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com " }

구문 측면에서는 이름/값 쌍에 비해 큰 이점은 아니지만 이 경우 JSON이 사용하기 쉽고 읽기 쉽습니다. 예를 들어, 위의 세 값이 동일한 레코드의 일부임을 분명히 합니다. 중괄호는 값을 어떻게든 연관시킵니다.
값 배열 ​​
값 집합을 표현해야 할 때 JSON은 가독성을 높일 뿐만 아니라 복잡성도 줄일 수 있습니다. 예를 들어, 사람 이름 목록을 표현한다고 가정해 보겠습니다.
XML에서는 여러 개의 여는 태그와 닫는 태그가 필요합니다. 일반적인 이름/값 쌍(이 시리즈의 이전 기사에서 본 것과 같은)을 사용하는 경우 고유한 데이터 형식을 만들어야 합니다. 또는 키 이름을 person1-firstName과 같은 이름으로 수정하세요. JSON을 사용하는 경우 중괄호를 사용하여
여러 레코드를 그룹화하세요.
{ "people": [

{ "firstName" : "Brett", " lastName":"McLaughlin", "email": "brett@newInstance.com" },

{ "firstName": "Jason", "lastName":"Hunter", " email": "jason@ servlets.com" },

{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

]}

이해하기 어렵지 않습니다. 이 예에는 people이라는 이름의
변수가 하나만 있고 값은 세 개의 항목을 포함하는 배열입니다. 각 항목은 이름, 성, 이메일 주소를 포함하는 개인에 대한 레코드입니다. 위의 예에서는 괄호를 사용하여 레코드를 단일 값으로 결합하는 방법을 보여줍니다. 물론, 여러 값(각각 여러 레코드를 포함)은 동일한 구문을 사용하여 표현할 수 있습니다:
{ "programmers": [

{ "firstName": "Brett", "lastName " ":"McLaughlin", "email": "brett@newInstance.com" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@ servlets .com" },

{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

],

"authors": [

{ "firstName": "Isaac", "lastName": "Asimov", "genre": "SF" },

{ " firstName": "태드", "lastName": "Williams", "genre": "fantasy" },

{ "firstName": "Frank", "lastName": "Peretti", "genre " : "기독교 소설" }

],

"musicians": [

{ "firstName": "Eric", "lastName": "Clapton", " 악기 ": "기타" },

{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

]

}

여기서 가장 주목할만한 점은 여러 값을 나타낼 수 있으며, 각 값은 차례로 여러 값을 포함한다는 것입니다. 그러나 레코드의 실제 이름/값 쌍은 주요 항목(프로그래머, 작성자 및 음악가)마다 다를 수 있다는 점에도 유의해야 합니다. JSON은 완전히 동적이므로 JSON 구조 중간에 데이터가 표현되는 방식을 변경할 수 있습니다.
JSON 형식 데이터로 작업할 때 준수해야 하는 사전 정의된 제약 조건은 없습니다. 따라서 동일한 데이터 구조 내에서 데이터가 표현되는 방식이 바뀔 수 있으며, 동일한 내용이 다른 방식으로 표현될 수도 있습니다.
JavaScript에서 JSON 사용
JSON 형식을 익히면 JavaScript에서 사용하는 것이 간단합니다. JSON은 기본 JavaScript 형식입니다. 즉, JavaScript에서 JSON 데이터를 처리하기 위해 특별한 API나 툴킷이 필요하지 않습니다.
JSON 데이터를 변수에 할당
예를 들어 새 JavaScript 변수를 생성하고 여기에 JSON 형식 데이터 문자열을 직접 할당할 수 있습니다.
var people =

{ "programmers ": [

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

{ "firstName": "Jason ", "lastName":"Hunter", "email": "jason@servlets.com" },

{ "firstName": "Elliotte", "lastName":"Harold", "email ": "elharo@macfaq.com" }

],

"authors": [

{ "firstName": "Isaac", "lastName": "Asimov ", "genre": "SF" },

{ "firstName": "태드", "lastName": "Williams", "genre": "판타지" },

{ " firstName": "Frank", "lastName": "Peretti", "genre": "기독교 소설" }

],

"musicians": [

{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument ": "piano" }

]

}
이것은 매우 간단합니다. 이제 사람들은 앞서 본 JSON 형식의 데이터를 포함합니다. 그러나 데이터에 접근하는 방법이 아직 명확하지 않아 이것만으로는 충분하지 않습니다.
데이터 액세스
자명해 보이지 않을 수도 있지만 위의 긴 문자열은 실제로 단순한 배열입니다. 이 배열을 JavaScript 변수에 배치하면 쉽게 액세스할 수 있습니다. 실제로 배열 요소를 나타내려면 점 표기법을 사용하면 됩니다. 따라서 프로그래머 목록에 있는 첫 번째 항목의성에 액세스하려면 JavaScript에서 다음 코드를 사용하면 됩니다.
people.programmers[0].lastName;

배열 인덱스에 유의하세요. 은 0부터 시작합니다. 따라서 이 코드 줄은 먼저 people 변수의 데이터에 액세스한 다음 프로그래머라는 항목으로 이동한 다음 첫 번째 레코드([0])로 이동하고 마지막으로 lastName 키 값에 액세스합니다. 결과는 문자열 값 "McLaughlin"입니다.
다음은 동일한 변수를 사용하는 몇 가지 예입니다.
people.authors[1].genre // 값은 "fantasy"
people.musicians[3].lastName // 정의되지 않음 이는 네 번째 항목을 참조하며
하나도 없습니다
people.programmers.[2].firstName // 값은 "Elliotte"입니다.

이 구문을 사용하면 추가적인 JavaScript 툴킷이나 API를 사용하지 않고도 JSON 형식의 데이터를 처리할 수 있습니다.
JSON 데이터 수정
마침표와 괄호를 사용하여 데이터에 액세스할 수 있는 것처럼 동일한 방식으로 데이터를 쉽게 수정할 수도 있습니다.

people.musicians[1].lastName = "Rachmaninov ";

문자열을 자바스크립트 객체로 변환한 후 변수에 있는 데이터를 이렇게 수정할 수 있습니다.
문자열로 다시 변환
물론 개체를 이 문서에 언급된 텍스트 형식으로 쉽게 다시 변환할 수 없다면 모든 데이터 수정은 별 가치가 없습니다. 이 변환은 JavaScript에서도 간단합니다.
String newJSONtext = people.toJSONString();
끝입니다! 이제 Ajax 애플리케이션의 요청 문자열 등 어디에서나 사용할 수 있는 텍스트 문자열이 생겼습니다.
더 중요한 점은 모든 JavaScript 개체를 JSON 텍스트로 변환할 수 있다는 것입니다. 원래 JSON 문자열로 할당된 변수를 처리하는 것만이 가능한 것은 아닙니다. myObject라는 개체를 변환하려면 동일한 형식의 명령을 실행하면 됩니다.
String myObjectInJSON = myObject.toJSONString();
이것이 JSON과 이 시리즈에서 논의한 다른 데이터 형식 간의 가장 큰 차이점입니다. JSON을 사용하는 경우 간단한 함수만 호출하면 형식화된 데이터를 가져와 사용할 수 있습니다. 다른 데이터 형식의 경우 원시 데이터와 형식화된 데이터 간의 변환이 필요합니다. 자체 데이터 구조를 텍스트로 변환하는 기능을 제공하는 문서 개체 모델과 같은 API를 사용하는 경우에도 기본 JavaScript 개체 및 구문을 사용하는 대신 API를 배우고 API의 개체를 사용해야 합니다.
결론은 많은 수의 JavaScript 개체를 처리하는 경우 요청 시 서버 측 프로그램에 보낼 수 있는 형식으로 데이터를 쉽게 변환할 수 있으므로 JSON이 거의 확실히 좋은 선택이라는 것입니다.

결론

이 시리즈에서는 거의 모든 비동기 애플리케이션이 결국 데이터를 처리하게 되므로 데이터 형식에 대해 논의하는 데 많은 시간을 할애했습니다. 모든 유형의 데이터를 보내고 받는 다양한 도구와 기술을 익히고 각 데이터 유형에 가장 적합한 방식으로 사용한다면 Ajax에 더욱 능숙해질 것입니다. XML과 일반 텍스트를 마스터하는 것 외에도 JSON을 마스터하면 JavaScript에서 더 복잡한 데이터 구조를 처리할 수 있습니다.

이 시리즈의 다음 기사에서는 데이터 전송을 넘어 서버 측 프로그램이 JSON 형식의 데이터를 수신하고 처리하는 방법을 심층적으로 살펴보겠습니다. 또한 서버 측 프로그램이 스크립트와 서버 측 구성 요소 전체에서 JSON 형식으로 데이터를 다시 전송하여 XML, 일반 텍스트, JSON 요청 및 응답을 혼합할 수 있는 방법에 대해 논의합니다. 이는 거의 모든 조합으로 이러한 모든 도구를 사용할 수 있는 많은 유연성을 제공합니다.


위 내용은 JSON에 대한 간단한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿