javascript_javascript 기술의 도메인 간 구현 방법 요약-JS 튜토리얼-php.cn

javascript_javascript 기술의 도메인 간 구현 방법 요약

WBOY

풀어 주다： 2016-05-16 15:52:48

원래의

1191명이 탐색했습니다.

동일 출처 정책의 제한으로 인해 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?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&#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);

　　　　}

로그인 후 복사