JSON과 JSONP에 대해 이야기해 봅시다. 아마도 갑자기 이해하게 될 것입니다

서문

Sencha Touch 2 개발 모델의 특성으로 인해 기본 데이터 상호 작용 동작은 거의 AJAX를 통해서만 달성될 수 있습니다.

물론 강력한 PhoneGap 플러그인을 호출한 후 패키징하면 100% 소켓 통신 및 로컬 데이터베이스 기능을 구현할 수도 있고, HTML5 WebSocket을 통해 서버와의 통신 및 서버 푸시 기능도 구현할 수 있습니다. 그러나 두 가지 방법 모두 제한 사항이 있습니다. 전자는 PhoneGap 지원이 필요하고 후자는 사용자 장치가 WebSocket을 지원해야 하므로 둘 다 AJAX의 기본 솔루션으로 간주될 수 없습니다.

AJAX에 관해서 우리는 필연적으로 두 가지 질문에 직면하게 됩니다. 첫 번째는 AJAX가 데이터를 교환하기 위해 어떤 형식을 사용하는가입니다. 두 번째는 도메인 간 요구 사항을 해결하는 방법입니다. 현재 이 두 가지 문제에 대한 다양한 솔루션이 있습니다. 예를 들어 데이터는 사용자 정의 문자열이나 XML로 설명할 수 있고 도메인 간 문제는 서버 측 프록시를 통해 해결할 수 있습니다.

하지만 지금까지 가장 권장되거나 선호되는 솔루션은 JSON을 사용하여 데이터를 전송하고 도메인 간에는 JSONP를 사용하는 것입니다. 이것이 바로 이 기사의 내용입니다.

JSON(JavaScript Object Notation)과 JSONP(JSON with Padding) 사이에는 문자 하나만 차이가 있지만 실제로는 전혀 동일하지 않습니다. JSON은 데이터 교환 형식이고 JSONP는 종속성입니다. 개발자의 창의력으로 만들어진 비공식 도메인 간 데이터 교환 프로토콜입니다. 최근 인기 있는 스파이 영화를 비유로 들어보겠습니다. JSON은 지하 당사자가 정보를 작성하고 교환하는 데 사용하는 "코드"인 반면, JSONP는 코드로 작성된 정보를 동료에게 전송하는 데 사용되는 연결 방법입니다. 그거 봤어? 하나는 정보의 형식을 기술하는 것이고, 다른 하나는 정보를 전송하기 위해 양 당사자가 합의한 방법입니다.

단지 채팅일 뿐이므로 더 이상 독단적인 방식으로 설명하지 않고, 개발자가 이를 사용해야 하는지, 어떻게 사용해야 하는지 이해할 수 있도록 돕는 데 집중할 것입니다.

JSON의 장점:

1. 일반 텍스트를 기반으로 크로스 플랫폼 전송이 매우 간단합니다.
2. Javascript 네이티브입니다. 지원, 배경 거의 모든 언어가 지원됩니다. 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 =members[1].Company; 
//컨퍼런스 설명
var conference = { 
"컨퍼런스": "미래 마케팅", 
"날짜" : "2012-6-1", 
"주소": "Beijing", 
"멤버": 
[ 
{ 
"이름": "Bob", 
 " 나이": 32, 
"회사": "IBM", 
"엔지니어": true 
}, 
{ 
"이름": "John", 
"나이 " : 20, 
"회사": "Oracle", 
"엔지니어": false 
}, 
{ 
"이름": "Henry", 
"나이": 45 , 
"Company": "Microsoft", 
"Engineer": false 
} 
] 
} 
// 참가자 Henry가 엔지니어인지 여부 읽기 
var henryIsAnEngineer = conference.Members[2].Engineer; 

JSON에 대한 내용은 여기까지입니다. 자세한 내용은 개발 과정에서 심층적으로 학습할 수 있는 정보를 참조하세요.

JSONP란

먼저 JSONP가 어떻게 생성되었는지 살펴보겠습니다.

사실 JSONP에 대한 설명은 인터넷에 많이 나와 있지만 다 똑같고 모호해서 처음 접하는 분들이 이해하기에는 조금 어려운 부분이 있는데, 이 문제를 내 방식대로 설명해보세요. 도움이 되는지 확인해 보세요.

1. 잘 알려진 문제인 Ajax에서 일반 파일을 직접 요청하면 정적 페이지, 동적 웹 페이지, 웹 서비스, WCF 등 도메인 간 무단 액세스 문제가 발생합니다. 도메인 간 요청이므로 허용되지 않습니다.

