json data_javascript 기술에 대한 AJAX 도메인 간 요청 구현 방법-JS 튜토리얼-php.cn

json data_javascript 기술에 대한 AJAX 도메인 간 요청 구현 방법

WBOY

풀어 주다： 2016-05-16 17:16:27

원래의

1055명이 탐색했습니다.

우리 모두는 AJAX의 한계 중 하나가 도메인 간 요청을 허용하지 않는다는 것을 알고 있습니다. 그러나 이는 JSONP를 사용하여 달성됩니다. JSONP는 크로스 도메인 URL을 참조할 수 있는 js 스크립트인 스크립트 태그를 통해 주입하는 방법이지만 결과를 직접 처리할 수 있도록 콜백 기능(자신의 페이지에 있어야 함)을 제공해야 합니다. jQuery, MooTools, Dojo Toolkit에서 JSONP가 어떻게 구현되는지 살펴보겠습니다.

jQuery의 JSONP
jQuery.getJSON 메소드:

Js 코드

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

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ 
 q: "Arsenal" 
} ,function(tweets) { 
 // 여기서 응답 처리 
 console.info("Twitter received: ",tweets) 
}) 

또는 이와 유사

Js 코드

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

$ .ajax({ 
 >            유형: "get", 
                                                                        > 
 > 
MooTools JSONP
MooTools에는 Request.JSONP 클래스가 필요합니다. 여기에서 MooTools More를 다운로드할 수 있습니다. Request.JSONP를 선택하면
다른 도메인에서 json을 가져오는 것이 매우 쉽습니다.

 Js 코드 " http://search.twitter.com/search.json", 
 data: { 
 q: "Arsenal" 
 },//제출된 매개변수, 매개변수가 없으면 하지 마세요. write 
 callbackKey: 'jsoncallback',//콜백 함수의 매개변수 이름을 직접 정의

onComplete: function(tweets) {
// 검사를 위해 결과를 콘솔에 기록
console.info ("Twitter return: ",tweets) ;
}
}).send();

콜백 함수의 매개변수 이름을 정의하는 경우는 jquery와 동일합니다.

서버 측에서 이렇게 해야 합니다. 획득:Js 코드

코드 복사

코드는 다음과 같습니다.

String callback = request.getParameter("jsoncallback");//콜백 메소드 이름 가져오기
 response.setHeader("Cache-Control", "no-cache") 
 response. setContentType ("text/json;charset=UTF-8"); 
 PrintWriter out; 
 try { 
 out = response.getWriter() 
 out.print(callback "(" message " ) "); // 여기에 열쇠가 있습니다. 주로 여기 
 Out.flush (); 
 Out.Close (); 
} Catch (IOEXception E) {
 E.printstacktrace ();       } 

 

저는 개인적으로 mootools의 프레임워크 디자인 아이디어를 다시 한번 칭찬해 주세요!

Dojo JSONP
JSONP는 Dojo Toolkit에 필요합니다. dojo.io.script로 이동하세요(예제를 보려면 클릭하세요)

Js code

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

// dojo.io.script는 외부 종속성이므로 필수여야 합니다. 
dojo.require("dojo.io.script") 

 // 리소스가 준비되면 
dojo.ready(function() { 
 
 // get 메소드 사용 
 dojo.io.script.get({ 
 ) // Twitter에서 JSON을 가져오는 URL 
 url: "http://search.twitter.com/ search.json", 
 // 콜백 매개변수 
 callbackParamName: "callback", // Twitter에서는 "콜백"이 필요합니다. 
            // 보낼 콘텐츠 
                                     ~                                      메시지는 🎜> 
JSONP입니다! 매우 효과적이고 안정적이며 구현하기 쉬운 원격 데이터 수집 방법입니다. 또한 JSONP 전략을 사용하면 개발자는 번거로운 서버 프록시 방법을 피하고 쉽게 데이터를 얻을 수 있습니다. 직접 작성해 볼 수도 있습니다.