json 데이터를 얻기 위한 jquery의 ajax 및 getJson 교차 도메인(그래픽 튜토리얼)

이 글은 주로 도메인 간 json 데이터를 얻기 위한 jquery의 ajax와 getJson의 구현 방법을 소개합니다. 도움이 필요한 친구들이 와서 참고하면 좋겠습니다.

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

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

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

1 실제로 jsonp를 사용하여 구현되는 jQuery의 ajax를 통한 도메인 간 액세스입니다.

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

HTML 페이지 측 샘플 코드:

//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey是不支持post方式跨域的
async:false,
url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL
dataType : "jsonp",
//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
jsonp: "jsoncallback",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
jsonpCallback:"success_jsonpCallback",
//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
success : function(json){
alert(json);
}
});
});

서버 측 샘플 코드, java를 예로 들어:

서버 측 코드는 처음에는 클라이언트가 크로스 도메인에 직접 액세스할 수 있는 한 핵심이라고 생각했습니다. 실제로 jsonp를 통해서는 그렇지 않습니다. 서버가 필요합니다. 최종 지원이면 충분합니다.

public void jsonpTest() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//根据html指定的jsonp回调函数的参数名，获取回调函数的名称
//callbackName的值其实就是：success_jsonpCallback
String callbackName = (String)request.getAttribute("jsoncallback");
//简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接
//{"name":"张三","age":28}
//\是对"号进行转义
String jsonStr = "{\"name\":\"张三\",\"age\":28}";
//最终返回的数据为：success_jsonpCallback({"name":"张三","age":28})
String 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))

Parameters	Description
url	필수입니다. 요청이 전송될 URL을 지정합니다.
data	선택사항. 요청과 함께 서버로 전송될 데이터를 지정합니다.
성공(데이터,상태,xhr)	선택사항. 요청이 성공할 때 실행할 함수를 지정합니다. 추가 매개변수: response - 요청의 결과 데이터를 포함합니다. status - 요청의 상태를 포함합니다. xhr - XMLHttpRequest 개체를 포함합니다.

이 함수는 축약된 ajax 함수로, 실제로는 다음과 같습니다.

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

주제로 돌아가서 getJson을 사용하여 도메인 전체에서 데이터를 얻는 방법을 살펴보겠습니다.

HTML 페이지 샘플 코드:

$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
    function (data) {
        alert(data);
    }
);

실행 원칙:

요청을 보낼 때 콜백 함수 이름을 서버에 전달해야 합니다. 서버는 콜백 함수 이름을 얻은 다음 매개변수를 사용하여 데이터를 반환합니다. 클라이언트가 이를 조정할 수 있도록 양식이 클라이언트에 반환됩니다.

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

그래서 최종 실제 요청은 다음과 같습니다. http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련글 :

jquery+ajaxiframe 적용시 높이에 맞춰주세요

AJAX 2차 연동 구현 방법은 무엇인가요

jquery+ajax중국어 대응 방법 왜곡된 json 반환 현상

위 내용은 json 데이터를 얻기 위한 jquery의 ajax 및 getJson 교차 도메인(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!