Json 및 Jsonp 이론 예제 코드에 대한 자세한 설명_기본 지식
Json이란 무엇인가요?
JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. 이는 JavaScript(표준 ECMA-262 3판 - 1999년 12월)의 하위 집합을 기반으로 합니다. JSON은
완전히 언어 독립적인 텍스트 형식을 채택하지만 C 언어 계열(C, C, C#, Java, JavaScript, Perl, Python 등 포함)과 유사한 규칙도 사용합니다. 이러한 속성은 JSON을 이상적인 데이터 교환 언어로 만듭니다. 사람이 읽고 쓰기 쉽고, 기계가 구문 분석하고 생성하기도 쉽습니다.
JSON에는 두 가지 구조가 있습니다.
Json은 JavaScript에서 단순히 객체와 배열이므로 이 두 구조는 객체와 배열입니다. 이 두 구조를 통해 다양하고 복잡한 구조를 표현할 수 있습니다
1. js에서는 "{}"으로 확장된 내용으로 표현되며, 데이터 구조는 {key: value, key: value,...}의 키-값 쌍 구조입니다. 객체지향 언어에서는 Key가 속성입니다. value 는 해당 속성값이므로 이해하기 쉽습니다. 속성값을 얻기 위한 value 메소드는 object.key 이며, 이 속성값의 종류는 숫자, 문자열, 배열, 객체가 될 수 있습니다.
2. 배열: js의 배열은 대괄호 "[]"로 확장된 내용입니다. 데이터 구조는 ["java", "javascript", "vb",...]이고 값 메서드는 모든 언어와 동일합니다. 인덱스를 사용하여 필드 값의 유형은 숫자, 문자열, 배열, 객체가 될 수 있습니다.
객체와 배열이라는 두 가지 구조를 통해 복잡한 데이터 구조를 결합할 수 있습니다.
JSON의 형식 또는 규칙:
JSON은 XML이 할 수 있는 모든 작업을 매우 간단한 방식으로 설명할 수 있으므로 두 가지 모두 크로스 플랫폼 측면에서 완전히 동일합니다.
1. JSON에는 두 개의 데이터 유형 설명자(중괄호 {} 및 대괄호 [])만 있습니다. 나머지 영어 콜론은 문자 매핑이고, 영어 쉼표는 구분 기호이며, 영어 큰따옴표 ""는 문자 정의입니다.
2. 중괄호 {}는 "다양한 유형의 순서가 지정되지 않은 키-값 쌍 세트" 집합을 설명하는 데 사용되며(각 키-값 쌍은 OOP 속성 설명으로 이해될 수 있음) 대괄호 []가 사용됩니다. "동일한 유형의 정렬된 데이터 컬렉션"(OOP 배열에 해당할 수 있음) 집합을 설명합니다.
3. 위 두 세트에 하위 항목이 여러 개 있을 경우 쉼표로 구분해야 합니다.
4. 키-값 쌍은 영어 콜론:으로 구분되며, 다른 언어의 분석을 용이하게 하기 위해 키 이름에 영어 큰따옴표 ""를 추가하는 것이 좋습니다.
5. JSON에서 일반적으로 사용되는 데이터 유형은 문자열, 숫자, 부울, 날짜 및 null뿐입니다. 문자열은 큰따옴표로 묶어야 하며 나머지는 사용되지 않으므로 날짜 유형은 매우 특별합니다. 여기서는 자세히 설명하지 않겠습니다. 예, 클라이언트에 날짜별 정렬 기능이 없으면 날짜와 시간을 문자열로 직접 전달하면 많은 문제를 줄일 수 있습니다.
JSON 예시
//사람 설명
var Person = {
"이름": "애혁",
"나이": 25,
"회사": "애혁",
"Engineer": true
}
//이 사람의 정보 가져오기
var PersonAge = Person.Age;
Alert(PersonAge);
//여러 사람 설명
var 멤버 = [
{
"이름": "애혁",
"나이": 25,
"회사": "애혁",
"엔지니어": true
} ,
{
"이름": "lqm",
"나이": 25,
"회사": "Oracle",
"엔지니어": false
},
{
"이름": "thl",
"나이": 22,
"회사": "Microsoft",
"엔지니어": false
}
]
// lqm의 회사명 읽기
var lqmCompany =members[1].Company;
Alert(lqmCompany);
// 컨퍼런스 설명
var conference = {
"컨퍼런스": "퓨처 마케팅",
"날짜": "2013-5-22",
"주소": "ShenZhen",
"회원":
[
" 엔지니어": true
},
"이름": "lqm",
"연령": 25,
"회사": "Oracle",
"엔지니어": false
},
> "이름": ,
"연령": 20,
"회사": "Microsoft",
"엔지니어": false
会> // 참가자 THL을 읽을지 여부
var Thlisenengineer = Conferentce.members [2 ].engineer
Alert (Thlisenengineer);
Jsonp란 무엇입니까
1. 잘 알려진 문제로 일반 파일에 대한 Ajax 직접 요청은 정적 페이지, 동적 웹 여부에 관계없이 도메인 간 무단 액세스 문제가 있습니다. 페이지, 웹 서비스 또는 WCF는 도메인 간 요청인 경우 허용되지 않습니다.
2. 그러나 웹 페이지에서 js 파일을 호출할 때 여부에 영향을 받지 않는 것으로 나타났습니다. 이는 도메인 간입니다(그뿐만 아니라 "src" 속성이 있는 모든 파일은 <script>, <img>, <iframe>, Websocket과 같은 도메인 간 기능을 갖습니다). HTML5의 미래에 속하는 다른 방법은 포함되지 않습니다. 도메인을 통해 데이터에 액세스할 수 있는 방법은 단 하나뿐입니다. 즉, 클라이언트 호출 및 추가 처리를 위해 원격 서버의 js 형식 파일에 데이터를 로드하려고 시도하는 것입니다. <br> 4. 우리는 복잡한 데이터를 간결하게 설명할 수 있는 JSON이라는 순수 문자 데이터 형식이 있다는 것을 이미 알고 있습니다. 더 좋은 점은 JSON도 js에서 기본적으로 지원하므로 클라이언트가 이 형식의 데이터를 거의 처리할 수 있다는 것입니다. 원하는 대로 <br>5. 이러한 방식으로 웹 클라이언트는 호출 스크립트와 정확히 동일한 방식으로 크로스 도메인 서버에서 동적으로 생성된 js 형식 파일을 호출합니다. 서버를 동적으로 생성해야 하는 이유는 분명합니다. JSON 파일의 목적은 클라이언트가 요구하는 데이터를 로드하는 것입니다. <br>6. 클라이언트는 JSON 파일을 성공적으로 호출한 후 필요한 데이터를 얻습니다. 나머지는 자체 요구 사항에 따라 처리하고 표시하는 것입니다. 원격 데이터를 얻는 방법은 AJAX와 매우 비슷하지만 실제로는 다릅니다. 동일하지 않습니다. <br>7. 클라이언트가 데이터를 쉽게 사용할 수 있도록 비공식 전송 프로토콜이 점차 형성되었습니다. 사람들은 이를 JSONP라고 부릅니다. 이 프로토콜의 핵심 중 하나는 사용자가 서버에 콜백 매개변수를 전달할 수 있도록 하는 것입니다. 그런 다음 서버는 데이터를 반환합니다. 이 콜백 매개 변수는 JSON 데이터를 래핑하는 함수 이름으로 사용되므로 클라이언트는 반환된 데이터를 자동으로 처리하도록 자체 함수를 사용자 지정할 수 있습니다. <br>아직 콜백 매개변수 사용법이 조금 모호하신 분들은 나중에 구체적인 예시를 들어 설명드리겠습니다. <br><br>Jsonp 클라이언트별 구현<strong>:</strong>1. 가장 간단한 것부터 시작해 보겠습니다. 먼저 IIS에서 두 개의 웹 사이트를 만들었습니다. 물론 하나의 포트는 888이고 다른 하나는 8888입니다. 우리는 888을 로컬 서버로 사용하고 8888을 원격 서버로 사용합니다. <br>이제 로컬에 그런 웹페이지가 있습니다<br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="9777" class="copybut" id="copybut9777" onclick="doCopy('code9777')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code9777"><html> ;<BR> ></script>