집 >웹 프론트엔드 >JS 튜토리얼 >Jsonp 도메인 간 원칙 및 Jquery 솔루션_javascript 기술

Jsonp 도메인 간 원칙 및 Jquery 솔루션_javascript 기술

WBOY원래의: 2016-05-16 18:27:15919검색

원칙: JSONP는 패딩이 포함된 JSON입니다. 동일 출처 정책의 제한으로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)에서만 리소스를 요청할 수 있습니다. 도메인 간 요청을 하려면 html의 스크립트 태그를 사용하여 도메인 간 요청을 하고 응답에서 실행할 스크립트 코드를 반환하면 JSON을 사용하여 javascript 개체를 직접 전달할 수 있습니다. 이 도메인 간 통신 방법을 JSONP라고 합니다.
개인적 이해:

는 클라이언트에 함수 a(data)를 동적으로 등록한 다음 함수 이름을 서버에 전달하면 서버는 a({/*json*/})를 반환하는 것입니다. 클라이언트 실행으로 클라이언트의 함수 a(data)를 호출하여 크로스 도메인을 달성합니다.

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

 
< ;html xmlns="http://www.worg/xhtml" > 
 
 Jsonp 테스트<br><script src="http://%20ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"><script type="text/javascript" > <BR> 함수 jsonpCallback(결과) <BR>{ <BR>$.each(result.items, function(i,item){ <BR>$("<img/>").attr(" src", item.media.m).appendTo("body"); <BR>if ( i == 3 ) return false; <BR>}); <BR>} <BR></script> <BR></head> ; <BR><body> <BR><script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode =any&format=json&jsoncallback= jsonpCallback"></script> <BR></body> <BR></html> <BR></script>

jQuery 솔루션:

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

< ;head>
Jsonp 테스트