jQuery 크로스 도 메 인 방문 문제 해결 방법

시간 이 너무 빨리 지나 가 고 js 전장 으로 끌 려 갔 을 때 크로스 도 메 인 문제 라 는 흉터 가 또 아 팠 습 니 다.다행히 jquery 의 도움 으로 크로스 도 메 인 문 제 는 그리 까다 롭 지 않 은 것 같 습 니 다.이번에 도 이 기 회 를 빌려 크로스 도 메 인 문제 에 대해 꼬치 꼬치 캐 묻 고 실제 개발 프로젝트 와 결합 하여 관련 자 료 를 찾 아 보 았 습 니 다.크로스 도 메 인 문 제 를 해결 한 셈 입 니 다.메모 할 필요 가 있 습 니 다.크로스 도 메 인 보안 제한 은 모두 브 라 우 저 에서 말 하 는 것 을 말 합 니 다.서버 엔 드 는 크로스 도 메 인 보안 제한 이 존재 하지 않 기 때문에 본 서버 엔 드 를 통 해 httpclient 와 유사 한 방식 으로'크로스 도 메 인 접근'작업 을 완성 합 니 다.그 다음 에 브 라 우 저 에서 AJAX 로 이 컴퓨터 서버 의'크로스 도 메 인 방문'에 대응 하 는 url 을 가 져 와 간접 적 으로 크로스 도 메 인 방문 을 완성 하 는 것 도 가능 합 니 다.그러나 개 발 량 이 비교적 많 지만 제한 도 가장 적 습 니 다.많은 widget 오픈 플랫폼 server 엔 드(예 를 들 어 sohu 블 로그 오픈 플랫폼)는 사실 그렇게 되 었 습 니 다.이번 토론 범위 에 있 지 않 습 니 다.토론 하고 자 하 는 것 은 브 라 우 저 엔 드 의 진정한 크로스 도 메 인 방문 입 니 다.추천 하 는 것 은 현재 jQuery$.ajax()가 get 방식 을 지원 하 는 크로스 도 메 인 입 니 다.이것 은 jsonp 방식 으로 이 루어 진 것 입 니 다.실제 사례:

 
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")}; 

$.ajax({ 
async:false, 
url: http://   dns/document!searchJSONResult.action, 
type: "GET", 
dataType: 'jsonp', 
jsonp: 'jsoncallback', 
data: qsData, 
timeout: 5000, 
beforeSend: function(){ 
//jsonp          .     dataType     jsonp  ,     ajax    
}, 
success: function (json) {//   jquery      callback  ,           json   ,       callback   
if(json.actionErrors.length!=0){ 
alert(json.actionErrors); 
} 
genDynamicContent(qsData,type,json); 
}, 
complete: function(XMLHttpRequest, textStatus){ 
$.unblockUI({ fadeOut: 10 }); 
}, 
error: function(xhr){ 
//jsonp          .     dataType     jsonp  ,     ajax    
//       
alert("    (          .)"); 
} 
}); 

