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&gt ;<BR>                                                               ></script>





자바스크립트 파일은 8888의 Remote.js 파일을 의미합니다.

코드 복사 코드는 다음과 같습니다.alert('나는 원격 파일입니다' );

로컬 서버 웹사이트를 실행한 후 효과는

이제 가장 간단한 크로스 도메인에 성공합니다.
2. 1을 기준으로 수정해보자. 먼저 코드를 살펴보자

코드를 복사한다 코드는 다음과 같다. 다음:

 

  
   




먼저 로컬 파일에 js 함수를 추가한 후, 원격 서버의 js 파일을 호출합니다.

코드 복사 코드는 다음과 같습니다.

aehyok({"result":"I am a 원격 js 가져온 데이터입니다."});

원격 서버의 js 파일에 있는 코드입니다.
애프터런 효과

통화가 성공했습니다. 크로스 도메인 원격 js에 의해 로컬 함수가 성공적으로 호출되었으며, 원격 js에서 가져온 데이터도 수신되었음을 보여줍니다. 도메인 간 원격 데이터 수집의 목적이 기본적으로 달성되어 매우 기쁩니다. 그러나 원격 js가 호출해야 하는 로컬 함수의 이름을 어떻게 알릴 수 있습니까? 결국 jsonp 서버는 많은 서비스 개체를 직면해야 하며 이러한 서비스 개체의 로컬 기능은 다릅니다. 아래를 살펴보자.

코드 복사 코드는 다음과 같습니다.

저는 asp.net에 있습니다. mvc3.0 프로젝트이므로 배경은 컨트롤러에 있습니다

코드 복사

코드는 다음과 같습니다 Public String Aehyok () { Return "aehyok ({" result ":" I am the data imported by 원격 js "})") 실행 결과는

디버깅을 통해 http://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641이라는 URL을 찾을 수 있습니다.
callback=aehyok은 백그라운드 호출 후 먼저 반환되는 콜백 함수입니다. ).
그런 다음 다시 성공(json)을 실행합니다. 그래서 팝업이 2개가 뜹니다.
지금은 하나의 프로젝트만 진행하고 있지만 원칙은 여전히 ​​같습니다.