$. ajax 크로스 도 메 인 요청 데이터 솔 루 션

최근 에 공중전화 프론트 개발 을 계속 하고 있 는데 ajax 크로스 도 메 인 요청 문제 에 부 딪 혔 습 니 다. 예 를 들 어 지역 의 성 - 시 - 현 3 급 연동, 자동차 브랜드 - 차 계 - 차 대금 의 3 급 연동 조회 등 은 모두 외부 인터페이스 (기타 프로젝트 의 인터페이스) 를 호출 하여 완성 해 야 합 니 다.다음은 개인 적 으로 크로스 오 버 요 구 를 해결 하 는 방안 을 공유 하 겠 습 니 다. 물론 백 스테이지 프로그램 원숭이 형님 의 도움 을 받 아 저 는 그 중의 관 계 를 알 게 되 었 습 니 다. 빨리 기록 하고 천천히 축적 하 는 것 도 여러분 에 게 도움 이 되 기 를 바 랍 니 다. 그리고 적극적으로 의견 이나 건 의 를 하 세 요.
크로스 도 메 인 요청 은 배경 코드 를 통 해 callback 리 셋 함 수 를 받 고 json 데 이 터 를 진일보 처리 해 야 합 니 다.프론트 데스크 톱 에서 ajax 로 서버 에 callback 인 자 를 보 내 고 데이터 형식 을 jsonp 로 지정 합 니 다.
1. 배경 에서 크로스 필드 요청 처리
1. CarBrandController. 자바 (자동차 브랜드 인터페이스 자바 파일). 여기 열거 한 방법 은 주로 서로 다른 level 값 에 따라 해당 하 는 브랜드, 차량 계열, 차량 대금 을 조회 하 는 데 사 용 됩 니 다. 여기 서 크로스 도 메 인 요청 에 대해 리 턴 함 수 를 받 는 처 리 를 합 니 다. 되 돌아 오 는 callback 이 null 이면 크로스 도 메 인 요청 이 아니 라 특별한 처 리 를 하지 않 고 json 인터페이스 데 이 터 를 직접 인쇄 하면 됩 니 다.되 돌아 오 는 callback 이 null 이 아니라면 도 메 인 간 요청 을 표시 합 니 다. 이 때 는 json 데이터 의 바깥쪽 에 작은 괄호 로 싸 야 합 니 다. 구체 적 으로 HttpAdapter. 자바 파일 의 printlnJSonobject 방법 을 보십시오.

public void json(HttpServletRequest request,HttpServletResponse response){
    Mapmap=new HashMap();
    String id = request.getParameter("id");           //  ajax      id
    String level = request.getParameter("level");     //  ajax      level
    String callback=request.getParameter("callback"); //  ajax      callback  
    if ("1".equals(level)) {                          //  level '1',          
        map.put("results", this.carBrandService.findByAttr(null, "first_letter asc"));  //      ，    map
    } else if ("2".equals(level)) {                   //  level '2',          
        map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//      ，    map
    } else if ("3".equals(level)) {                   //  level '3',          
        map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//      ，    map
    }
    map.put("level",level);
    if (null==callback) {                             //     callback  null,        ,  json  
        HttpAdapter.printlnObject(response, map);
    }else{                                           //     callback   null,      ，     json  
	HttpAdapter.printlnJSONPObject(response, map, callback);
    }
}

2. HttpAdapter. java (출력 대상 의 자바 파일), printlnObject 방법 으로 정상 적 인 json 문자열 인쇄;printlnJSonobject 방법 은 json 문자열 을 특수 처리 하 였 습 니 다.

/**
 *     
 * @param response
 * @param object
*/
public static void printlnObject(HttpServletResponse response,Object object){
    PrintWriter writer=getWriter(response);
    writer.println(JSON.toJSONString(object));
}
/**
 *       
 * @param response
 * @param object
*/
public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){
    PrintWriter writer=getWriter(response);
    writer.println(callback+"("+JSON.toJSONString(object)+")");
}

2. 프론트 ajax 크로스 필드 요청 데이터
쓰기 1: 서버 에 인자 callback =? 를 보 냅 니 다.동시에 dataType 을 'jsonp' 형식 으로 지정 합 니 다. 도 메 인 요청 시 지정 한 데이터 형식 은 jsonp 형식 이 어야 합 니 다.

