json 과 jsonp 의 차이 점 분석 및 ajax 를 통 해 json 데 이 터 를 얻 은 후 형식 전환

json 과 jsonp 의 차이 점(json 이 목적 이 고 jsonp 는 수단 일 뿐)에 대해 다음 과 같이 소개 한다.
한 마디 로 제 이 슨 이 되 돌려 준 것 은 일련의 데이터 이다.jsonp 는 스 크 립 트 코드(함수 호출 포함)를 되 돌려 줍 니 다.
JSON 은 사실 JavaScript 의 대상 입 니 다.var obj={}과 질 적 으로 똑 같 습 니 다.양 적 으로 만 무한 확장 할 수 있 습 니 다.쉽게 말 하면 제 이 슨 은 자바 스 크 립 트 의 대상(Object)과 배열(Array,사실은 대상)이다.
json 은 사람 이 읽 고 쓰기 쉬 우 며 기계 적 으로 해석 하고 생 성 하기 쉬 우 며 네트워크 전송 속도 가 비교적 높 고 기능 형 사이트 의 앞 뒤 단 은 데 이 터 를 자주 교환 해 야 하 며 json 은 강력 한 표 현 력 과 높 은 얼굴 값 으로 점점 이상 적 인 앞 뒤 단 데이터 교환 언어 가 되 었 다.그럼 xml 선 배 는 요?마이크로소프트 xp 처럼 공 을 세 워 은퇴 할 것 같 아 요.
동원(동원 전략 을 모 르 는 동 화 는 자체 바 이 두)아래 의 앞 뒤 데이터 교환 형식 에서 제 이 슨 을 사용 하 는 것 이 확실 합 니 다.그러면 문제 가 생 겼 습 니 다.만약 에 제 가 다른 사이트 에서 제공 하 는 데 이 터 를 얻 고 싶다 면 어떻게 해 야 합 니까?즉,도 메 인 을 넘 어 데이터 문 제 를 읽 는 것 입 니 다.정 답 은 No Way 입 니 다.왜 일 까요?제 이 슨 은 일반적인 텍스트 형식 이기 때문에 그 서버 를 쉽게 얻 을 수 있 습 니 다.그러면 인터넷 세 계 는 복잡 하지 않 습 니 다.이 문 제 는 소 X 의 규범 제정 자 들 이 이미 생각 했 기 때문에 동원 전략 으로 파일 획득 을 제한 합 니 다.마지막 결 과 는 img,script,iframe 과 같은 src 속성 을 지정 할 수 있 는 태그 만 다른 사이트 의 데이터(그림,스 크 립 트,원본 파일 은 모두 데이터)를 얻 는 능력 이 있 습 니 다.예 를 들 면:

<!--      -->
<img src="http://img30.360buyimg.com/jgsq-productsoa/jfs/t2407/323/1635505465/47386/f2d89d88/56615e00N7a475ee6.jpg" />
<!--  CDN-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 

