javascript_javascript 기술의 도메인 간 구현 방법 요약
- WBOY원래의
- 2016-05-16 15:52:481217검색
동일 출처 정책의 제한으로 인해 XMLHttpRequest는 현재 소스(도메인 이름, 프로토콜 및 포트 포함)에서만 리소스를 요청할 수 있습니다.
json과 jsonp의 차이점:
JSON은 데이터 교환 형식인 반면, JSONP는 개발자가 만든 비공식 도메인 간 데이터 상호 작용 프로토콜입니다.
script 태그는 종종 다른 도메인에서 리소스를 로드하는 데 사용되며 동일 출처 정책을 우회할 수 있습니다. (src 속성을 가진 사람은 누구나 외부 파일을 얻을 수 있습니다.)
요청된 원격 데이터 자체가 실행 가능한 js인 경우 해당 js가 실행됩니다(eval과 동일).
방법 1:
스크립트 태그를 사용하여 요청하세요(e4fbd2bee50c2b0219b403cdc1782e452cacc6d41bbb37262a98f745aa00fbf0)
스크립트 태그를 사용하여 요청하기 전에 먼저 콜백 함수
를 선언하세요.
<script>
function 回调函数名（data数据）{ 。。。。 }
</script>
<script src="http://....jsp?callback=回调函数名"></script>
JSON을 사용하여 자바스크립트 개체를 전송하는 것이 가장 간단한 방법입니다. 도메인 간 통신 방법을 JSONP라고 합니다.
원격 서버 조각 함께 문자열:
콜백 함수 이름({"name1":"data1","name2","data2"})
이러한 종류의 json 데이터는 백그라운드에서 결합되어 매개변수를 전달하는 콜백 함수를 사용하여 클라이언트에 반환됩니다
(직접 호출할 수 있으며, 이는 획득한 문자열을 평가 처리하는 것과 동일합니다)
예: function databack(data){ Alert(data.name1) } // "data1"을 출력하고 표시합니다.
방법 2:
jquery로 외부 로딩 방식을 구현하는 것이 더 간단합니다(ajax의 비동기 요청 방식과 동일)
$.ajax({
type : "get",
dataType:"json",
success : function(data){ alert(data.name1) };
})
또는 약어
var url = "http://.....jsp?callback=?"; // jquery의 콜백 값은 임의적일 수 있습니다.
jquery가 처리된 후 성공 콜백 함수를 사용하여 데이터를 받습니다.
$.getJSON( url, function(data){ 경고(data.name1) });
방법 3:
Ajax 크로스 도메인 서버 프록시
동일한 출처의 백그라운드에서 프록시 프로그램(proxy.jsp...)을 설정하고 서버 측에서 외부 도메인의 서버와 상호 작용합니다.
jquery 프론트엔드 데이터 전송:
예:
$.get(
'http://。。。.jsp', // 代理程序地址
{
name1 : "data1",
name2 : "data2"
},
function(data){
if(data == 1) alert('发送成功！');
}
);
백그라운드 데이터 처리:
String data1 = request.getParameter("name1");
........
// 此处的url为另一域下的地址并带有参数
String url = "http://.....com/.../sss.jsp?" + "name1=" + data1+ "name2=" +
data2;
// 跳转到另一个域进行数据的处理并返回json格式的数据
request.getRequestDispatcher(url).forward(request,response);
방법 4:
iframe 태그의 src 속성을 이용해 크로스 도메인 접속을 수행하고, 얻은 값을 현재 iframe에 저장한 후
같은 페이지에서 iframe 본문의 값을 가져옵니다.
<body>
<div id="show"></div>
<iframe id="frame" style="display: none;"></iframe>
</body>
<script>
$("#frame").attr("src", "路径?time=" + new Date().getTime()).load(function(){
// 获取iframe标签的值并进行获取，显示到页面
$("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()
+ " ]");
});
</script>
방법 5:
HTML5의 Websocket은 도메인 간 액세스를 제공할 수 있습니다.
웹소켓 객체 생성:
var ws = new WebSocket(url);
처리되는 주요 이벤트 유형은 (onopen, onclose, onmessage, onerror)입니다.
예:
ws.onopen = function(){
console.log("open")；
// 向后台发送数据
ws.send("open");
}
배경은 java, php, nodejs 등이 될 수 있습니다. 데이터 처리를 위해 time onmessage 이벤트를 사용하여 반환된 값에 대한 프런트엔드 처리를 수행합니다.
ws.onmessage = function(eve){
console.log(eve.data);
}