장면
a.com과 b.com이라는 서로 다른 도메인 이름을 가진 두 개의 서버가 있는 경우 b.com/b_return_js.php 인터페이스에서 일부 데이터를 얻을 수 있습니다. 물론 b.com 페이지라면 ajax를 이용하여 이 인터페이스를 직접 요청할 수 있지만, a.com 페이지에서 요청한다면 어떨까요?
b_return_js.php의 인터페이스 코드:
echo 'var userdata = '.json_encode($a).';'; //일반적으로 b.com의 사이트 내 요청인 경우 json_encode($a)가 직접 반환되지만, src 속성을 사용하여 도메인 간을 달성하려면 여기에서 이 값을 js 변수에 할당하여 스크립트 태그가 로드된 후 페이지에서 이 데이터를 얻고 사용할 수 있도록 해야 합니다.
간단한 구현
a.com 아래 페이지로 직접 이동하는 간단한 방법이 있습니다
이러한 방식으로 이 인터페이스에서 반환된 데이터는 a.com 페이지에서 직접 얻을 수 있습니다.
그러나 여기에는 결함이 있습니다. 이 데이터는 페이지가 로드될 때만 얻을 수 있습니다. 언제든지 새로운 인터페이스 데이터를 얻기 위해 ajax를 사용하려는 경우, 여기에서 버튼을 클릭하는 것은 적합하지 않습니다. 인터페이스 부분 데이터 새로 고침, 이 방법은 다소 부적절합니다.
Ajax와 유사한 구현
사실 위에서 언급한 ajax-like를 구현한다는 아이디어는 ajax 조건이 트리거될 때 위의 태그를 다시 생성하여 인터페이스에서 다시 데이터를 얻는 것이지만 실제로는 여전히 그렇습니다. 구현하기가 약간 어렵습니다(적어도 저에게는 많은 노력이 필요했습니다).
업로드 코드:
a.com/scriptSrc.php 페이지 아래에 버튼이 있다고 가정해보세요
클릭할 때마다 ajax 구현 코드와 유사한 b.com/b_return_js.php 인터페이스에서 데이터를 얻습니다.
getData() 함수
{
console.log(사용자 데이터);
}
$('#ajax_request_from_b').click(function(){
//이 스크립트 태그는 매번 다시 로드해야 하므로 크로스 도메인 서버에서 데이터를 얻을 수 있도록 매번 새 스크립트 태그를 다시 생성해야 합니다
If(ele && ele.parentNode)
{
//ele.parentNode.removeChild(ele); //이런 종류의 삭제는 메모리에서 ele을 완전히 삭제할 수 없으며 DOM에서의 해당 위치만 제거합니다.
for (ele의 var 속성) {
삭제 ~ ele[속성] 삭제;
}
}
ele = document.createElement('script'); //새로운 요소입니다
CreateScript();
Document.getElementsByTagName("head")[0].appendChild(ele);
ele.onload = function(){getData()}; // 스크립트 요소가 로드된 후 사용자 정보를 얻을 수 있습니다.
});