>웹 프론트엔드 >JS 튜토리얼 >json과 jsonp의 차이점과 사용법

json과 jsonp의 차이점과 사용법

一个新手
一个新手원래의
2017-10-02 09:44:221568검색

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뿐입니다. 문자열은 큰따옴표로 묶어야 하며 나머지는 사용되지 않습니다. 날짜 유형은 매우 특별하므로 이겼습니다. 여기에서 자세히 설명하지 마세요. 클라이언트에 날짜별로 정렬하는 기능 요구 사항이 없으면 날짜와 시간을 문자열로 직접 전달하면 많은 문제를 줄일 수 있습니다.

// 描述一个人 
    var person = {
    "Name": "Bob", "Age": 32, "Company": "IBM", "Engineer": true
}

jsonp 생성 프로세스:
1. 잘 알려진 문제인 일반 파일에 대한 Ajax 직접 요청은 정적 페이지, 동적 웹 페이지, 웹 서비스인지 여부에 관계없이 도메인 간 무단 액세스 문제가 있습니다. , WCF, 도메인 간 요청은 허용되지 않습니다.
2. 그러나 웹 페이지에서 js 파일을 호출할 때 도메인 간 여부에 영향을 받지 않는 것으로 나타났습니다. 또한 "src" 속성이 있는 모든 태그에는 3f1c4e4b6b16bbbd69b2ee476dc4f83a, a1f02c36ba31691bcfe87b2722de723b, d5ba1642137c3f32f4f4493ae923989c
과 같은 도메인 간 기능이 있음을 확인했습니다. 3. 따라서 원하는 경우 다음과 같이 판단할 수 있습니다. 현재 단계에서는 순수한 웹 측(ActiveX 컨트롤, 서버 측 프록시, 향후 HTML5의 Websocket 등)을 사용합니다. (계산되지 않음) 데이터에 대한 도메인 간 액세스에 대한 가능성은 단 하나뿐입니다. 클라이언트 호출 및 추가 처리를 위해 데이터를 js 형식 파일로 저장합니다.
  4. JSON이라는 것이 있다는 것은 이미 알고 있습니다. 순수한 문자 데이터 형식은 복잡한 데이터를 간결하게 설명할 수 있다는 점입니다. 또한 기본적으로 js에서 지원되므로 클라이언트는 거의 원하는 대로 이 형식의 데이터를 처리할 수 있습니다.
 5. 이렇게 하면 솔루션이 준비되고 웹 클라이언트는 크로스 도메인 서버에서 동적으로 생성된 js 형식 파일을 호출합니다. (일반적으로 접미사로 JSON을 사용) 서버가 JSON 파일을 동적으로 생성하는 이유는 클라이언트에 필요한 데이터를 로드하기 위한 것임이 분명합니다.
 6. 클라이언트가 JSON 파일을 성공적으로 호출한 후 필요한 데이터를 얻습니다. 나머지는 자체 필요에 따라 이를 처리하고 표시하는 것입니다. 원격 데이터를 얻는 이 방법은 AJAX와 매우 유사하지만 실제로는 그렇지 않습니다. 동일합니다.
 7. 클라이언트가 데이터를 쉽게 사용할 수 있도록 비공식 전송 프로토콜이 점차 형성되었습니다. 사람들은 이를 JSONP라고 부릅니다. 이 프로토콜의 핵심 포인트 중 하나는 사용자가 서버에 콜백 매개변수를 전달할 수 있도록 하는 것입니다. 서버는 데이터를 반환합니다. 이 콜백 매개 변수를 함수 이름으로 사용하여 JSON 데이터를 래핑하면 클라이언트가 반환된 데이터를 자동으로 처리하도록 자체 함수를 사용자 지정할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert(&#39;你查询的航班结果是:票价 &#39; + data.price + &#39; 元,&#39; + &#39;余票 &#39; + data.tickets + &#39; 张。&#39;);
    };
    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签,设置其属性
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, url);
    // 把script标签加入head,此时调用开始
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
    </script>
</head>
<body>
 
</body>
</html>

위 내용은 json과 jsonp의 차이점과 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.