JavaScript JSON
서버에 Ajax 요청을 할 때 두 가지 방법으로 서버 응답에서 데이터를 검색할 수 있습니다. 하나는 XMLHttpRequest 객체의 responseXML 속성을 사용하여 XML 형식의 데이터에 액세스하는 것입니다. responseText 속성은 문자열 형식의 데이터에 액세스합니다. 현재 XML은 데이터 전송을 위한 표준 언어이지만, XML을 사용하는 경우의 단점 중 하나는 이를 구문 분석하고 페이지에 추가할 데이터를 추출하기 어렵다는 것입니다.
JSON(JavaScript Object Notation)은 JavaScript Object Notation이라고 부르는 경량 데이터 교환 형식입니다. 데이터 전송에 JSON을 사용하는 이점 중 하나는 JSON이 실제로 JavaScript라는 것입니다. ECMAScript 버전 3의 JavaScript 객체 리터럴 구문 하위 집합을 기반으로 하는 텍스트 형식입니다. 즉, responseText를 사용하여 서버에서 JSON 데이터를 검색한 다음 JavaScript의 eval() 메서드를 사용하여 JSON 문자열을 JavaScript 개체로 변환한 다음 추가 JavaScript를 사용하면 처리 없이 개체에서 데이터를 쉽게 추출할 수 있습니다. .
또한 대부분의 프로그래밍 언어(C++, C#, ColdFusion, Java, Perl, PHP 및 Python 포함)에 대한 JSON 라이브러리가 있습니다. 이러한 라이브러리는 위 언어로 형식화된 데이터를 JSON 형식으로 변환할 수 있습니다.
XML이 플랫폼 간, 언어 간 이점을 가지고 있다는 사실이 많이 알려져 있지만 웹 서비스에 적용하지 않는 한 일반 웹 응용 프로그램에서는 개발에서 생성 여부에 관계없이 XML 구문 분석에 대한 두뇌를 과시하는 경우가 많습니다. 서버 측에서 XML을 처리하거나 JavaScript를 사용하여 XML을 구문 분석하는 클라이언트는 종종 코드가 복잡해지고 개발 효율성이 극도로 낮아집니다. 실제로 대부분의 웹 애플리케이션에서는 데이터를 전송하기 위해 복잡한 XML이 필요하지 않습니다. XML의 확장성은 동적 웹 페이지를 구축하기 위해 HTML 조각을 직접 반환하는 경우도 거의 없습니다. XML을 반환하고 구문 분석하는 것과 비교할 때 HTML 조각을 반환하면 시스템의 복잡성이 크게 줄어들지만 어느 정도의 유연성도 부족합니다. XML은 요소, 속성, 엔터티 및 기타 구조를 사용합니다. JSON은 문서 형식이 아니므로 이러한 추가 구조가 필요하지 않습니다. JSON 데이터에는 이름-값 쌍(객체) 또는 값(배열)만 포함되므로 JSON 데이터는 동등한 XML 데이터보다 공간을 덜 차지하고 실행 속도가 더 빠릅니다.
(1) JSON 구문
JSON은 두 가지 구조로 구성됩니다. . 다른 언어에서는 객체, 레코드, 구조, 사전, 해시 테이블, 키 목록 또는 연관 배열로 이해됩니다. 객체는 "{"(왼쪽 대괄호)로 시작하고 "}"(오른쪽 대괄호)로 끝납니다. 각 "이름" 뒤에는 ":"(콜론)이 옵니다. "이름/값" 쌍은 ","(쉼표)로 구분됩니다.
배열 - 순서가 지정된 값 목록입니다. 대부분의 언어에서는 배열로 이해됩니다. 배열은 "["(왼쪽 대괄호)로 시작하고 "]"(오른쪽 대괄호)로 끝납니다. 값을 구분하려면 ","(쉼표)를 사용하세요.
JSON에는 변수나 기타 제어 구조가 없습니다. JSON은 데이터 전송에만 사용됩니다.
JSON 구문은 반대 리터럴과 배열 리터럴의 JavaScript 구문을 기반으로 합니다. 리터럴을 사용하는 경우 데이터 자체는 포함되지만 데이터를 생성한 표현식은 포함되지 않습니다.
1. 데이터 유형
JSON 데이터 구조에는 문자, 숫자, 부울 값(true/false), null, 객체, 배열 등의 데이터 유형이 포함됩니다.
JSON 문자열은 큰따옴표로 묶어야 합니다. 표준 JavaScript 이스케이프 시퀀스를 사용합니다. 따라서 다음 문자 앞에 백슬래시를 추가하세요.
JSON에는 "(따옴표), b(공백), n(새 줄), f(폼 피드), r(캐리지 리턴), t( 가로 위치 지정), u(유니코드 문자에 4자리 추가), (백슬래시 기호), /(슬래시 기호)
2. 객체 리터럴
.JSON은 리터럴을 사용하여 개체를 나타냅니다. 멤버 개체가 두 개 이상인 경우 JSON에서 두 개체의 배열을 포함하는 개체로 나타낼 수 있습니다. 다음 코드는 멤버 개체를 JOSN 텍스트 형식으로 표시합니다.
{“memeber”:[
{
“name”:”Tom”,
“age”:22,
“country”:”USA”
},
{
“name”:”WangMing”,
“age”:25,
“country”:”China”
}
]
} 3. JSON 파서 사용
JSON 파서를 사용하여 객체와 배열에서 JSON 텍스트를 생성하거나 JSON 텍스트에서 객체와 배열을 생성할 수 있습니다. JSON 웹사이트 www.json.rog/json.js에서는 페이지 헤드에 다음 코드를 추가하여 사용할 수 있는 JSON 파서를 제공합니다. JSON 구문 분석기는 toJSONString() 및 ParseJSON()이라는 두 가지 함수를 제공합니다.
toJSONString() 메서드가 JavaScript 개체 및 배열 정의에 추가되었습니다. 이 메서드는 JavaScript 개체 또는 배열을 JSON 텍스트로 변환할 수 있습니다. 이 메서드를 사용하기 위해 개체나 배열을 리터럴로 변환할 필요는 없습니다.
parseJSON() 메서드는 JSON 텍스트에서 개체나 배열을 만들 수 있습니다. ㅋㅋㅋ > #
respone.open(“GET”,”classes.txt”,true);
이 경우,classes.txt는 JSON 데이터 파일의 이름이고, request는 XMLHttpRequest 객체를 저장하기 위해 생성된 변수입니다.
2. 응답 구문 분석
서버에서 JSON 데이터를 수락하면 두 가지 방법으로 응답을 구문 분석할 수 있습니다. JavaScript의 내장 함수인 eval()을 사용하거나, 더 안전한 사용을 위해 JSON 파서를 대신 사용할 수 있습니다.
eval() 메서드는 JavaScript 문자열을 매개 변수로 사용할 수 있으며 문자열을 개체 또는 명령 작업으로 변환할 수도 있습니다. XMLHttpRequest 객체의 responseText 속성을 사용하여 JSON 데이터를 요청하는 경우 eval()을 사용하여 JSON 텍스트 문자열을 JavaScript 객체로 변환합니다. JSON 문자열에는 중괄호가 포함되는 경우가 많기 때문에 JSON 문자열을 괄호로 묶어 실행할 명령이 아니라 평가된 표현식임을 나타냅니다.
var jsonResp=request.responseText;
jsonResp=eval(“(”+jsonResp+”)”);
웹 서버가 JSON 데이터와 요청 페이지를 모두 제공하는 경우 eval() 메서드가 적합합니다. 보안이 관련된 경우 JSON 파서가 적합합니다. JSON 파서는 JSON 텍스트에서만 작동하며 다른 JavaScript는 실행하지 않습니다. 이 경우 responseText를 사용할 수 있지만 JSON 텍스트 문자열을 JavaScript 객체로 변환하려면 JSON() 메서드를 사용하세요. ParseJOSN 함수에 액세스하려면 json.js 파일에 대한 참조를 페이지에 추가해야 합니다.
var jsonResp=request.responseText;
jsonResp=jsonResp.parseJSON();
다음은 JavaScript에서 JSON을 간단하게 사용하는 방법을 보여주는 예입니다.
<script type="text/javascript">
var user =[
{
"name":”shenmiweiyi”,
"QQ":306451129,
"email":”shenmiweiyi@163.com”
"address":
[
{"City":"ZhengZhou","ZipCode":"450000"},
{"City":"BeiJing","ZipCode":"100000"}
]
},
{
"name":”kehao”,
"QQ":254892313,
"email":”kehao@163.com”
"address":
[
{"City":"ShangHai","ZipCode":"200000"},
{"City":"GuangZhou","ZipCode":"510000"}
]
}
]
alert(user[0].name+”的Email是：”user[0].email); //outputs shenmiweiyi的Email是：shenmiweiyi@163.com
alert(user[1].name+”住在：”user[1].address[0].city) //outputs kehao住在：ShangHai
</script> JSON은 이미 JavaScript 표준의 일부입니다. 현재 주류 브라우저는 JSON을 완벽하게 지원합니다. Ajax를 사용하는 Web2.0 웹사이트의 경우 JSON은 현재 가장 유연하고 가벼운 솔루션입니다.
JSON은 JavaScript 개체로 형식화되었습니다.
JSON 형식은 JavaScript 개체를 생성하는 코드와 구문상 동일합니다.
비슷하기 때문에 JavaScript 프로그램은 JSON 데이터를 JavaScript 개체로 쉽게 변환할 수 있습니다.
JSON 구문 규칙
데이터는 키/값 쌍입니다.
데이터는 쉼표로 구분됩니다.
중괄호는 객체 저장
대괄호는 배열 저장
JSON 데이터 - 하나의 이름은 하나의 값에 해당합니다.
JSON 데이터 형식은 JavaScript 객체 속성과 마찬가지로 키/값 쌍입니다.
키/값 쌍은 필드 이름(큰따옴표 안), 콜론, 값으로 구성됩니다.
"firstName":"John"
JSON 개체
JSON 개체는 중괄호 안에 저장됩니다.
JavaScript와 마찬가지로 객체는 여러 키/값 쌍을 보유할 수 있습니다.
{"firstName":"John", "lastName":"Doe"}
JSON 배열
JSON 배열은 대괄호 안에 저장됩니다.
JavaScript와 마찬가지로 배열에는 객체가 포함될 수 있습니다:
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", " lastName ":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
위 예에서 "employees" 개체는 배열입니다. 세 개의 개체가 포함되어 있습니다.
각 개체는 직원(성과 이름)의 기록입니다.
JSON 문자열을 JavaScript 객체로 변환
보통 우리는 서버에서 JSON 데이터를 읽고 웹 페이지에 데이터를 표시합니다.
간단함을 위해 웹 페이지에서 직접 JSON 문자열을 설정합니다(JSON 튜토리얼도 읽을 수 있습니다).
먼저, 문자열은 JSON 형식의 데이터입니다.
var text = '{ " 직원" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" } ,' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
그런 다음 JavaScript 내장 함수 JSON.parse()를 사용하여 문자열을 JavaScript 개체로 변환합니다. :
var obj = JSON .parse(text);
다음 섹션