2. 그러나 우리는 또한 웹 페이지에서 js 파일을 호출할 때 그것이 크로스 도메인인지 여부에 영향을 받지 않는다는 것을 발견했습니다(그뿐만 아니라 "src" 속성을 가진 모든 태그는 크로스 도메인임을 발견했습니다). -<script>, <img>, <iframe>과 같은 도메인 기능);</p> <p> 3. 현 단계에서 순수 웹(ActiveX 컨트롤, 서버측 프록시 및 향후 HTML5 웹소켓은 포함되지 않음)을 통해 도메인 간 데이터에 액세스하려는 경우 가능성은 단 하나라고 판단할 수 있습니다. 이는 서버가 클라이언트 호출 및 추가 처리를 위해 데이터를 js 형식 파일로 로드하려고 시도하는 것입니다. </p> 4. 우리는 복잡한 데이터를 간결하게 설명할 수 있는 JSON이라는 순수 문자 데이터 형식이 있다는 것을 이미 알고 있습니다. 더 좋은 점은 JSON도 js에서 기본적으로 지원하므로 클라이언트가 이 형식의 데이터를 거의 처리할 수 있다는 것입니다. 원하는대로 ;<p> </p> 5. 이렇게 하면 웹 클라이언트가 호출 스크립트와 정확히 동일한 방식으로 크로스 도메인 서버(일반적으로 접미사로 JSON 포함)에서 동적으로 생성된 js 형식 파일을 호출합니다. 서버가 JSON 파일을 동적으로 생성하는 목적은 클라이언트가 요구하는 데이터를 JSON 파일에 로드하는 것입니다. <p> </p> 6. 클라이언트가 JSON 파일을 성공적으로 호출한 후 필요한 데이터를 얻습니다. 나머지는 자체 요구 사항에 따라 이를 처리하고 표시하는 것입니다. 원격 데이터를 얻는 방법은 AJAX와 매우 유사합니다. 실제로는 동일하지 않습니다. <p> </p> 7. 클라이언트가 데이터를 쉽게 사용할 수 있도록 비공식 전송 프로토콜이 점차 형성되었습니다. 사람들은 이를 JSONP라고 부릅니다. 이 프로토콜의 핵심 포인트 중 하나는 사용자가 서버에 콜백 매개변수를 전달할 수 있도록 하는 것입니다. 그런 다음 서버는 데이터를 반환합니다. 이 콜백 매개 변수는 JSON 데이터를 래핑하는 함수 이름으로 사용되므로 클라이언트는 반환된 데이터를 자동으로 처리하도록 자체 함수를 사용자 지정할 수 있습니다. <p> </p> 아직 콜백 매개변수 사용법이 조금 모호하신 분들은 나중에 구체적인 예시를 들어 설명드리겠습니다. <p> </p> <p> JSONP 클라이언트의 구체적인 구현: <strong></strong> </p> jsonp를 지원하는 jQuery, ExtJ 또는 기타 프레임워크에 관계없이 클라이언트에서 jsonp 구현을 단계별로 설명하겠습니다. <p> </p> 1. 크로스 도메인 js 파일의 코드(물론 웹 스크립트 보안 정책을 준수함)가 있어도 웹 페이지는 무조건 실행될 수 있다는 것을 알고 있습니다. <p> </p>remoteserver.com의 루트 디렉터리에 다음 코드가 포함된 remote.js 파일이 있습니다. <p><br></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="57002" class="copybut" id="copybut57002" onclick="doCopy('code57002')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code57002">alert('나는 원격 파일입니다') ><br><br>코드 복사</div> <br><br> 코드는 다음과 같습니다. <div class="codetitle"> <div class="codebody" id="code34976"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head><title></title> ;script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

;/body>

확실히 페이지에 교차 도메인 호출이 성공했음을 알리는 팝업 창이 나타납니다.

2. 이제 jsonp.html 페이지에서 함수를 정의한 다음, remote.js에 데이터를 전달하여 함수를 호출합니다.

jsonp.html 페이지 코드는 다음과 같습니다.

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

코드 복사

코드는 다음과 같습니다 localHandler({"result":"원격 js 데이터를 가져왔습니다"})

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

 3. 똑똑한 개발자라면 서버에서 제공하는 js 스크립트가 동적으로 생성되기만 하면 호출자는 서버에 "XXX 함수 js 코드를 호출하고 싶습니다. 제발"이라고 알리는 매개변수를 전달할 수 있다고 쉽게 생각할 수 있습니다. return it to me"를 선택하면 서버는 클라이언트의 필요에 따라 js 스크립트를 생성하고 응답할 수 있습니다. 

jsonp.html 페이지의 코드를 보세요:

코드를 복사하세요

코드는 다음과 같습니다.

저자별 최신 기사