Ajax jsonp 크로스 도 메 인 요청 실현 방법

무엇이 크로스 필드 입 니까?
쉽게 말 하면 보안 을 고려 하여 페이지 의 자바 스 크 립 트 는 다른 서버 의 데이터,즉'동원 정책'에 접근 할 수 없습니다.한편,크로스 도 메 인 은 특정한 수단 을 통 해 동원 전략 제한 을 돌아 서로 다른 서버 간 통신 효 과 를 실현 하 는 것 이다.
구체 적 인 전략 제한 상황 은 다음 표를 볼 수 있 습 니 다.
 
URL
설명 하 다.
통신 허용
http://www.a.com/a.js
http://www.a.com/b.js
같은 도 메 인 이름 아래
허락 하 다.
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
같은 도 메 인 이름 아래 다른 폴 더
허락 하 다.
http://www.a.com:8000/a.js
http://www.a.com/b.js
같은 도 메 인 이름,다른 포트
불허
http://www.a.com/a.js
https://www.a.com/b.js
같은 도 메 인 이름,다른 프로 토 콜
불허
http://www.a.com/a.js
http://127.0.0.100/b.js
도 메 인 이름과 도 메 인 이름 대응 ip
불허
http://www.a.com/a.js
http://script.a.com/b.js
주 도 메 인 은 같 고,자 도 메 인 은 다르다.
불허
http://www.a.com/a.js
http://a.com/b.js
같은 도 메 인 이름,다른 2 급 도 메 인 이름(같은 위)
불허
http://www.a.com/a.js
http://www.b.com/b.js
다른 도 메 인 이름
불허
JSONP 가 뭐 예요?
JSON(JavaScript Object Notation)은 경량급 데이터 교환 형식 이 고 JSONP(JSON with Padding)는 JSON 의'사용 모드'로 데이터 의 크로스 필드 를 통 해 얻 을 수 있다.
JSONP 크로스 필드 의 원리
같은 소스 정책 에서 한 서버 아래 페이지 에 서 는 서버 이외 의 데 이 터 를 가 져 올 수 없 지만 img,iframe,script 등 탭 은 예외 입 니 다.이 탭 들 은 src 속성 을 통 해 다른 서버 에 데 이 터 를 요청 할 수 있 습 니 다.script 태그 의 개방 정책 을 이용 하여 우 리 는 도 메 인 간 요청 데 이 터 를 실현 할 수 있 습 니 다.물론 서버 의 협조 도 필요 합 니 다.우리 가 정상적으로 JSON 데 이 터 를 요청 할 때 서버 는 JSON 형식의 데 이 터 를 되 돌려 주 고 JSONP 모드 로 데 이 터 를 요청 할 때 서버 는 실행 가능 한 자바 스 크 립 트 코드 를 되 돌려 줍 니 다.
크로스 필드:js 는 같은 소스 제한 이 있 습 니 다.쉽게 말 하면 소스 가 다 르 면 서로 상호작용 을 할 수 없습니다.그러면 소스 가 다르다 고 할 수 있 습 니까?예 를 들 어 브 라 우 저 방문-->서버 A->페이지 A-페이지 A 의 js 스 크 립 트 는 서버 A 의 자원(같은 도 메 인 이름과 포트,그 밖 에 도 메 인 이름과 대응 하 는 ip 도 같은 소스 가 아 닙 니 다.도 메 인 이름 이나 도 메 인 ip)에 만 접근 할 수 있 습 니 다.
이상 은 js 의 크로스 도 메 인 문제 입 니 다.그러나 여기 서 주의해 야 할 것 은 서버 A 는 크로스 도 메 인 문제 가 없습니다.이것 은 js 만 이 문제 가 존재 합 니 다.즉,페이지 A 에서 js-->서버 A->크로스 도 메 인 자원 입 니 다.이 경 로 는 가능 합 니 다.페이지 A 중의 js->크로스 도 메 인 자원 만 있 으 면 이 경 로 는 안 됩 니 다.
그리고 솔 루 션 중의 jsonp 를 말씀 드 리 겠 습 니 다.이것 은 형식 이 아니 라 해결 방안 입 니 다.
jsonp 의 원리:js 는 동원 제한 이 있 지만 js 파일 을 도입 할 때 이런 제한 이 없다.즉,

<script type="text/javascript" src="xxx/xxxx.js"></script>

