> 웹 프론트엔드 > JS 튜토리얼 > 한눈에 이해하기: jsonp_jquery에 대한 자세한 설명

한눈에 이해하기: jsonp_jquery에 대한 자세한 설명

WBOY
풀어 주다: 2016-05-16 15:57:23
원래의
940명이 탐색했습니다.

저는 다들 json을 많이 사용한다고 믿습니다. 저는 jsonp를 사용할 기회가 없었지만 종종 "크로스 도메인에 사용된다"는 것만 알고 그것이 무엇인지 전혀 모릅니다. 오늘 드디어 알아냈습니다. jsonp가 무엇인지 단계별로 알아봅시다.

동일출처 정책

우선, 보안상의 이유로 브라우저에는 동일 출처 정책이라는 메커니즘이 있습니다. 동일 출처 정책은 한 소스에서 로드된 문서나 스크립트가 다른 소스에서 로드된 문서의 속성을 가져오거나 설정하는 것을 방지합니다. 나는 그것이 무슨 뜻인지 모르는 것 같지만, 연습하고 나면 알게 될 것입니다.

1. 두 개의 웹페이지를 마음대로 생성

한 포트는 2698이고 다른 포트는 2701입니다. 정의에 따르면 소스는 서로 다릅니다.

2. jQuery를 사용하여 다양한 소스에서 요청 시작
포트 2698의 웹 페이지에 버튼을 추가하면 Click 이벤트가 포트 2701을 사용하여 도메인에 대한 두 개의 요청을 시작합니다.

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

$("#getOtherDomainThings").click(함수 () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", 함수(데이터) {
console.log(데이터)
})

$.get("http://localhost:2701/home/index", 함수(데이터) {
console.log(데이터)
})
})


동일 기원 정책에 따르면 그것은 분명히 비극적일 것입니다. 브라우저는 요청을 차단하고 전혀 시작하지 않습니다. (Access-Control-Allow-Origin에서는 허용되지 않음)

알겠습니다. jsonp가 이 문제를 해결하는 것으로 나타났습니다.

스크립트 태그의 도메인 간 기능
Microsoft의 CDN과 같은 CDN에 대해 알고 계시는지 모르겠습니다. 이를 사용하면 당사 웹 페이지에서 jQuery를 제공할 필요가 없으며 Microsoft 웹 사이트에서 이를 제공합니다.

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



2698 포트 웹 페이지로 돌아가면 위에서 Click 이벤트의 2701 포트 도메인에 있는 jQuery 파일에 대한 요청이 있습니다. 이번에는 스크립트 태그를 사용하여 요청합니다.
코드 복사 코드는 다음과 같습니다.



물론 200이면 OK

포트 2698을 사용하는 동일한 웹페이지는 2701 도메인에 대한 요청을 시작합니다. 스크립트에서 scr 속성을 설정하는 것은 괜찮지만 그 반대는 비극입니다. 스크립트의 도메인 간 기능을 활용하는 것이 jsonp의 기초입니다.

스크립트를 사용하여 다양한 소스에서 json 가져오기
jsonp라고 하기 때문에 목적은 여전히 ​​json임을 알 수 있으며 도메인을 넘어 획득합니다. 위의 분석을 바탕으로 생각하면 쉽습니다. js를 사용하여 스크립트 태그를 구성하고, json url을 스크립트의 scr 속성에 할당하고, 스크립트를 dom에 삽입하고, 브라우저가 이를 얻도록 합니다. 연습:

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

함수 CreateScript(src) {
$("
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