java 결합 jQuery 도메인 이름으로 데이터 가져오는 방법
브라우저가 보안을 고려하여 동원 정책의 제한을 채택했기 때문에 jQuery는 도메인 이름을 뛰어넘어 서로 대상이나 데이터를 조작할 수 없습니다.예: a.com 도메인 이름 아래의
a.html 페이지는 jQuery를 이용하여 b.com 도메인 이름 아래 b.html 페이지의 대상이나 데이터를 조작할 수 없으며 기본적으로 테스트도 조작할 수 없습니다.a.com 도메인 이름 아래의
test.html의 대상 또는 데이터.다음 조건을 충족하는 jQuery는 도메인 간 이름으로 간주됩니다.
1. 주역은 같고 자역은 다르다. 예를 들어 xxx.aaa.com과 yyy.aaa.com
2. 도메인 이름이 같고 포트가 다르다. 예를 들어 xxx.aaa.com: 8000 및 xxx.aaa.com
3. 도메인 이름이 같고 프로토콜이 다르다.http://www.aaa.com/화목하다https://www.aaa.com/
프로토콜, 도메인 이름, 포트 세 가지가 완전히 같아야만 jQuery가 크로스 도메인 이름이 아니라고 간주할 수 있습니다.
2. jQuery 도메인 이름 조작 대상을 해결하는 방법
1. 최상위 도메인 이름이 도착하는 경우
기본적으로 a.com 도메인 이름의 a.html 페이지는 jQuery를 이용하여 테스트를 할 수 없습니다.a.com 도메인 이름 아래의test.html의 대상 또는 데이터.그러나 이런 최고급 도메인 이름이 같은 경우는 a.html와test에 있다.html에서 문서를 리셋합니다.domain=a.com이면 됩니다.
2. 최상위 도메인 이름이 일치하지 않는 경우
a.com 도메인 이름 아래의 a.html 페이지에 대해 jQuery를 이용하여 b.com 도메인 이름 아래의 b.html 페이지의 데이터를 조작하는 방법은 두 가지가 있습니다. $.getJSON 、$.ajax
(1) jQuery의 aax를 통해 전역을 진행하는데 이것은 사실 jsonp의 방식으로 이루어진 것이다.
jsonp는 영문 json with padding의 줄임말이다.서버에서scripttags를 생성하여 클라이언트로 되돌려줍니다. 즉, 동적으로javascript 탭을 생성합니다.
javascriptcallback 형식으로 데이터 읽기를 실현합니다.
html 페이지 사이드 예제 코드:
코드는 다음과 같습니다.
// jquery js
jQuery(document).ready(function(){
$.ajax({
type : "get", //jquey post
async:false,
url : "http://api.jb51.net/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 데이터가 됩니다.그리고 자바스크립트 문법으로 function을 생성합니다. function 이름은 전달된 매개 변수 (jsoncallback) 의 값 (success_jsonpCallback) 입니다.
마지막으로 json 데이터를 직접 삽입하는 방식으로function에 놓으면 js 문법의 문서를 생성하여 클라이언트에게 되돌려줍니다.
클라이언트 브라우저, script 탭을 분석하고 서버에서 되돌아오는 데이터를 매개 변수로
클라이언트가 미리 정의한callback 함수 (예를 들어 전례에서 jquery $.ajax () 방법으로 봉인된success:function (json) 에 전송되었습니다.
실제로 크로스 필드는 동적 증가script를 통해 데이터를 불러옵니다. 직접 데이터를 얻을 수 없기 때문에 리셋 함수를 사용해야 합니다.
(2) jquery의 getJson을 사용하여 전역 데이터 읽기
실제로 getJson 방식의 근본 원리는 aax가 jsonp를 사용하는 방식과 같다.
jquery에서는 원격 데이터를 가져오기 위해 getJson을 호출하고 json 형식으로 되돌려줍니다.함수의 원형은 다음과 같습니다.
jQuery.getJSON(url,data,success(data,status,xhr))
매개 변수 설명
url 필수.요청이 전송될 URL을 지정합니다.
데이터 선택 사항.요청과 함께 서버에 보내는 데이터를 규정합니다.
success(data,status,xhr)는 선택할 수 있습니다.요청이 성공했을 때 실행되는 함수를 규정합니다.
추가 매개변수:
response - 요청한 결과 데이터 포함
status - 요청이 포함된 상태
xhr - XMLHttpRequest 객체 포함
이 함수는 간단명료한 ajax 함수로 실제로는 다음과 같다.
코드는 다음과 같습니다.
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
본론으로 돌아가서 getJson을 사용하여 크로스 필드에서 데이터를 얻는 방법을 보겠습니다.html 페이지 예제 코드:
코드는 다음과 같습니다.
$.getJSON("http://api.jb51.net/apitools/ajax_props.do&jsoncallback=?",
function (data) {
alert(data);
}
);
실행 방법:요청을 보낼 때callback의 리셋 함수 이름을 서버에 전송해야 합니다. 서버 측은 이 리셋 함수 이름을 가져와서 데이터를 매개 변수 형식으로 클라이언트에게 되돌려 줍니다. 그러면 클라이언트가 조정할 수 있습니다.
그래서 요청 URL을 보내는 주소 뒤에 jsoncallback=?이런 매개 변수, jquery는?번호는 자동으로 생성된 리셋 함수의 이름으로 자동으로 바뀝니다.
그래서 최종 실제 요청은 다음과 같다.http://api.jb51.net/apitools/ajax_props.do&jsoncallback=jsonp1322444422697
그래서 aax의 방식과 비교해 보면 콜백 함수 하나는 자동으로 생성된 함수 이름이고 하나는 수동으로 지정한 함수 이름이다.
다음 사항에 유의하십시오.
1. 데이터 수신자에게 보내는 주소 뒤에 콜백=?이런 매개 변수, 그리고 이거?Jquery에 의해 자동으로 리셋 방법으로 대체되는 이름입니다.(Jquery1.4에서 리셋 방법의 이름을 스스로 지정할 수 있습니다.)
2. js 스크립트가 데이터를 보내는 데이터는 var 데이터='{'username':'sanjer','userid':'110'}로 쓸 수 없음을 주의하십시오.var data={username:'sanjer','userid:'110'}로 써야 한다는 점에 주의해야 한다.서버 쪽에서 되돌아오는 데이터를 수신하려면 서버 쪽에서 데이터를 JSON 형식의 문자열로 봉인하고callback 값과 함께 되돌려야 합니다.(위의 예시 코드를 자세히 보십시오.)
3. Jquery의 $를 호출했기 때문입니다.getJSON 방법을 사용할 때 Jquery는 자신의 처리를 하고 실제적으로 script의 scr를 통해 요청하지만 데이터는 결국 url 뒤에서 get 방식으로 데이터를 보내는 것을 알아야 한다. 이것은 전송된 데이터의 양이 너무 많으면 안 되고 그렇지 않으면 url이 너무 오래 수신되지 않는다는 것을 결정한다. (getJSON 방식은post 방식으로 제출할 수 없다.)
도메인을 뛰어넘어 빅데이터 양을 보내려면 jQuery가 제공하는 aax 방법을 선택하고 getJSON 방법을 선택하지 않는 것이 좋습니다.
4. 이상의 예는 양방면의 개발이 모두 당신이 장악하는 전제 아래 있다.또한 서버 프로그램 측의 안전 계수가 높지 않음을 주의해야 한다. (데이터 수신단 쪽에 중요하고 민감한 논리 처리 단원을 두지 않는 것을 권장한다.)
이상의 이java가 jQuery와 결합하여 크로스 도메인 이름으로 데이터를 얻는 방법은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.