제 이 슨 을 직접 얻 는 것 은 통 하지 않 는 것 같 습 니 다.그럼 데 이 터 를 얻 을 수 있 는 다른 방법 은 없 을까요?그래서 jsonp 는 이렇게 똑똑 한 개발 자 에 게 발견 되 었 습 니 다.왜 발명 이 아니 라 발견 이 라 고 말 합 니까?새로운 기술 과 관련 되 지 않 았 기 때문에 ajax 를 발견 한 것 과 같 습 니 다.
jsonp 원 리 는 이렇다.사이트 A 는 사이트 B 의 데 이 터 를 얻어 야 한다.사이트 B 는 내 가 너희들 에 게 방법 을 주 겠 다 고 말한다.[1.너희들 은탭 은 먼저 open.js 파일(사이트 B 의 책임)을 가 져 옵 니 다.이 안에 필요 한 데이터 가 있 습 니 다.2.데 이 터 를 가 져 온 후에 데 이 터 를 처리 하 는 방법 명 은 foo(데이터 요구 자의 책임 과 의무)라 고 명명 해 야 합 니 다.여 기 는 B 사이트 와 데 이 터 를 가 져 오 라 고 요구 하 는 사람 사이 에 협 의 를 만 든 것 과 같 습 니 다.요구 자 는 반드시 규칙 에 따라 일 을 처리 해 야 합 니 다.만약 에 요구 자가 상기 두 가 지 를 동시에 지 키 지 못 하면 기대 에 따라 데 이 터 를 얻 을 수 없습니다.음.................................................................
open.js 내용

foo({"name":"B","age":23});　　//        json  {"name":"B","age":23} ，     ， js      js   
//                          foo，  B                        foo        ；
//     foo is not defined  

사이트 A 스 크 립 트

function foo(data){
console.log(data);
//ToDo.. 
} 

아!커 브 를 돌 았 지만 데 이 터 를 얻 었 습 니 다.사이트 A,사이트 B 가 모두 매우 기 뻤 습 니 다.그러면 문제 가 또 왔 습 니 다.사이트 C 도 사이트 B 의 데 이 터 를 가 져 와 야 한다 고 했 습 니 다.사이트 B 는 협 의 를 그 에 게 던 졌 습 니 다.사이트 C 가 가 져 와 보 니 진흙 말 이 었 습 니 다.foo 라 는 이름 은 이미 자신의 발찌 파일 의 6868 줄 에 사용 되 었 고 스 크 립 트 의 구석구석 에 사용 되 었 습 니 다.대량 교 체 는 많은 잠재 적 인 bug 를 초래 할 수 있 습 니 다.사이트 B 는 급 한 상황 에서 fool 로 바 꾸 기로 결 정 했 습 니 다.사이트 A 는 바로 뛰 기 시 작 했 습 니 다.자신의 사이트 가 이미 많은 곳 에서 foo 를 사용 하여 데 이 터 를 인 용 했 기 때 문 입 니 다.
위의 상황 을 피하 기 위해 소 X 를 달 래 는 개발 자 들 은 js 파일 을 동적 으로 생 성 하 는 방법 을 사 용 했 습 니 다.pp 버 전 은 다음 과 같 습 니 다.
open.php

<?php
header('Content-type: application/javascript');
$jsonCallback = htmlspecialchars($_REQUEST ['callback']); //              
$jsonData ='{"name":"B","age":23}'; //    json  
echo $jsonCallback . "(" . $jsonData . ")"; //  jsonp     ，         
?> 

어....................................................................
그래서 사이트 A 용에서 데 이 터 를 요청 합 니 다.변 수 를 수정 할 필요 가 없습니다.A 에 게 돌아 온 스 크 립 트 파일 의 내용 은:

foo({"name":"B","age":23}); //   jsonp，        ，             ，             
  C  <script src="http://www.B.com/open.php?callback=blah"></script>     ，   C        ：
blah({"name":"B","age":23}); 
  N  <script src="http://www.B.com/open.php?callback=what"></script>     ，   N        ：
what({"name":"B","age":23}); 

Problem Solved,모두 가 원 하 는 데 이 터 를 가 져 왔 고 이름 충돌 을 피 했 습 니 다.
jsonp 의 전체 이름 은 json with padding 이 라 고 하 는데 매우 형상 적 이다.즉,json 대상 을 js 문법 에 맞 는 형식 으로 감 싸 서 다른 사이트 가 요청 할 수 있 도록 하 는 것 이다.즉,json 데 이 터 를 js 파일 로 봉 하 는 것 이다.
json 은 이상 적 인 데이터 교환 형식 이지 만 도 메 인 을 넘 어 직접 가 져 올 수 없 기 때문에 json 패키지(padding)를 합 법 적 인 js 구문 에서 js 파일 로 전달 합 니 다.이것 이 바로 json 과 jsonp 의 차이 이다.json 은 원 하 는 것 이다.jsonp 는 이 목적 을 달성 하기 위해 보편적으로 사용 하 는 방법 이다.물론 최종 적 으로 얻 고 처리 하 는 것 은 json 이다.그 러 니까 제 이 슨 은 목적 이 고 제 이 슨 은 수단 일 뿐 이 야.json 은 항상 사용 되 고 jsonp 는 도 메 인 에서 데 이 터 를 가 져 와 야 사용 할 수 있 습 니 다.
json 과 jsonp 의 차 이 를 이해 한 후에 사실은 ajax 의 크로스 도 메 인 에서 데 이 터 를 얻 으 면 이해 하고 실현 할 수 있 습 니 다.같은 소스 일 때 특별한 것 이 없 으 면 직접 취하 면 됩 니 다.크로스 도 메 인 을 할 때 커 브 를 돌려 목적 을 달성 해 야 합 니 다.
jquery 의 ajax 요청 json 데이터 인 스 턴 스 를 첨부 합 니 다:
(같은 기원):

$.ajax({
url:"persons.json",
success:function(data){
　　　　console.log(data);
　　 　 //ToDo..
　 }
}); 

(크로스 필드):

$.ajax({
url:"http://www.B.com/open.php?callback=?",
dataType:"jsonp",
success:function(data){
console.log(data);
//ToDo..
}
}); 

jquery 는 jsonp 를 ajax 에 봉 인 했 습 니 다.매우 합 리 적 입 니 다.왜냐하면 절대 다수의 jsonp 요청 은 ajax 이기 때 문 입 니 다.jquery 의 ajax 에 대한 구체 적 인 용법 은 자체 바 이 두 를 사용 하 십시오.또한 주의해 야 할 것 은 서로 다른 사이트 가 제공 하 는 데이터 인터페이스 의$입 니 다.REQUEST['callback']에 서 는 반드시 callback 이 아니 라 cb,cbk 등 이 될 수 있 으 며,구체 적 으로 사용 할 때 는 서버 에서 제공 하 는 인터페이스 사용 에 관 한 상세 한 문 서 를 읽 어야 합 니 다.
다음은'밤 미 앙 0906'이 쓴 ajax 를 통 해 json 데 이 터 를 얻 은 후 형식 전환 을 소개 합 니 다.
어떤 경우 에 얻 은 제 이 슨 데 이 터 는 string 형식 일 수 있 으 므 로 제 이 슨 대상 으로 포맷 해 야 쉽게 해석 할 수 있 습 니 다.
a)원생 js 가 ajax 를 통 해 얻 은 json
이 때 돌아 오 는 데 이 터 는 기본적으로 string 형 이기 때문에 eval()함수 로 json 대상 으로 전환 해 야 합 니 다.함수 내 문자열 의 형식 을 주의해 야 합 니 다:eval("+data+")").되 돌아 오 는 string 은{}에 있 기 때문에 eval 은 큰 괄호 를 js 코드 블록 시작 과 끝 표지 로 인식 하기 때문에()를 추가 하여 강제로 대상 으로 전환 시 켜 야 합 니 다.
b)jquery 가 져 오기
1:ajax()비동기 요청 을 통 해 type 을 json 으로 설정 하고 json 대상 으로 돌아 갑 니 다.
2:ajax()와 같은 값 의$.getJSON(url,data 1,function(data 2,status,xhr){/...}방법 으로 얻 은 것 도 json 대상 입 니 다.이 중 데이터 1 은 요청 과 함께 보 낸 데이터 이 며,데이터 2 는 서버 에서 돌아 온 데이터 즉 json 대상 입 니 다.