JSONP 를 통 해 완벽 한 크로스 오 버 구현

JSONP 를 통 해 완벽 한 크로스 오 버 구현
삼 수 청 2010-06-11 20:17:47
예전 에 제 가 블 로그 에서 JSONP, 예 를 들 어 제 워드 프레스 날씨 플러그 인 는 JSONP 를 통 해 호출 된 날씨 데 이 터 였 습 니 다. 오늘 은 JSONP 를 통 해 크로스 오 버 를 실현 하 는 응용 을 말씀 드 리 겠 습 니 다.
JSONP 이 뭐야?
JSONP 즉 JSON with Padding.같은 소스 정책 의 제한 으로 인해 XmlHttpRequest 는 현재 원본 (도 메 인 이름, 프로 토 콜, 포트) 의 자원 만 요청 할 수 있 습 니 다.크로스 도 메 인 요청 을 하려 면 html 의 script 표 시 를 사용 하여 크로스 도 메 인 요청 을 하고 응답 에서 실행 할 script 코드 를 되 돌려 줄 수 있 습 니 다. 그 중에서 JSON 전달 javascript 대상 을 직접 사용 할 수 있 습 니 다.이런 크로스 오 버 통신 방식 을 JSONP 라 고 한다.
위의 설명 에 대해 우 리 는 간단하게 이렇게 이해 할 수 있다. JSONP 는 JavaScript 파일 을 통 해 크로스 도 메 인 통신 을 할 수 있 는 방식 이다. 예 를 들 어 현재 각 사이트 에서 유행 하고 있 는 검색 알림 소 개 구름 입력 법 주의: JSONP 서버 엔 드 코드 는 안전 조 치 를 충분히 취해 야 한다.
가장 쉬 운 JSONP.

var JSONP = document.createElement("script") ;
//FF:onload IE:onreadystatechange
JSONP.onload = JSONP.onreadystatechange = function(){
	//onreadystatechange， IE
	if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
		alert($("#demo").html());
		JSONP.onload = JSONP.onreadystatechange = null//   ，  IE memory leaks
	}
}
JSONP.type = "text/javascript";
JSONP.src = "http://a.pojaaimg.cn/2010/js/jquery.js";
// head    js  
document.getElementsByTagName("head")[0].appendChild(JSONP);

간단 한 설명: 저 희 는 script 을 만 든 다음 에 src 등 속성 을 지정 한 다음 에 head 에 삽입 하여 제안 을 수행 합 니 다. onload, onready statechange 는 src 할당 전에 js 를 너무 빨리 불 러 와 서 onload, onready statechange 에 할당 하지 않 는 것 을 방지 합 니 다 Image 대상 은 IE 에서 이러한 현상 을 가지 고 있 습 니 다..
JSONP 실례
우 리 는 먼저 JSONP 가 돌아 온 데 이 터 를 실행 하 는 함 수 를 정의 한 다음 에 JSONP 의 src 를 통 해 이 함 수 를 백 엔 드 에 전송 하여 처리 하고 실행 가능 한 함 수 를 되 돌려 줄 수 있 습 니 다.예 를 들 어 다음 코드:

function jsonpHandle(a){
    alert(a);
}
var JSONP = document.createElement("script") ;
JSONP.type = "text/javascript";
JSONP.src = "http://js8.in/jsonp.php?callback=jsonpHandle";
// head    js  
document.getElementsByTagName("head")[0].appendChild(JSONP);

배경 jsonp. php 코드:

echo $_GET["callback"]."('hello,world')";

성명: 글 은 오리지널 글 이 라 고 밝 히 지 않 았 습 니 다. 본 고 는 링크 http://js8.in/548.html 입 니 다.