function loadData(obj,level,id,value){
    $.ajax({  
        url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?',     // callback    url        
        type:'GET',
        async:false,
        dataType:'jsonp',
        success:function(data){                
            console.log(data);                       
            //    (        )           
    });     
}

쓰기 2: callback 은 url 에 쓸 필요 가 없 지만 jsonp 인 자 를 'callback' 으로 지정 하고 jsonp Callback 인 자 를 값 으로 지정 해 야 합 니 다.

function loadData(obj,level,id,value){
    $.ajax({  
        url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id,
        type:'GET',
        dataType:'jsonp',
        jsonp: 'callback',                    // callback  jsonp             
        jsonpCallback:'jsonpCallback1',     
        success:function(data){                   	
        console.log(data);

}); }
상기 두 가지 서법 의 의 미 는 같 지만 서법 이 다 를 뿐이다.
다음은 jsonp 의 작업 원 리 를 보충 하 겠 습 니 다.
3. jsonp 크로스 필드 의 원리 분석
jsonp 의 가장 기본 적 인 원 리 는 동적 으로 탭 을 추가 하 는 것 이 고 script 태그 의 src 속성 은 도 메 인 을 뛰 어 넘 는 제한 이 없습니다.이렇게 말 하면 이러한 크로스 도 메 인 방식 은 ajax XmlHttpRequest 프로 토 콜 과 무관 합 니 다. & lt;br style="color:rgb(51,51,51);font-family:Arial;line-height:26px;">

JSONP 는 비공식적인 프로 토 콜 로 서버 에서 Script tags 를 통합 하여 클 라 이언 트 로 돌아 갈 수 있 도록 합 니 다. javascript callback 형식 으로 JSONP 즉 JSON with Padding 을 크로스 도 메 인 으로 방문 할 수 있 습 니 다.같은 소스 정책 의 제한 으로 인해 XmlHttpRequest 는 현재 원본 (도 메 인 이름, 프로 토 콜, 포트) 의 자원 만 요청 할 수 있 습 니 다.크로스 도 메 인 요청 을 하려 면 html 의 script 표 시 를 사용 하여 크로스 도 메 인 요청 을 하고 응답 에서 실행 할 script 코드 를 되 돌려 줄 수 있 습 니 다. 그 중에서 JSON 을 사용 하여 자바 script 대상 을 직접 전달 할 수 있 습 니 다.이런 크로스 오 버 통신 방식 을 JSONP 라 고 한다.lt;/span>
jsonCallback 함수 jsonp 1236827957501 (...): 브 라 우 저 클 라 이언 트 가 등록 한 것 입 니 다. 크로스 도 메 인 서버 의 json 데 이 터 를 가 져 온 후 리 셋 함수 & lt; /span>
Jsonp 원리: & lt; /span>
먼저 클 라 이언 트 에 callback (예 를 들 어 'jsoncallback') 을 등록 한 다음 에 callback 의 이름 (예 를 들 어 jsonp 1236827957501) 을 서버 에 전달 합 니 다.메모: 서버 에서 callback 의 수 치 를 얻 은 후 jsonp 1236827957501 (...) 으로 출력 할 json 내용 을 포함 시 켜 야 서버 에서 json 데 이 터 를 생 성 해 야 클 라 이언 트 가 정확하게 받 을 수 있 습 니 다.lt;/span>
그리고 javascript 문법 으로 function 를 생 성 합 니 다. function 이름 은 전 달 된 매개 변수 'jsoncallback' 의 값 jsonp 1236827957501. & lt; /span>
마지막 으로 json 데 이 터 를 직접 참여 하 는 방식 으로 function 에 배치 하면 js 문법 문 서 를 생 성하 여 클 라 이언 트 에 게 되 돌려 줍 니 다.lt;/span>
클 라 이언 트 브 라 우 저, script 라벨 을 분석 하고 되 돌아 오 는 javascript 문 서 를 실행 합 니 다. 이때 javascript 문서 데 이 터 는 매개 변수 로 & lt;br> 클 라 이언 트 가 미리 정의 한 callback 함수 (예 를 들 어 jquery $. ajax () 방법 으로 포 장 된 success: function (json) 에 들 어 왔 습 니 다. (동적 으로 리 셋 함수 실행) & lt; /span>
jsonp 의 방식 원리 와 & lt 라 고 할 수 있다.script src = "http: / / 크로스 필드 /... xx. js" & lt;일치 합 니 다 (qq 공간 은 이러한 방식 으로 도 메 인 데이터 교환 을 대량으로 실현 하 는 것 입 니 다). JSONP 는 스 크 립 트 주입 (Script Injection) 행위 이기 때문에 일정한 안전 위험 도 있 습 니 다.
jquery 는 post 방식 의 크로스 필드 를 지원 하지 않 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

확장-JsonFile

Json 형식은 사물을 정의하는 놀라운 방법이므로 개발자는 엔티티를 설명하기 위해 코드 저장소에 Json 형식을 자주 사용합니다. Devops는 또한 json 파일을 사용하여 애플리케이션 또는 기타 항목을 구성합니다...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

$. ajax 크로스 도 메 인 요청 데이터 솔 루 션

좋은 웹페이지 즐겨찾기