한눈에 이해하기: jsonp_jquery에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:57 PM

jsonp

저는 다들 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) {
$("

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7380

자바 튜토리얼

1628

Cakephp 튜토리얼

1357

라라벨 튜토리얼

1267

PHP 튜토리얼

1216

Related knowledge

JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

모바일 개발을위한 10 개의 모바일 치트 시트 Mar 05, 2025 am 12:43 AM

이 게시물은 Android, BlackBerry 및 iPhone 앱 개발을위한 유용한 치트 시트, 참조 안내서, 빠른 레시피 및 코드 스 니펫을 컴파일합니다. 개발자가 없어서는 안됩니다! 터치 제스처 참조 안내서 (PDF) Desig를위한 귀중한 자원

소스 뷰어와의 jQuery 지식을 향상시킵니다 Mar 05, 2025 am 12:54 AM

JQuery는 훌륭한 JavaScript 프레임 워크입니다. 그러나 어떤 도서관과 마찬가지로, 때로는 진행 상황을 발견하기 위해 후드 아래로 들어가야합니다. 아마도 버그를 추적하거나 jQuery가 특정 UI를 달성하는 방법에 대해 궁금한 점이 있기 때문일 것입니다.

10 JQuery Fun 및 Games 플러그인 Mar 08, 2025 am 12:42 AM

10 재미있는 jQuery 게임 플러그인 웹 사이트를보다 매력적으로 만들고 사용자 끈적함을 향상시킵니다! Flash는 여전히 캐주얼 웹 게임을 개발하기위한 최고의 소프트웨어이지만 JQuery는 놀라운 효과를 만들 수 있으며 Pure Action Flash 게임과 비교할 수는 없지만 경우에 따라 브라우저에서 예기치 않은 재미를 가질 수 있습니다. jQuery tic 발가락 게임 게임 프로그래밍의 "Hello World"에는 이제 jQuery 버전이 있습니다. 소스 코드 jQuery Crazy Word Composition 게임 이것은 반은 반은 게임이며, 단어의 맥락을 알지 못해 이상한 결과를 얻을 수 있습니다. 소스 코드 jQuery 광산 청소 게임