주의:$.getJSON(http:/크로스 도 메 인 dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?", function(json){if(json.속성 명=값){/실행 코드};이러한 방식 은 사실 상례$.ajax({..})api 의 고급 패키지 입 니 다.일부$.ajax api 밑 에 있 는 매개 변 수 는 봉인 되 어 보이 지 않 습 니 다.그러면 jquery 는 다음 과 같은 url get 요청 http://도 메 인 을 뛰 어 넘 는 dns/document 으로 조립 됩 니 다!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=12368282192549&searchWord=%E7%94%A8%E4%BE%8B&currentUserId=5351&condition Bean.pageSize=15 응답 단(http://도 메 인 을 뛰 어 넘 는 dns/document!searchJSON Result.action),jsoncallback=request.getParameter("jsoncallback")를 통 해 jquery 엔 드 에서 리 셋 할 js function name:jsonp 1236827957501 을 얻 은 다음 response 의 내용 은 Script 태그:"jsonp 123682727957501("+요청 매개 변수 에 따라 생 성 된 json 배열+")";jquery 는 리 셋 방법 을 통 해 이 js tag:jsonp 1236827957501(json 배열)을 동적 으로 불 러 옵 니 다.이렇게 하면 크로스 필드 데이터 교환 의 목적 을 달성 할 수 있 습 니 다.jsonp 의 가장 기본 적 인 원 리 는 동적 으로탭 을 추가 하 는 것 입 니 다.script 태그 의 src 속성 은 크로스 필드 의 제한 이 없습니다.이렇게 말 하면 이러한 크로스 도 메 인 방식 은 ajax XmlHttpRequest 프로 토 콜 과 무관 합 니 다.이렇게 하면'jQuery AJAX 크로스 도 메 인 문제'는 가짜 명제 가 됩 니 다.jquery$.ajax 방법 명 은 사람 을 오도 한 혐의 가 있 습 니 다.dataType:'jsonp'로 설정 하면 이$.ajax 방법 은 ajax XmlHttpRequest 와 아무런 관계 가 없습니다.대신 JSONP 프로 토 콜 입 니 다.JSONP 는 비공 식 프로 토 콜 입 니 다.서버 에서 Script tags 를 클 라 이언 트 로 통합 하여 자바 script callback 형식 으로 도 메 인 을 넘 어 JSONP 즉 JSON with Padding 에 접근 할 수 있 습 니 다.같은 소스 정책 의 제한 으로 인해 XmlHttpRequest 는 현재 원본(도 메 인 이름,프로 토 콜,포트)의 자원 만 요청 할 수 있 습 니 다.크로스 도 메 인 요청 을 하려 면 html 의 script 표 시 를 사용 하여 크로스 도 메 인 요청 을 하고 응답 에서 실행 할 script 코드 를 되 돌려 줄 수 있 습 니 다.그 중에서 JSON 을 사용 하여 자바 script 대상 을 직접 전달 할 수 있 습 니 다.이런 크로스 오 버 통신 방식 을 JSONP 라 고 한다.jsonCallback 함수 jsonp 123682797501(...):브 라 우 저 클 라 이언 트 가 등록 한 것 입 니 다.크로스 도 메 인 서버 의 json 데 이 터 를 가 져 온 후 리 셋 함수 Jsonp 원리:먼저 클 라 이언 트 에 callback(예 를 들 어'jsoncallback')을 등록 한 다음 에 callback 의 이름(예 를 들 어 jsonp 1236827957501)을 서버 에 전달 합 니 다.이 때 서버 씨 는 json 데이터 가 됩 니 다.그 다음 에 자 바스 크 립 트 문법 으로 function 를 생 성 합 니 다.function 이름 은 전 달 된 매개 변수 인'jsoncallback'의 값 인 jsonp 1236827957501 입 니 다.마지막 으로 json 데 이 터 를 직접 참여 하 는 방식 으로 function 에 놓 으 면 js 문법 문 서 를 생 성하 여 클 라 이언 트 에 게 되 돌려 줍 니 다.클 라 이언 트 브 라 우 저,script 탭 을 분석 하고 되 돌아 오 는 javascript 문 서 를 실행 합 니 다.이때 javascript 문서 데 이 터 를 매개 변수 로 합 니 다.클 라 이언 트 가 미리 정의 한 callback 함수(예 를 들 어 jquery$.ajax()방법 으로 포 장 된 success:function(json)에 들 어 왔 습 니 다.(Script Injection)행 위 를 주입 하기 때문에 일정한 안전 위험 도 있 습 니 다.jquery 는 post 방식 으로 도 메 인 을 뛰 어 넘 는 것 을 지원 하지 않 습 니 다.왜 일 까요?post+동적 으로 iframe 을 생 성 하 는 것 은 post 크로스 필드 의 목적 을 달성 할 수 있 습 니 다(어떤 js 소 는 이렇게 jquery 1.2.5 패 치 를 치 는 것).그러나 이렇게 하 는 것 은 극단 적 인 방식 이 므 로 사용 하 는 것 을 권장 하지 않 습 니 다.get 방식 의 크로스 도 메 인 은 합 법 적 이 고 post 방식 은 안전 측면 에서 합 법 적 이지 않다 고 할 수 있 습 니 다.어 쩔 수 없 이 검 이 빗 나 가지 않도록 하 세 요.client 단 크로스 도 메 인 방문 의 수요 도 w3c 의 주 의 를 끌 것 같 습 니 다.자 료 를 보면 html 5 WebSocket 표준 은 크로스 도 메 인 데이터 교환 을 지원 하고 앞으로 선택 할 수 있 는 크로스 도 메 인 데이터 교환 솔 루 션 이 될 것 입 니 다.