json과 jsonp가 무엇인지, jQuery json 예제는 자세히 설명되어 있습니다_json
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
- 2016-05-16 17:46:531222검색
JSON이란 무엇인가요?
앞서 간략히 언급했듯이 JSON은 텍스트 기반의 데이터 교환 방식인지, 데이터 설명 형식인지를 먼저 살펴봐야 합니다.
JSON의 장점:
1. 일반 텍스트를 기반으로 크로스 플랫폼 전송이 매우 간단합니다.
2. 거의 모든 배경 언어가 지원됩니다. 지원됩니다.
3, 매우 적은 문자를 차지하는 경량 데이터 형식, 특히 인터넷 전송에 적합합니다.
4. XML만큼 명확하지는 않지만 가독성이 뛰어나지만 들여쓰기를 하면 여전히 쉽게 식별할 수 있습니다. ;
5. 물론 데이터 구조를 알면 작성하고 분석하기 쉽습니다.
JSON에는 확실히 단점이 있지만 저자의 의견으로는 그다지 중요하지 않으므로 별도로 설명하지 않겠습니다.
JSON 형식 또는 규칙 :
JSON은 XML이 할 수 있는 모든 작업을 매우 간단한 방식으로 설명할 수 있으므로 둘 다 완전히 구별할 수 없습니다.
1. JSON에는 두 개의 데이터 유형 설명자(중괄호 {} 및 대괄호 [])만 있습니다. 나머지 영어 콜론은 매핑 문자이고, 영어 쉼표는 구분 기호이며, 영어 큰따옴표 ""는 문자를 정의합니다.
2. 중괄호 {}는 "순서가 지정되지 않은 다양한 유형의 키-값 쌍 세트" 집합을 설명하는 데 사용되며(각 키-값 쌍은 OOP 속성 설명으로 이해될 수 있음) 대괄호 []가 사용됩니다. "동일한 유형의 정렬된 데이터 컬렉션"(OOP 배열에 해당할 수 있음) 집합을 설명합니다.
3. 위 두 세트에 하위 항목이 여러 개 있을 경우 쉼표로 구분해야 합니다.
4. 키-값 쌍은 영어 콜론:으로 구분되며, 다른 언어의 구문 분석을 용이하게 하기 위해 키 이름에 영어 큰따옴표 ""를 추가하는 것이 좋습니다.
5. JSON에서 일반적으로 사용되는 데이터 유형은 문자열, 숫자, 부울, 날짜 및 null뿐입니다. 문자열은 큰따옴표로 묶어야 하며 나머지는 사용되지 않습니다. 여기서는 자세히 다루지 않겠습니다. 예, 클라이언트에 날짜별 정렬 기능이 없으면 날짜와 시간을 문자열로 직접 전달하면 많은 문제를 줄일 수 있습니다.
JSON 인스턴스:
// 사람 설명
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
" Engineer": true
}
// 이 사람의 정보 가져오기
var personAge = person.Age;
// 여러 사람 설명
varmembers = [
{
" 이름": "Bob",
"나이": 32,
"회사": "IBM",
"엔지니어": true
},
{
"이름" : " John",
"연령": 20,
"회사": "Oracle",
"엔지니어": false
},
{
"이름": " Henry" ,
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// John의 회사 이름 읽기
var johnsCompany = 회원[1].회사
//컨퍼런스 설명
var conference = {
"컨퍼런스": "미래 마케팅",
"날짜": "2012-6 - 1",
"주소": "Beijing",
"멤버":
[
{
"이름": "Bob",
"나이": 32,
"회사": "IBM",
"엔지니어": true
},
{
"이름": "John",
"나이": 20,
"회사": "Oracle",
"엔지니어": false
},
{
"이름": "Henry",
"연령": 45,
" 회사 ": "Microsoft",
"Engineer": false
}
]
}
// 참가자 Henry가 엔지니어인지 여부 읽기
var henryIsAnEngineer = conference.Members[ 2 ].엔지니어
JSONP란?
사실 JSONP에 대한 설명은 인터넷에 많이 나와 있지만 다 똑같고 모호해서 처음 접하는 분들이 이해하기에는 좀 어려운 부분이 있는데요. 이 문제를 내 방식대로 설명해보세요. 도움이 되는지 확인해 보세요.
1. 잘 알려진 문제로, 일반 파일에 대한 Ajax 직접 요청은 정적 페이지, 동적 웹 페이지, 웹 서비스 또는 WCF인지 여부에 관계없이 도메인 간 무단 액세스 문제가 있습니다. 크로스 도메인 요청이므로 허용되지 않습니다.
2. 그러나 웹 페이지에서 js 파일을 호출할 때 크로스 도메인인지 여부에 영향을 받지 않는다는 점도 확인했습니다. "src" 속성이 있는 모든 태그에는 <script>, <img>, <iframe>)3을 사용하려는지 판단할 수 있습니다. 현재 단계의 순수 웹측(ActiveX 컨트롤, 서버측 프록시, 향후 HTML5 웹소켓 등은 포함되지 않음) 도메인 전체에 걸쳐 데이터에 액세스할 수 있는 방법은 단 하나뿐입니다. 즉, 데이터를 js로 로드하려고 시도하는 것입니다. 클라이언트 호출 및 추가 처리를 위한 원격 서버의 형식 파일 <br>4. 우리는 이미 순수한 JSON 파일이 있다는 것을 알고 있습니다. 문자 데이터 형식은 복잡한 데이터도 기본적으로 간결하게 설명할 수 있다는 것입니다. js에서 지원되므로 클라이언트는 거의 원하는 대로 이 형식의 데이터를 처리할 수 있습니다. <br> 5. 이렇게 하면 솔루션이 나올 준비가 됩니다. web 클라이언트는 동적으로 생성된 js 형식 파일(일반적으로 JSON을 사용하여)을 호출합니다. 서버가 JSON 파일을 동적으로 생성하는 이유는 클라이언트가 필요로 하는 데이터를 저장하기 위함임이 분명합니다. <br>6. 클라이언트는 JSON 파일을 성공적으로 호출한 후 필요한 데이터를 얻습니다. 나머지는 자체 요구 사항에 따라 처리하고 표시하는 것입니다. 원격 데이터를 얻는 방법은 AJAX와 매우 비슷하지만 실제로는 다릅니다. 동일하지 않습니다. <br>7. 클라이언트가 데이터를 쉽게 사용할 수 있도록 비공식 전송 프로토콜이 점차 형성되었습니다. 사람들은 이를 JSONP라고 부릅니다. 이 프로토콜의 핵심 중 하나는 사용자가 서버에 콜백 매개변수를 전달할 수 있다는 것입니다. 그런 다음 서버는 데이터를 반환합니다. 이 콜백 매개 변수는 JSON 데이터를 래핑하는 함수 이름으로 사용되므로 클라이언트는 반환된 데이터를 자동으로 처리하도록 자체 함수를 사용자 지정할 수 있습니다. <br>아직 콜백 매개변수 사용법이 조금 모호하신 분들은 나중에 구체적인 예시를 들어 설명드리겠습니다. <br><br><br>JSONP의 특정 클라이언트 구현<strong>: </strong>JQuery, extjs 또는 jsonp를 지원하는 기타 프레임워크 등 뒤에서 수행하는 작업은 동일합니다. 클라이언트에서 jsonp 단계별 구현: <br>1. 크로스 도메인 js 파일의 코드가 (물론 웹 스크립트 보안 정책을 준수하더라도) 웹 페이지는 무조건 실행될 수 있음을 알고 있습니다. . <br>remoteserver.com의 루트 디렉터리에 다음 코드가 포함된 remote.js 파일이 있습니다. <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="5077" class="copybut" id="copybut5077" onclick="doCopy('code5077')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code5077">alert('나는 원격 파일입니다') <br><br> </div>로컬 서버 localserver.com에는 다음과 같은 jsonp.html 페이지 코드가 있습니다. : <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="83051" class="copybut" id="copybut83051" onclick="doCopy('code83051')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code83051"><!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 전환//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http:/ /www.w3.org/1999/xhtml"> ; <BR><head> <br><제목></title> <br><script type="text/javascript" src="http: //remoteserver.com/remote.js"> </script>
앞서 간략히 언급했듯이 JSON은 텍스트 기반의 데이터 교환 방식인지, 데이터 설명 형식인지를 먼저 살펴봐야 합니다.
JSON의 장점:
1. 일반 텍스트를 기반으로 크로스 플랫폼 전송이 매우 간단합니다.
2. 거의 모든 배경 언어가 지원됩니다. 지원됩니다.
3, 매우 적은 문자를 차지하는 경량 데이터 형식, 특히 인터넷 전송에 적합합니다.
4. XML만큼 명확하지는 않지만 가독성이 뛰어나지만 들여쓰기를 하면 여전히 쉽게 식별할 수 있습니다. ;
5. 물론 데이터 구조를 알면 작성하고 분석하기 쉽습니다.
JSON에는 확실히 단점이 있지만 저자의 의견으로는 그다지 중요하지 않으므로 별도로 설명하지 않겠습니다.
JSON 형식 또는 규칙 :
JSON은 XML이 할 수 있는 모든 작업을 매우 간단한 방식으로 설명할 수 있으므로 둘 다 완전히 구별할 수 없습니다.
1. JSON에는 두 개의 데이터 유형 설명자(중괄호 {} 및 대괄호 [])만 있습니다. 나머지 영어 콜론은 매핑 문자이고, 영어 쉼표는 구분 기호이며, 영어 큰따옴표 ""는 문자를 정의합니다.
2. 중괄호 {}는 "순서가 지정되지 않은 다양한 유형의 키-값 쌍 세트" 집합을 설명하는 데 사용되며(각 키-값 쌍은 OOP 속성 설명으로 이해될 수 있음) 대괄호 []가 사용됩니다. "동일한 유형의 정렬된 데이터 컬렉션"(OOP 배열에 해당할 수 있음) 집합을 설명합니다.
3. 위 두 세트에 하위 항목이 여러 개 있을 경우 쉼표로 구분해야 합니다.
4. 키-값 쌍은 영어 콜론:으로 구분되며, 다른 언어의 구문 분석을 용이하게 하기 위해 키 이름에 영어 큰따옴표 ""를 추가하는 것이 좋습니다.
5. JSON에서 일반적으로 사용되는 데이터 유형은 문자열, 숫자, 부울, 날짜 및 null뿐입니다. 문자열은 큰따옴표로 묶어야 하며 나머지는 사용되지 않습니다. 여기서는 자세히 다루지 않겠습니다. 예, 클라이언트에 날짜별 정렬 기능이 없으면 날짜와 시간을 문자열로 직접 전달하면 많은 문제를 줄일 수 있습니다.
JSON 인스턴스:
코드 복사 코드는 다음과 같습니다.
// 사람 설명
var person = {
"Name": "Bob",
"Age": 32,
"Company": "IBM",
" Engineer": true
}
// 이 사람의 정보 가져오기
var personAge = person.Age;
// 여러 사람 설명
varmembers = [
{
" 이름": "Bob",
"나이": 32,
"회사": "IBM",
"엔지니어": true
},
{
"이름" : " John",
"연령": 20,
"회사": "Oracle",
"엔지니어": false
},
{
"이름": " Henry" ,
"Age": 45,
"Company": "Microsoft",
"Engineer": false
}
]
// John의 회사 이름 읽기
var johnsCompany = 회원[1].회사
//컨퍼런스 설명
var conference = {
"컨퍼런스": "미래 마케팅",
"날짜": "2012-6 - 1",
"주소": "Beijing",
"멤버":
[
{
"이름": "Bob",
"나이": 32,
"회사": "IBM",
"엔지니어": true
},
{
"이름": "John",
"나이": 20,
"회사": "Oracle",
"엔지니어": false
},
{
"이름": "Henry",
"연령": 45,
" 회사 ": "Microsoft",
"Engineer": false
}
]
}
// 참가자 Henry가 엔지니어인지 여부 읽기
var henryIsAnEngineer = conference.Members[ 2 ].엔지니어
JSONP란?
사실 JSONP에 대한 설명은 인터넷에 많이 나와 있지만 다 똑같고 모호해서 처음 접하는 분들이 이해하기에는 좀 어려운 부분이 있는데요. 이 문제를 내 방식대로 설명해보세요. 도움이 되는지 확인해 보세요.
1. 잘 알려진 문제로, 일반 파일에 대한 Ajax 직접 요청은 정적 페이지, 동적 웹 페이지, 웹 서비스 또는 WCF인지 여부에 관계없이 도메인 간 무단 액세스 문제가 있습니다. 크로스 도메인 요청이므로 허용되지 않습니다.
2. 그러나 웹 페이지에서 js 파일을 호출할 때 크로스 도메인인지 여부에 영향을 받지 않는다는 점도 확인했습니다. "src" 속성이 있는 모든 태그에는 <script>, <img>, <iframe>)3을 사용하려는지 판단할 수 있습니다. 현재 단계의 순수 웹측(ActiveX 컨트롤, 서버측 프록시, 향후 HTML5 웹소켓 등은 포함되지 않음) 도메인 전체에 걸쳐 데이터에 액세스할 수 있는 방법은 단 하나뿐입니다. 즉, 데이터를 js로 로드하려고 시도하는 것입니다. 클라이언트 호출 및 추가 처리를 위한 원격 서버의 형식 파일 <br>4. 우리는 이미 순수한 JSON 파일이 있다는 것을 알고 있습니다. 문자 데이터 형식은 복잡한 데이터도 기본적으로 간결하게 설명할 수 있다는 것입니다. js에서 지원되므로 클라이언트는 거의 원하는 대로 이 형식의 데이터를 처리할 수 있습니다. <br> 5. 이렇게 하면 솔루션이 나올 준비가 됩니다. web 클라이언트는 동적으로 생성된 js 형식 파일(일반적으로 JSON을 사용하여)을 호출합니다. 서버가 JSON 파일을 동적으로 생성하는 이유는 클라이언트가 필요로 하는 데이터를 저장하기 위함임이 분명합니다. <br>6. 클라이언트는 JSON 파일을 성공적으로 호출한 후 필요한 데이터를 얻습니다. 나머지는 자체 요구 사항에 따라 처리하고 표시하는 것입니다. 원격 데이터를 얻는 방법은 AJAX와 매우 비슷하지만 실제로는 다릅니다. 동일하지 않습니다. <br>7. 클라이언트가 데이터를 쉽게 사용할 수 있도록 비공식 전송 프로토콜이 점차 형성되었습니다. 사람들은 이를 JSONP라고 부릅니다. 이 프로토콜의 핵심 중 하나는 사용자가 서버에 콜백 매개변수를 전달할 수 있다는 것입니다. 그런 다음 서버는 데이터를 반환합니다. 이 콜백 매개 변수는 JSON 데이터를 래핑하는 함수 이름으로 사용되므로 클라이언트는 반환된 데이터를 자동으로 처리하도록 자체 함수를 사용자 지정할 수 있습니다. <br>아직 콜백 매개변수 사용법이 조금 모호하신 분들은 나중에 구체적인 예시를 들어 설명드리겠습니다. <br><br><br>JSONP의 특정 클라이언트 구현<strong>: </strong>JQuery, extjs 또는 jsonp를 지원하는 기타 프레임워크 등 뒤에서 수행하는 작업은 동일합니다. 클라이언트에서 jsonp 단계별 구현: <br>1. 크로스 도메인 js 파일의 코드가 (물론 웹 스크립트 보안 정책을 준수하더라도) 웹 페이지는 무조건 실행될 수 있음을 알고 있습니다. . <br>remoteserver.com의 루트 디렉터리에 다음 코드가 포함된 remote.js 파일이 있습니다. <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="5077" class="copybut" id="copybut5077" onclick="doCopy('code5077')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code5077">alert('나는 원격 파일입니다') <br><br> </div>로컬 서버 localserver.com에는 다음과 같은 jsonp.html 페이지 코드가 있습니다. : <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="83051" class="copybut" id="copybut83051" onclick="doCopy('code83051')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code83051"><!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 전환//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http:/ /www.w3.org/1999/xhtml"> ; <BR><head> <br><제목></title> <br><script type="text/javascript" src="http: //remoteserver.com/remote.js"> </script>