AJAX 크로스 도 메 인 을 실현 하 는 세 가지 방법(대리,JSONP,XHR 2)

도 메 인:도 메 인 은 WIN2K 네트워크 시스템 의 보안 경계 입 니 다.우 리 는 컴퓨터 네트워크 의 가장 기본 적 인 단원 이 바로'도 메 인'이라는 것 을 알 고 있다.이것 은 WIN2K 만 의 것 이 아니 지만 활동 디 렉 터 리 는 하나 이상 의 도 메 인 을 관통 할 수 있다.독립 된 컴퓨터 에서 도 메 인 은 컴퓨터 자 체 를 말 하 는데 한 도 메 인 은 여러 개의 물리 적 위치 에 분포 할 수 있 고 하나의 물리 적 위 치 는 서로 다른 도 메 인 으로 나 눌 수 있 으 며 모든 도 메 인 은 자신의 안전 전략 과 다른 도 메 인 과 의 신뢰 관 계 를 가진다.여러 도 메 인 이 신뢰 관 계 를 통 해 연 결 된 후에 활동 디 렉 터 리 는 여러 신뢰 도 메 인 에서 공유 할 수 있 습 니 다.
작업 중 AJAX 를 사용 해 다른 도 메 인 이름 의 요청 을 요청 해 야 하지만,접근 을 거부 하 는 경우 가 발생 하 는데,이 는 안전 을 고려 해 AJAX 가 로 컬 자원 에 만 접근 할 수 있 고,도 메 인 을 넘 어 접근 할 수 없 기 때문이다.
예 를 들 어 당신 의 사이트 도 메 인 이름 은 aaa.com 입 니 다.AJAX 를 통 해 bb.com 도 메 인 이름 의 내용 을 요청 하려 면 브 라 우 저 는 안전 하지 않다 고 생각 하기 때문에 방문 을 거부 합 니 다.
크로스 필드 문제 가 발생 할 수 있 는 몇 가지 상황:

백 스테이지 에서 바 이 두 에서 해결 방안 을 찾 아 이 문 제 를 해결 했다.모두 세 가지 방안 을 정리 했다.대리,JSONP,XHR 2(XML Http Request Level 2).
첫 번 째 방법 에이전트:배경(ASP,PHP,JAVA,ASP.NET)을 통 해 다른 도 메 인 이름 의 내용 을 가 져 온 다음 에 얻 은 내용 을 전단 으로 되 돌려 주 는 방식 입 니 다.같은 도 메 인 이름 아래 있 기 때문에 도 메 인 을 뛰 어 넘 는 문제 가 발생 하지 않 습 니 다.
구현 코드:AJAX 요청 만 들 기(페이지 주소:http://localhost/ajax/proxy.html)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //          JSON  
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //            
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=   &sex= "); 

AJAX 생 성 요청.
proxy.php 코드

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents; 

php 코드 를 사용 하여 localhost:63342 의 proxy.js 파일 을 가 져 옵 니 다.
proxy.js 코드

{
name : "   ",
sex : " "
} 

proxy.html 실행 결과

이로써 프 록 시 를 사용 하여 서로 다른 도 메 인 간 의 파일 을 방문 하 였 습 니 다.
먼저 proxy.html 에서 AJAX 를 사용 하여 배경 에 있 는 proxy.php 파일 을 방문 한 다음 proxy.php 가 요청 을 받 은 후 localhost:63342 에 있 는 proxy.js 파일 을 방문 하여 proxy.js 의 내용 을 가 져 온 후 내용 을 전단 페이지 로 되 돌려 주 는 것 이 도 메 인 을 뛰 어 넘 는 기능 을 실현 합 니 다.
여러 개의 크로스 필드 파일 에 접근 하려 면 배경 proxy.phop 파일 이 접근 할 파일 의 주 소 를 매개 변수 로 알려 줄 수 있 습 니 다.
두 번 째 방법 JSONP(GET 요청 만 지원):나중에 사람들 은 JS 파일 을 호출 할 때 도 메 인 간 의 영향 을 받 지 않 고 두 번 째 방안 이 파생 된 것 을 발견 했다.
원 격 서버 에서 데 이 터 를 js 파일 에 불 러 와 클 라 이언 트 가 호출 하고 처리 할 수 있 도록 하 는 것 입 니 다.
jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=   &sex= &callbackname=jsonp_callback"; //  localhost:63342  jsonp.php
var scriptTag = document.createElement("script"); //    script  
scriptTag.setAttribute("src",url); //  script src  
document.body.appendChild(scriptTag); // script     body 
//    
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}

jsonp.php

$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //      
echo "$callbackname({name:'$name',sex:'$sex'})"; 

jsonp.html 실행 결과:
실현 원리:script 탭 을 사용 하여 원 격 js 파일 을 호출 하 는 것 은 크로스 필드 의 영향 을 받 지 않 기 때문에 script 탭 을 만 들 고 src 속성 을 통 해 원 격 파일 에 접근 할 수 있 습 니 다.
사실 이것 은 AJAX 에 속 하 지 는 않 지만 AJAX 와 유사 한 기능 을 실현 할 수 있다.
세 번 째 방법 XML HttpRequest Level 2:HTML 5 가 제공 하 는 XML HttpRequest Level 2 는 도 메 인 접근 및 기타 새로운 기능 을 실현 하 였 습 니 다.
원 격 서버 에 다음 코드 를 추가 해 야 합 니 다.

header('Access-Control-Allow-Origin:*'); //*        ，        
header('Access-Control-Allow-Methods:POST,GET'); 

이렇게 클 라 이언 트 에서 일반적인 AJAX 코드 를 사용 하면 됩 니 다.
요약:프 록 시 구현 이 가장 번 거 롭 지만 가장 광범 위 하 게 사용 되 며,AJAX 를 지원 하 는 모든 브 라 우 저 는 이런 방식 을 사용 할 수 있 습 니 다.
JSONP 는 상대 적 으로 간단 하지만 GET 방식 호출 만 지원 합 니 다.
XHR 2 는 가장 간단 하지만 HTML 5 만 지원 합 니 다.모 바 일 개발 이 라면 XHR 2 를 선택 할 수 있 습 니 다.
위 에서 말 한 것 은 편집장 이 소개 한 AJAX 가 도 메 인 을 뛰 어 넘 는 세 가지 방법(대리,JSONP,XHR 2)입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!