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

저는 다들 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) {
$("<script>/script>").attr("src", src).appendTo("body")<br /> }<br /> </script>

테스트하려면 버튼 이벤트를 추가하세요.

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

$("#getOtherDomainJson").click(함수 () {
$.get('http://localhost:2701/home/somejson', 함수(데이터) {
console.log(데이터)
})
})

우선 첫 번째 브라우저에서는 URL http://localhost:2701/home/somejson에 json이 있고, 2698 웹 페이지에서 스크립트 태그를 사용하여 2701 Url을 요청하는 것도 200 OK입니다. 하지만 하단에 js 구문 오류가 보고됩니다. 스크립트 태그를 로드한 후 응답은 즉시 js로 실행됩니다. 분명히 {"Email":"zhww@outlook.com","Remark":"I came from the Far east"}는 a가 아닙니다. 법적 js 진술.

스크립트를 사용하여 외부 jsonp 가져오기

분명히 위의 json을 콜백 메소드에 넣는 것이 가장 쉬운 방법입니다. 예를 들면 다음과 같습니다.

jsonpcallback 메소드가 존재하는 경우 jsonpcallback({"Email":"zhww@outlook.com","Remark":"I came from the Far east"})은 합법적인 js 문입니다.

서버는 클라이언트의 콜백이 무엇인지 모르기 때문에 jsonpcallback에 하드코딩하는 것은 불가능하므로 클라이언트가 서버에 콜백 메소드가 무엇인지 알려줄 수 있도록 QueryString을 가져온다. 물론 QueryString의 핵심이다. 위와 같이 서버의 계약을 준수해야 합니다. "콜백"입니다.

콜백 함수 추가:

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

함수 jsonpcallback(json) {
console.log(json)
}

이전 방법의 매개변수를 약간 변경합니다.

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

$("#getJsonpByHand").click(함수 () {
CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK, 서버는 jsonpcallback({"Email":"zhww@outlook.com","Remark":"I came from the Far east"})을 반환합니다. 또한 jsonpcallback 메서드도 작성했습니다. 실행. 좋아, json을 성공적으로 얻었습니다. 맞습니다. 이것은 jsonp에 관한 것입니다.

jQuery를 사용하여 jsonp 가져오기
위 방법에서는 스크립트 태그를 삽입하고 콜백을 정의해야 하는데, 이 부분이 조금 번거롭습니다. 위의 jsonp와 마찬가지로 jQuery를 사용하여 원하는 json 데이터를 직접 얻을 수 있습니다.

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

$("#getJsonpByJquery").click(함수 () {
$.ajax({
​ ​ url: 'http://localhost:2701/home/somejsonp',
         데이터 유형: "jsonp",
         jsonp: "콜백",
성공: 함수(데이터) {
console.log(데이터)
}
})
})

얻은 결과는 위와 유사합니다.

요약

한 문장으로 스크립트 태그를 사용하면 동일 출처 정책을 우회하여 이와 같은 데이터를 얻을 수 있습니다. jsonpcallback은 페이지에 존재하는 콜백 메소드이고 매개변수는 원하는 json입니다.

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

jsonpcallback({"Email":"zhww@outlook.com","Remark":"저는 극동에서 왔습니다"})

네이티브 js 추가:

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

클릭