jsonp 도메인 간 요청 소개

이 글에서는 주로 jsonp 도메인 간 요청 관련 정보를 모든 사람에게 자세히 소개하고 특정 참조 값이 있는 브라우저 크로스 도메인 요청을 지원하기 위해 모든 인터페이스의 캡슐화를 활성화합니다.

별도 설명:

1. JSONP:

직관적 이해:

는 클라이언트에 함수를 동적으로 등록하는 것입니다.

함수 a(데이터)를 사용한 다음 함수 이름을 서버에 전달하면 서버는 a({/ *json*/})를 클라이언트에 연결하여 클라이언트의

함수 a(data)를 호출하여 크로스 도메인을 달성합니다.

출생 배경:

1. Ajax는 다음과 같은 일반 파일을 직접 요청합니다. 문제는 액세스 권한이 없는 도메인 간에 존재하는 문제입니다. 정적 페이지, 동적 웹 페이지, 웹 서비스, wcf 등 도메인 간 요청인 경우에는 작동하지 않습니다.

2. 그러나 웹 페이지에서 js 파일을 호출할 때는 영향을 받지 않습니다.

3. 추가 프로모션을 통해 Src 속성이 있는 모든 태그에는 다음과 같은 도메인 간 기능이 있음을 발견했습니다. ;iframe>

4. 따라서 현재 순수 웹측을 통해 도메인 간 데이터에 액세스하려는 경우(ActiveX 컨트롤, 서버측 프록시, 향후 HTML5에 속하는 웹소켓 등은 포함되지 않음) 다음 방법을 사용하십시오. 즉, 원격 서버는 클라이언트 호출 및 추가 처리를 위해 js 형식의 텍스트로 데이터를 로드하려고 시도합니다.

5. JSON은 순수 문자 데이터 형식이며 js에서 기본적으로 지원될 수 있습니다.

6. 해결책은 다음과 같습니다. 웹 클라이언트는 스크립트를 호출하는 것과 똑같은 방식으로 크로스 도메인 서버에서 동적으로 생성된 js 형식 파일(일반적으로 접미사로 json 포함)을 호출합니다.

7. 클라이언트가 json 파일을 성공적으로 호출한 후 필요한 데이터를 가져오고 나머지는 자체 필요에 따라 처리하는 것입니다.

8 클라이언트가 데이터를 쉽게 사용할 수 있도록 jsonp라는 비공식 전송 프로토콜이 점차 형성되었습니다. 이 프로토콜의 핵심은 사용자가 콜백 매개변수를 서버에 전달할 수 있도록 허용한 다음, 서버가 데이터를 반환할 때 이 콜백 매개변수를 함수 이름으로 사용하여 json 데이터를 래핑함으로써 클라이언트가 이를 사용자 정의할 수 있도록 한다는 것입니다. 반환된 데이터를 처리하는 자체 함수입니다.

특정 구현:

JQuery, extjs 또는 jsonp를 지원하는 다른 프레임워크이든 그들이 뒤에서 수행하는 작업은 동일합니다. 클라이언트에서 jsonp 구현을 단계별로 설명하겠습니다.

1. 우리는 크로스 도메인 js 파일의 코드(물론 웹 스크립트 보안 정책을 준수함)의 코드라도 웹 페이지가 무조건 실행될 수 있다는 것을 알고 있습니다.

remoteserver.com의 루트 디렉터리에 remote.js 파일이 있습니다. 코드는 다음과 같습니다.

alert('나는 remote 파일');

말할 것은 많지 않습니다. 핵심 코드를 참조하세요

1. 클래스를 정의하고 MappingJackson2HttpMessageConverter를 상속한 다음 writeInternal 메서드를 다시 작성하고 메서드에 콜백 매개 변수가 있는지 확인하면 데이터가 직접 반환되지 않습니다. 콜백 매개변수를 반환하고 반환했습니다.

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.IOUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.http.HttpOutputMessage;
import org.springframework.http.converter.HttpMessageNotWritableException;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonProcessingException;

public class CallbackMappingJackson2HttpMessageConverter extends MappingJackson2HttpMessageConverter {

 // 做jsonp的支持的标识，在请求参数中加该参数
 private String callbackName;

 @Override
 protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,
   HttpMessageNotWritableException {
  // 从threadLocal中获取当前的Request对象
  HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder
    .currentRequestAttributes()).getRequest();
  String callbackParam = request.getParameter(callbackName);
  if (StringUtils.isEmpty(callbackParam)) {
   // 没有找到callback参数，直接返回json数据
   super.writeInternal(object, outputMessage);
  } else {
   JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType());
   try {
    String result = callbackParam + "(" + super.getObjectMapper().writeValueAsString(object)
      + ");";
    IOUtils.write(result, outputMessage.getBody(), encoding.getJavaName());
   } catch (JsonProcessingException ex) {
    throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex);
   }
  }

 }

 public String getCallbackName() {
  return callbackName;
 }

 public void setCallbackName(String callbackName) {
  this.callbackName = callbackName;
 }

}

2. 요청이 올 때마다 MappingJackson2HttpMessageConverter 클래스의 riteInternal 메소드가 호출되도록 Java Bean을 정의하고 클래스 스캔 경로를 수정하십시오. callbackValue('data') 형식의 데이터가 프런트 엔드로 반환됩니다.

<!-- 定义注解驱动 -->
 <mvc:annotation-driven>
  <mvc:message-converters register-defaults="true">
   <bean
    class="xxx.xxx.xxx.CallbackMappingJackson2HttpMessageConverter">
    <property name="callbackName" value="callback" />
   </bean>
  </mvc:message-converters>
 </mvc:annotation-driven>

3. jquery로 캡슐화된 ajax를 통해 호출됩니다. 여기서 일부 코드가 절약되었으며, 키 코드는 빨간색

<script type="text/javascript">
 var feedback = {
  init: function(){
   var self = feedback;
   self.bind();
  },
  test: function(data){
   console.log("测试jsonp",data)
  },
  bind: function(){
    var self = feedback;

    var par = {};
     par.callback = &#39;feedback.test&#39;;

    $.ajax({ 
    url:"http://manage.danong.com/rest/open/queryInviteList", 
    data: par,
    dataType:&#39;jsonp&#39;, 
    jsonp:&#39;callback&#39;, 
    timeout:3000 
   }); 
  }
 }
 feedback.init();
</script>

4으로 표시되었습니다.

위 내용은 jsonp 도메인 간 요청 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!