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

우리 모두는 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 전략을 사용하면 개발자는 번거로운 서버 프록시 방법을 피하고 쉽게 데이터를 얻을 수 있습니다. 직접 작성해 볼 수도 있습니다.