집 >웹 프론트엔드 >JS 튜토리얼 >JAVA 배경을 호출하는 Ajax 교차 도메인(jsonp) 방법

JAVA 배경을 호출하는 Ajax 교차 도메인(jsonp) 방법

php中世界最好的语言원래의: 2018-03-31 15:42:431937검색

이번에는 Ajax 크로스 도메인(jsonp)을 통해 JAVA 백엔드를 호출하는 방법을 알려드리겠습니다. JAVA 백엔드를 호출하는 Ajax 크로스 도메인(jsonp)에 대한 주의사항은 무엇입니까?

1. JSONP 정의

JSONP는 English JSON with Padding의 약자로 비공식 프로토콜입니다. 이를 통해 서버 측에서 스크립트 태그를 생성하고 클라이언트에 반환할 수 있으므로 javascript 콜백 형식으로 사이트 액세스가 가능해집니다. JSONP는 서버에서 반환한 응답을 페이지에 추가하여 특정 기능을 구현하는 스크립트 태그 삽입입니다.

2. JSONP의 기원

JSONP의 기원을 설명하기 위해 먼저 브라우저의 “SOP: Same Origin Policy”에 대해 이야기해 보겠습니다. 즉, 브라우저는 스크립트 프로그램이 동일한 프로토콜, 동일한 도메인 이름 및 동일한 포트의 스크립트와만 상호 작용하도록 제한합니다. 여기에는 변수 공유 및 전달 등이 포함됩니다. 쿠키 전달에도 동일한 정책이 적용됩니다. 이로 인해 여러 서버가 포함된 애플리케이션을 통합할 때 몇 가지 문제가 발생합니다. 도메인 간 액세스 문제로 인해 A 사이트의 Ajax 코드가 B 사이트의 데이터에 액세스할 수 없습니다.

교차 도메인 액세스를 해결하는 방법은 무엇입니까? 그런 다음 브라우저의 기능을 활용해야 합니다. 브라우저는 페이지의 스크립트가 도메인 전체의 데이터를 읽는 것을 허용하지 않지만 HTML이 이미지, CSS 및 스크립트와 같은 도메인 간 리소스를 참조할 수 있도록 허용합니다. 스크립트 프로그램에 대한 참조는 브라우저에서 구문 분석된 후 로컬 스크립트 프로그램과 동일하며 즉시 해석되고 실행될 수 있습니다. 예를 들어 사이트 B의 js 파일에는 간단한 프롬프트 상자인 Alert ("This is Victor!");가 있습니다. A 사이트에서 이 js를 참조하면 B 사이트의 애플리케이션에서 이 스크립트가 실행되고 경고 메시지가 표시됩니다. 오프사이트 스크립트의 참조는 스크립트 태그를 통해 구현되고 스크립트 프로그램은 DOM을 통해 HTML 페이지의 모든 태그(동적으로 생성되는 스크립트 태그 포함)를 제어할 수 있으므로 이는 오프사이트 프로그램을 호출하여 달성할 수 있습니다. 지역 자원에. 또한 <script> 태그를 사용하면 실행 가능한 JavaScript 함수 호출이나 JSON 데이터를 서버에서 직접 반환할 수 있습니다. </script>

3. JSONP 원리 및 구현

먼저 클라이언트에 콜백을 등록한 다음 콜백 이름을 서버에 전달합니다. 이 시점에서 서버는 먼저 JSON 데이터를 생성합니다. 그런 다음 JavaScript 구문을 사용하여 함수를 생성합니다. 함수 이름은 전달된 매개변수 jsonp입니다.

그런 다음 JSON 데이터가 매개변수로 함수에 직접 배치되어 js 구문 문서가 생성되고 클라이언트에 반환됩니다.

마지막으로 클라이언트 브라우저에서 스크립트 태그를 파싱하고 반환된 JavaScript 문서가 실행됩니다. 이때 데이터는 클라이언트가 미리 정의한 콜백 함수(동적 실행 콜백 함수)에 매개변수로 전달됩니다.

특정 코드 연산:

1, js code

$.ajax({
  url: 'http://192.168.3.49:8080/PORTAL/authCode',
  type: 'post',
  dataType:'jsonp',
  jsonp: "callback",
  data: {
    "type":'0',
    "mobilePhone": $("#tel").val()
  },
  success:function(data){
    alert(data.ret)
    settime(obj);
  },
  error:function(data){
    $('#mstr_ck').html("获取验证码失败，请重试！");
    $("#error_ck").show();
  }
});

2, java code

@RequestMapping(value = "authCode")
@ResponseBody
public String getMobileAuthCode( HttpServletRequest request, String callback)
    throws Exception {
  String result = "{'ret':'true'}";
  //加上返回参数
  result=callback+"("+result+")";
  return result;
}

위와 같이: 프론트엔드 호출 결과가 팝업됩니다: 경고('true')　

이후 방법을 마스터하신 것 같습니다. 이 글의 사례를 읽고, 더 많은 PHP 중국어 사이트의 다른 관련 글도 주목해주세요!

JAVA 배경을 호출하는 Ajax 교차 도메인(jsonp) 방법

관련 기사