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

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:50 PM

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 페이지의 코드를 보세요:

코드를 복사하세요

코드는 다음과 같습니다.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7560

Cakephp 튜토리얼

1384

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

golang WebSocket과 JSON의 결합: 데이터 전송 및 파싱 구현 Dec 17, 2023 pm 03:06 PM

golangWebSocket과 JSON의 결합: 데이터 전송과 파싱의 실현 현대 웹 개발에서 실시간 데이터 전송은 점점 더 중요해지고 있습니다. WebSocket은 양방향 통신을 달성하는 데 사용되는 프로토콜입니다. 기존 HTTP 요청-응답 모델과 달리 WebSocket을 사용하면 서버가 클라이언트에 데이터를 적극적으로 푸시할 수 있습니다. JSON(JavaScriptObjectNotation)은 간결하고 읽기 쉬운 데이터 교환을 위한 경량 형식입니다.

Java에서 @Expose 주석을 사용하여 JSON에서 필드를 제외하는 방법은 무엇입니까? Sep 16, 2023 pm 09:49 PM

Gson@Expose 주석은 직렬화 또는 역직렬화를 위해 필드가 노출되는지(포함 여부)를 표시하는 데 사용할 수 있습니다. @Expose 주석은 두 개의 매개변수를 가질 수 있으며, 각 매개변수는 부울 값이고 true 또는 false 값을 가질 수 있습니다. GSON이 @Expose 주석에 반응하려면 GsonBuilder 클래스를 사용하여 Gson 인스턴스를 생성해야 하며, 직렬화 또는 역직렬화에서 Expose 주석이 없는 모든 필드를 제외하도록 Gson을 구성하는 제외FieldsWithoutExposeAnnotation() 메서드를 호출해야 합니다. 구문 publicGsonBuilderexclude

MySQL5.7과 MySQL8.0의 차이점은 무엇입니까? Feb 19, 2024 am 11:21 AM

MySQL5.7과 MySQL8.0은 서로 다른 두 가지 MySQL 데이터베이스 버전입니다. 두 버전 사이에는 몇 가지 주요 차이점이 있습니다. 성능 개선: MySQL8.0은 MySQL5.7에 비해 성능이 일부 향상되었습니다. 여기에는 더 나은 쿼리 최적화 프로그램, 더 효율적인 쿼리 실행 계획 생성, 더 나은 인덱싱 알고리즘 및 병렬 쿼리 등이 포함됩니다. 이러한 개선 사항은 쿼리 성능과 전반적인 시스템 성능을 향상시킬 수 있습니다. JSON 지원: MySQL 8.0에는 JSON 데이터의 저장, 쿼리 및 인덱싱을 포함하여 JSON 데이터 유형에 대한 기본 지원이 도입되었습니다. 이를 통해 MySQL에서 JSON 데이터를 보다 편리하고 효율적으로 처리하고 조작할 수 있습니다. 트랜잭션 기능: MySQL8.0은 원자와 같은 몇 가지 새로운 트랜잭션 기능을 도입합니다.

PHP 배열을 JSON으로 변환하기 위한 성능 최적화 팁 May 04, 2024 pm 06:15 PM

PHP 배열을 JSON으로 변환하기 위한 성능 최적화 방법은 다음과 같습니다. JSON 확장 및 json_encode() 함수를 사용하여 문자 이스케이프를 방지하고 버퍼를 사용하여 JSON 인코딩 결과 캐싱을 고려합니다. JSON 인코딩 라이브러리.

C# 개발에서 XML 및 JSON 데이터 형식을 처리하는 방법 Oct 09, 2023 pm 06:15 PM

C# 개발에서 XML 및 JSON 데이터 형식을 처리하려면 특정 코드 예제가 필요합니다. 최신 소프트웨어 개발에서는 XML과 JSON이 널리 사용되는 두 가지 데이터 형식입니다. XML(Extensible Markup Language)은 데이터를 저장하고 전송하는 데 사용되는 마크업 언어인 반면, JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. C# 개발에서는 XML 및 JSON 데이터를 처리하고 조작해야 하는 경우가 많습니다. 이 기사에서는 C#을 사용하여 이 두 가지 데이터 형식을 처리하고 첨부하는 방법에 중점을 둘 것입니다.

golang의 json.MarshalIndent 함수를 사용하여 구조를 형식화된 JSON 문자열로 변환합니다. Nov 18, 2023 pm 01:59 PM

Golang에서 json.MarshalIndent 함수를 사용하여 구조를 형식화된 JSON 문자열로 변환합니다. Golang에서 프로그램을 작성할 때 구조를 JSON 문자열로 변환해야 하는 경우가 종종 있습니다. 이 과정에서 json.MarshalIndent 함수가 도움이 될 수 있습니다. 포맷된 출력. 아래에서는 이 기능을 사용하는 방법을 자세히 설명하고 구체적인 코드 예제를 제공합니다. 먼저 일부 데이터가 포함된 구조를 만들어 보겠습니다. 다음은 표시입니다

Pandas 사용 튜토리얼: JSON 파일 읽기를 위한 빠른 시작 Jan 13, 2024 am 10:15 AM

빠른 시작: JSON 파일을 읽는 Pandas 방법, 특정 코드 예제가 필요합니다. 소개: 데이터 분석 및 데이터 과학 분야에서 Pandas는 중요한 Python 라이브러리 중 하나입니다. 풍부한 기능과 유연한 데이터 구조를 제공하며, 다양한 데이터를 쉽게 처리하고 분석할 수 있습니다. 실제 애플리케이션에서는 JSON 파일을 읽어야 하는 상황에 자주 직면합니다. 이 기사에서는 Pandas를 사용하여 JSON 파일을 읽고 특정 코드 예제를 첨부하는 방법을 소개합니다. 1. 팬더 설치

Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 어떻게 제어합니까? May 06, 2024 pm 10:09 PM

Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 제어합니다. 직렬화: @JsonIgnore: 속성 무시 @JsonProperty: 이름 지정 @JsonGetter: get 메서드 사용 @JsonSetter: set 메서드 사용 역직렬화: @JsonIgnoreProperties: @JsonProperty 속성 무시: 이름 지정 @JsonCreator: 생성자 사용 @JsonDeserialize: 사용자 정의 논리

See all articles