프로젝트 개발에서 크로스 도메인 문제가 발생하면 일반적으로 JSONP를 통해 해결됩니다. 그러나 JSONP는 무엇이며 구현 원칙은 무엇입니까? 프로젝트의 자유 시간 동안 신중하게 공부할 수 있습니다.
1. JSONP 란 무엇입니까?
JSONP를 이해하려면 JSON을 언급해야합니다. JSON은 무엇입니까?
JSON은 JavaScript의 객체 문자 문자 표기법의 하위 집합입니다. JSON은 JavaScript의 하위 집합이므로 MUSS 나 소란없이 언어로 사용할 수 있습니다.
JSONP (Padding with Padding)는 서버 측의 스크립트 태그를 클라이언트로 돌아갈 수 있도록하는 비공식 프로토콜이며, JavaScript 콜백 형식을 통해 크로스 도메인 액세스가 달성됩니다 (JSONP의 간단한 구현 일뿐).
2. JSONP의 사용은 무엇입니까?
동일한 원산지 정책의 한계로 인해 Xmlhttprequest는 현재 소스의 리소스 (도메인 이름, 프로토콜, 포트) 만 허용합니다. 크로스 도메인 요청을 구현하기 위해 스크립트 태그를 통해 크로스 도메인 요청을 구현 한 다음 서버에서 JSON 데이터를 출력하고 콜백 기능을 실행하여 크로스 도메인 데이터 요청을 해결할 수 있습니다.
JSONP의 세대
1. 우리 모두가 알고 있듯이 Ajax 요청 리소스는 정적 리소스, 동적 페이지 또는 웹 서비스에 관계없이 동일한 도메인에 의해 제한됩니다.
2. 동시에, 우리는 웹 페이지에서 JS 파일을 호출 할 때 크로스 도메인의 영향을받지 않는다는 것을 발견했습니다 (그뿐만 아니라 'SRC'속성이있는 모든 태그에는 <cript>, <Img>, <Iframe> 등과 같은 크로스 도메인 기능이 있음을 발견했습니다.
3. 현재 웹 (ActiveX Controls, Server Agent, HTML5 WebSockets 등)을 통해 도메인의 데이터에 액세스하려면 하나의 가능성이 있습니다. 즉, 서버는 클라이언트가 클라이언트가 호출 및 처리 할 수 있도록 JS 형식 파일에 데이터를로드 할 가능성이 있습니다.
4. 데이터 전송. 우리는 JSON이라는 순수한 문자 데이터 형식이 복잡한 데이터 구조를 간결하게 설명 할 수 있으며 JS에 의해 기본적으로 지원된다는 것을 알고 있습니다. 클라이언트 에서이 형식으로 데이터를 쉽게 처리 할 수 있습니다.
5. 솔루션은 한눈에 분명합니다. 웹 쪽은 Cross-Domain 서버에서 동적으로 생성 된 JS 파일을 호출 스크립트와 같은 방식으로 호출합니다. 서버가 JS 파일을 동적으로 생성하려는 이유는 클라이언트의 콜백 함수 이름을 얻고 클라이언트가 요구하는 데이터를 JSON (또는 Pure String) 형식으로 전달하는 것입니다.
6. 클라이언트가 JS 파일을 성공적으로 호출 한 후 콜백 함수의 매개 변수가 얻어집니다. 나머지는 데이터 처리입니다. 이 방법은 Ajax와 매우 유사 해 보이지만 동일하지는 않습니다 (jQuery는 JSONP와 AJAX를 함께 캡슐화하며 이해하지 못하면 혼동 될 것입니다).
7. 클라이언트가 데이터를 사용하도록 촉진하기 위해 비공식 전송 프로토콜이 점차 형성되었습니다. 사람들은 그것을 JSONP라고 부릅니다. 이 프로토콜의 핵심 사항 중 하나는 사용자가 콜백 매개 변수를 서버로 전달할 수 있도록하는 것입니다. 서버가 데이터를 반환하면 콜백 매개 변수를 기능 이름으로 사용하여 JSON 데이터를 래핑하여 클라이언트가 자체 함수를 사용자 정의하여 반환 데이터를 자동으로 처리 할 수 있습니다.
좋아, JSONP를 이해하는지 모르겠다. 그렇지 않다면 요약하겠습니다. 당신이 가지고 있지 않다면, 나를 때리지 마십시오.
실제로 원칙은 클라이언트가 링크를 요청하고 필요한 매개 변수를 추가한다는 것입니다. 콜백은 JSONP 요청임을 의미합니다 (프론트 엔드와 백엔드는 자체적으로 통합 할 수 있음). 배경은 요청 링크를 구문 분석하고 JSONP 요청임을 알게됩니다. 그런 다음 호출 메소드를 생성하고 요청 매개 변수에 따라 문자열 (JSON 또는 순수한 문자열)을 동적으로 생성합니다. 이러한 방식으로 클라이언트는 데이터에 액세스하고 후속 처리를 수행 할 수 있습니다.
코드를 추가하지 않는 것이 내 스타일이 아니며 코드를 추가하고 있습니다. .
함수 테스트 (data) {console.log (data)} var url = "http://www.x.com/test?a=1&callback=test"// 1의 값을 전달하고 1의 값을 x.com/test로 전달하고, 호출되는 기능 이름이 "테스트"가 "테스트"라고 말하며, 메소드가 통과한다는 것을 알 수 있습니다. 배경 처리는 다음 (데이터 가상) 테스트 ( "AAAAA") 테스트 ({a : 1, b : 2}) // 그런 다음 프론트 엔드는 스크립트 태그를 통해 액세스하고 실행합니다. document.getElementsByTagName ( 'head') [0] .AppendChild (스크립트); // 그러면 JSONP의 구현 원리 인 페이지 테스트 방법이 호출됩니다.jQuery에서 JSONP의 현실에 대해
$ .ajax ({type : "get", url : "http : //xdcn/asych/adv.html? 8 & callback =?" "Post", "Post", // JSONP는 요청 유형을 postdatatype으로 설정하더라도 "jsonp", // jQuery에게 JSONP 데이터라고 말하더라도 JSData를로드하려면 스크립트 태그를 생성해야합니다. {a : "1"},/*성공 : // methodute가 성공할 수있는 (data) $ ( "body"). Append (data);},*/error : function (xmlhttprequest, textstatus, errorthrown) {//alert(errorthrown);} }).done(function(data (data )) {$("body").append (data);});위의 코드와 댓글을 읽은 후 모든 사람들이 그것을 이해한다고 생각합니다. jQuery는 JSONP를 Ajax로 캡슐화하지만 본질적으로 다릅니다.
Ajax의 핵심은 xmlhttprequest를 통해이 페이지 이외의 내용을 얻는 것입니다. JSONP의 핵심은 <Script> 태그를 동적으로 추가하여 서버가 제공 한 JS 스크립트를 호출하는 것입니다.
따라서 Ajax와 JSONP의 차이점은 그것이 교차 도메인 여부가 아닙니다. AJAX는 서버 측 프록시를 통해 크로스 도메인을 달성 할 수 있으며 JSONP 자체는 동일한 도메인에서 데이터 획득을 배제하지 않습니다.
위에서 언급했듯이 JSONP 및 AJAX의 데이터 형식은 JSON 일 필요는 없지만 순수한 문자열 일 수도 있습니다.
요컨대, JSONP는 Ajax의 하위 집합이 아니며 jQuery가 JSONP를 Ajax로 캡슐화하더라도 이것을 변경할 수는 없습니다.
위의 것은 JS JSOP의 크로스 도메인 요청 예제에 대한 자세한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!