js_javascript 기술의 교차 도메인 방법 예에 대한 자세한 설명-JS 튜토리얼-php.cn

js_javascript 기술의 교차 도메인 방법 예에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:53:23

원래의

1150명이 탐색했습니다.

이 기사의 예에서는 js의 크로스 도메인 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

동일 출처 정책의 제한으로 인해 XMLHttpRequest는 현재 소스(도메인 이름, 프로토콜 및 포트 포함)에서만 리소스를 요청할 수 있습니다.

json과 jsonp의 차이점:

JSON은 데이터 교환 형식인 반면, JSONP는 개발자가 만든 비공식 도메인 간 데이터 교환 프로토콜입니다.

script 태그는 종종 다른 도메인에서 리소스를 로드하는 데 사용되며 동일 출처 정책을 우회할 수 있습니다. (src 속성을 가진 사람은 누구나 외부 파일을 얻을 수 있습니다.)
요청된 원격 데이터 자체가 실행 가능한 js인 경우 해당 js가 실행됩니다(eval과 동일).

방법 1:

스크립트 태그를 사용하여 요청하세요()
스크립트 태그를 사용하여 요청하기 전에 먼저 콜백 함수

를 선언하세요.

<script>
function 回调函数名(data数据){ 。。。。 }
</script>
<script src="http://....jsp&#63;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&#63;callback=&#63;";
// 在jquery中此处的callback值可以为任意，
// 因为jquery进行处理后都是利用success回调函数进行数据的接受；
$.getJSON( url, function(data){ alert(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&#63;" +　"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", "路径&#63;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);
}

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.