도메인 전체에서 json 데이터를 얻기 위한 jquery의 ajax 및 getJson 구현 방법_jquery

많은 개발자들이 프론트엔드와 서버사이드에서 데이터와 상호작용하기 위해 jquery를 사용하고 있기 때문에 프론트엔드에서 jquery를 사용하면 어떤 사이트의 데이터도 읽을 수 있다고 생각하기 쉽습니다. 최근 개발을 할 때, 타사의 프로젝트와 데이터를 공유해야 했고, 서버 리소스를 많이 차지하지 않을 생각이었기 때문에 서버를 통해 데이터를 전송하는 대신 HTML로 직접 데이터를 읽기로 했습니다. 그러다가 브라우저 측에서 도메인 간 액세스 문제가 발생했습니다.

교차 도메인 보안 제한은 브라우저 측을 의미하며, 서버 측에는 교차 도메인 보안 제한이 없습니다.

현재 브라우저 측 도메인 간 액세스에 일반적으로 사용되는 두 가지 방법은 다음과 같습니다.

1. jQuery의 ajax를 통한 크로스 도메인은 실제로 jsonp를 사용하여 구현됩니다.

jsonp는 영어 json with padding의 약자입니다. 이를 통해 서버 측에서 스크립트 태그를 생성하여 클라이언트에 반환할 수 있습니다. 즉, 자바스크립트 태그가 동적으로 생성되고 자바스크립트 콜백을 통해 데이터를 읽습니다.

HTML 페이지 측 샘플 코드:

코드 복사 코드는 다음과 같습니다.

//먼저 jquery의 js 패키지를 소개합니다
jQuery(document).ready(function(){
$.ajax({

유형: "get", //jquey는 도메인 간 게시를 지원하지 않습니다.

비동기:false,

url: "http://api.taobao.com/apitools/ajax_props.do", //교차 도메인 요청 URL

데이터 유형: "jsonp",

//jsonp 콜백 함수 이름을 얻기 위해 요청 핸들러에 전달되는 매개변수 이름(기본값: 콜백)

jsonp: "jsoncallback",

//사용자 정의된 jsonp 콜백 함수 이름, 기본값은 jQuery에서 자동으로 생성된 임의의 함수 이름입니다.

jsonpCallback:"success_jsonpCallback",

//크로스 도메인 서버에서 json 데이터를 성공적으로 얻은 후 이 콜백 함수가 동적으로 실행됩니다.

성공 : 함수(json){

                       경고(json);
서버 측 코드가 핵심입니다. 처음에는 클라이언트가 jsonp를 통해 도메인 간 액세스에 직접 액세스할 수 있는 한 그렇지 않으며 서버 측 지원이 필요하다고 생각했습니다.

코드 복사

코드는 다음과 같습니다.

public void jsonpTest() throws IOException{ HttpServletRequest 요청 = ServletActionContext.getRequest() HttpServletResponse 응답 = ServletActionContext.getResponse()

//HTML에 지정된 jsonp 콜백 함수의 매개변수 이름을 기반으로 콜백 함수 이름을 가져옵니다.
//callbackName의 값은 실제로: Success_jsonpCallback

String callbackName = (String)request.getAttribute("jsoncallback")

//json 문자열의 간단한 시뮬레이션, 실제로 Google의 gson을 사용하여 변환할 수 있으며 횟수는 문자열 접합을 통해 이루어집니다.

//{"이름":"장산","나이":28}

//" 기호를 탈출하기 위한 것입니다

String jsonStr = "{"name":"장산","age":28}"

//최종 반환 데이터는 다음과 같습니다. Success_jsonpCallback({"name":"Zhang San","age":28})

문자열 renderStr = callbackName "(" jsonStr ")"

response.setContentType("text/plain;charset=UTF-8")

response.getWriter().write(renderStr)

}

jsonp의 원리:

먼저 클라이언트 측에서 콜백(예: 'jsoncallback')을 등록한 다음 콜백 이름(예: Success_jsonpCallback)을 서버 측의 해당 처리 함수에 전달합니다.

서버는 먼저 클라이언트에 반환해야 하는 json 데이터를 생성합니다. 그런 다음 javascript 구문을 사용하여 함수를 생성합니다. 함수 이름은 전달된 매개 변수(jsoncallback)(success_jsonpCallback)의 값입니다.

마지막으로 json 데이터가 함수에 매개변수로 직접 배치되어 js 구문 문서가 생성되어 클라이언트에 반환됩니다.
클라이언트 브라우저는 스크립트 태그를 구문 분석하고 서버에서 반환한 데이터를 매개변수로 사용합니다.
위 예제에서 jquery $.ajax() 메서드로 캡슐화된 것처럼 클라이언트가 미리 정의한 콜백 함수를 전달합니다. 성공: 함수(json)).

실제로 도메인 간 데이터 로딩은 스크립트를 동적으로 추가하여 수행됩니다. 데이터를 직접 얻을 수 없으므로 콜백 함수를 사용해야 합니다.

2. jquery의 getJson을 사용하여 도메인 전체에서 데이터 읽기

사실 getJson 메소드의 기본 원리는 ajax가 jsonp를 사용하는 방식과 동일합니다.

GetJson은 일반적으로 jquery에서 원격 데이터를 가져와 json 형식으로 반환하는 데 사용됩니다. 함수의 프로토타입은 다음과 같습니다.

jQuery.getJSON(url,data,success(data,status,xhr))

매개변수 설명 URL 필수입니다. 요청이 전송될 URL을 지정합니다. 데이터 선택사항. 요청과 함께 서버로 전송될 데이터를 지정합니다. 성공(데이터,상태,xhr)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

선택사항. 요청이 성공할 때 실행할 함수를 지정합니다.

추가 매개변수:

• 응답 - 요청의 결과 데이터를 포함합니다.
• 상태 - 요청 상태를 포함합니다.
• xhr - XMLHttpRequest 객체 포함

이 함수는 축약된 ajax 함수이며 실제로는 다음과 같습니다. 코드 복사

코드는 다음과 같습니다.


$.ajax({
url: url,
data: data,
Success: callback,

dataType: json
}); 🎜>본론으로 돌아가서 getJson을 사용하여 도메인 전체에서 데이터를 얻는 방법을 살펴보겠습니다.

HTML 페이지 샘플 코드:

코드 복사

코드는 다음과 같습니다.

$ .getJSON( "http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
함수(데이터) {
경고(데이터);
}
);

실행원칙 :

요청을 보낼 때 서버에 콜백 함수 이름을 전달해야 합니다. 서버는 콜백 함수 이름을 얻은 다음 클라이언트가 호출할 수 있도록 반환 데이터를 매개변수 형식으로 클라이언트에 반환합니다. .

요청 URL을 보내는 주소 뒤에는 jsoncallback=?과 같은 매개변수가 와야 합니다. jquery는 자동으로 생성된 콜백 함수의 이름으로 ? 번호를 자동으로 바꿉니다.

따라서 최종 실제 요청은 다음과 같습니다.

http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

그래서 ajax 방식과 비교하고 싶습니다. 즉, 콜백 함수 중 하나는 자동으로 생성된 함수 이름이고 다른 하나는 수동으로 지정한 함수 이름입니다.