> 웹 프론트엔드 > JS 튜토리얼 > jsonp 프로토콜의 심층 분석principle_json

jsonp 프로토콜의 심층 분석principle_json

WBOY
풀어 주다: 2016-05-16 15:38:02
원래의
1985명이 탐색했습니다.

현재 공동 디버깅을 개발하는 과정에서 jquery를 사용하므로 당연히 dataType:'jsonp'를 사용하면 문제를 쉽게 해결할 수 있습니다.
그런데 당시 백엔드가 jsonp 액세스를 지원하지 않았기 때문에 나중에 이 기능을 구현할 때 jsonp 형식으로 반환되는 형식이 무엇인지 물었습니다. 사용법만 알았을 뿐, 답은 알 수 없었습니다. . .

나중에 해결됐지만 문제해결을 좋아하는 저는 항상 고민을 많이 하게 되어서 정보를 읽기 시작했고, 보고 나서 갑자기 깨달음을 느꼈습니다. 할 계획입니다. 모든 사람과 공유할 메모입니다.

JSON과 JSONP의 차이점

JSON과 JSONP 사이에는 문자가 하나만 다르지만 실제로는 전혀 동일하지 않습니다. JSON은 데이터 교환 형식이고 JSONP는 JSONP 방법을 사용하여 얻을 수 있는 것입니다. 여전히 json 형식의 데이터입니다.

직접 말하면 用JSON来传数据,靠JSONP来跨域.

JSONP 자세히 설명

우리 모두는 一个页面的ajax只能获取和此页面同域的数据。알고 있습니다. 따라서 도메인 전체에서 데이터를 가져와야 할 경우 JSONP 방법을 사용하여 가져와야 합니다.

아래 그림과 같이 크로스 도메인 데이터를 얻기 위해 json 형식을 사용하여 반환되는 오류 메시지입니다.

그럼 어떻게 해결하나요? 프레임워크를 사용하는 프론트엔드 아동용 신발에는 나름의 대응 메소드가 있을 수 있습니다. 예를 들어 jquery는 dataType设为jsonp만 추가하면 해결할 수 있는데, 우리가 사용해보면 왜 이런 식으로 해결될 수 있는지 생각해 본 적이 있나요? 중심 아이디어는 무엇입니까?

다음은 자세한 설명입니다. 첫 번째 아이디어는 scirpt 태그를 사용하여 교차 도메인 데이터를 도입하는 것입니다. jsonp의 과정을 처음부터 천천히 살펴보겠습니다.

가이드 1단계

쓰기b.com/b.js 내용:

코드 복사 코드는 다음과 같습니다.
alert('hello');

그런 다음 a.com/a.html 내용을 작성하세요.

코드 복사 코드는 다음과 같습니다.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