그 중에서 src 속성 이 js 파일 을 도입 할 때 같은 소스 제한 이 없습니다.이때 역외 자원 을 도입 할 수 있 는.jsonp 의 원 리 는 바로 여기에 있 습 니 다.그 줄 의 js 도입 문 구 를 동적 으로 만 들 고 src 속성 을 통 해 역외 자원 에 접근 할 수 있 습 니 다.역외 자원 서버 는 js 구문 으로 분 석 될 수 있 는 문자열 을 되 돌려 주면 결 과 를 되 돌려 주 는 목적 을 달성 할 수 있 습 니 다.예 를 들 어:

callback({"key":"value",...}) 

그 중에서 콜 백 은 미리 약속 한 이름 입 니 다.녹색 글자 부분 은 json 문자열 로 되 돌아 간 다음 에 위 와 같은 형식 으로 맞 추 면 됩 니 다.이렇게 페이지 에 있 는 js 는 서버 에서 이 연결 문자열 을 받 은 후에 로 컬 콜 백 이라는 js 방법 을 직접 실행 합 니 다.이것 이 바로 콜 백 이라는 사전 약속 이 필요 한 이유 입 니 다.페이지 측 에 이 js 방법 이 존재 하도록 확보 해 야 합 니 다.이 방법 으로 들 어 오 는 매개 변 수 는 서버 측의 반환 값 입 니 다.
ajax 는 jsonp 를 지원 하기 때문에 상기 번 거 로 운 일 들 은 모두 우 리 를 대신 해서 할 것 입 니 다.쓰 는 방법 은 다음 과 같 습 니 다.

$.ajax({
     type: 'GET',
     url: "http://127.0.0.1:8080/xxx/xxx",
     async: false,
     dataType: "jsonp",
     jsonp: "callback",
     success: function(result){
       .....
     },
     timeout:3000 
  });

빨 간 글자 부분 표 지 는 jsonp 방식 으로 호출 합 니 다.실제로 이 때 는 전통 적 인 의미 의 ajax 의 get 요청 이 아 닙 니 다.그의 실제 실현 방식 은 바로 우리 가 앞에서 말 한 것 과 같 습 니 다.그 중에서 빨 간 글자 부분의 callback 은 서버 측 과 의사 소통 을 해 야 하 는 부분 입 니 다.이 요청 은 서버 측 에 보 냅 니 다.실제로 다음 과 같 습 니 다.
http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx
서버 쪽 에 서 는 콜백 을 통 해 값 을 가 져 와 야 합 니 다(request.getParameter("callback").즉,뒤의 jquery xxxx 등 자동 으로 생 성 된 값 을 가 져 와 야 합 니 다.이 값 은 실제 적 으로 우리 가 요청 한 ajax 방법 에 대응 하 는 success 리 셋 방법 입 니 다.서버 쪽 에서 되 돌아 오 면

jqueryxxxx({"ret":"ok"})

페이지 에서 success 방법 을 자동 으로 실행 하고{"ret":"ok"}을 success 방법의 인자 result 에 전달 합 니 다.
이상 은 ajax 가 jsonp 방식 으로 도 메 인 방문 을 실현 하 는 과정 입 니 다.기본적으로 우리 가 추가 작업 을 하지 않 아 도 되 고 모두 봉인 되 어 있 음 을 알 수 있 습 니 다.
ps:jQuery 에서 JSONP 를 통 해 도 메 인 을 넘 어 데 이 터 를 얻 는 방법
첫 번 째 방법 은 ajax 함수 에서 dataType 을'jsonp'로 설정 하 는 것 입 니 다. 

$.ajax({
    dataType: 'jsonp',
    url: 'http://www.a.com/user?id=123',
    success: function(data){
        //  data  
    }
});

두 번 째 방법 은 getJSON 을 이용 하여 이 루어 지 는 것 입 니 다.주소 에 callback=?매개 변수: 

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
    //  data  
});

getScript 방법 도 간단하게 사용 할 수 있 습 니 다.

//           foo  
function foo(data){
    //  data  
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');

JSONP 의 응용
JSONP 는 오픈 API 에서 매우 중요 한 역할 을 할 수 있 습 니 다.오픈 API 는 개발 자 자신의 응용 에 사용 되 는 것 입 니 다.많은 응용 은 시 나 웨 이 보 의 서버 가 아 닌 개발 자의 서버 에 있 기 때문에 크로스 도 메 인 요청 데 이 터 는 개발 자 들 이 해결 해 야 할 큰 문제 가 되 었 습 니 다.많은 오픈 플랫폼 은 JSONP 에 대한 지원 을 실현 해 야 합 니 다.이 점 에서 시 나 웨 이 보 오픈 플랫폼 은 매우 잘 만 들 었 다.