JSON과 JSONP의 차이점과 jQuery의 ajax jsonp_jquery 사용에 대한 간략한 토론

JSON 및 JSONP

JSON(JavaScript Object Notation)은 브라우저와 서버 간에 정보를 교환하는 데 사용되는 경량 데이터 교환 형식입니다.

JSONP(JSON With Padding)는 함수 호출에 패키지된 JSON(또는 래핑된 JSON)입니다.

JSON은 데이터 형식이고 JSONP는 데이터 호출 방법입니다.

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

//JSON
{
“이름”: “sb”
}

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

//JSONP
콜백({
“이름”: “sb”
})

보안상의 이유로 스크립트(AJAX)는 이 도메인 외부의 콘텐츠에 액세스할 수 없습니다. 그러나 정적 리소스는 도메인 정책에 의해 제한되지 않으며 모든 도메인에서 스크립트, 스타일, 그림 및 기타 정적 리소스를 로드할 수 있습니다. JSOP는 이 원칙을 사용하여 도메인 간 데이터 수집을 달성합니다.

예시 1:

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

//shoPrice 함수 정의
함수 showPrice(데이터) {
Alert("기호: " data.symbol ", 가격: " data.price);
}

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

//웹 페이지에 showPrice 함수 및 매개변수 포함
<script type="text/javascript">
함수 showPrice(데이터) {
Alert("기호: " data.symbol ", 가격: " data.price);
}

<script type="text/javascript">showPrice({symbol: 'IBM', 가격: 91.42});</script>

이 예에서는 정적 JSON 데이터를 매개변수로 사용하여 JavaScript 함수를 호출하는 방법을 보여줍니다.

예시 2:

첫 번째 함수 호출은 js 파일에 작성하여 서버에 배치하고 스크립트 태그를 사용하여 페이지에 로드할 수 있으며 이 태그는 동적으로 생성될 수 있습니다.

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

<script type="text/javascript">
// JSON 데이터로 호출되는 함수입니다
함수 showPrice(데이터) {
Alert("기호: " data.symbol ", 가격: " data.price);
}

var url = “remote.js”; // 외부 스크립트 URL
// 동적으로 스크립트 삽입
var script = document.createElement('script');
script.setAttribute('src', url);

//스크립트 로드
document.getElementsByTagName('head')[0].appendChild(스크립트)

remote.js의 내용은 이전에 태그에 적었던 내용과 동일합니다.

1 showPrice({기호: 'IBM', 가격: 91.42})

동적으로 삽입된 JavaScript 코드는 JSON 데이터를 매개변수로 전달하고 showPrice 함수 호출 명령문의 매개변수를 사용합니다.

따라서 문제는 데이터를 얻을 때마다 showPrice 함수를 호출해야 하는가입니다. 이를 위해서는 프런트엔드와 백엔드 프로그래머의 합의가 필요합니다. 물론 이는 특히 인터페이스가 공개 개발에 공개된 경우 많은 불편을 초래합니다. JSOP는 이런 방식으로 처리됩니다. 프런트엔드는 콜백 함수명 매개변수를 전달하도록 지원하고, 백엔드는 콜백 함수명 매개변수를 수신한 후 함수에 대한 호출을 생성하고 JSON 데이터를 매개변수로 전달하여 삽입합니다. 실행을 시작하기 위해 클라이언트에 도달하면 페이지로 이동합니다.

예시 3:

콜백 매개변수를 사용하여 코드를 동적으로 삽입합니다.

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

<script type="text/javascript">
// JSON 데이터로 호출되는 함수입니다
함수 showPrice(데이터) {
Alert("기호: " data.symbol ", 가격: " data.price);
}
var url = "remote.js?callback='showPrice'" // 외부 스크립트 URL
// 동적으로 스크립트 삽입
var script = document.createElement('script');
script.setAttribute('src', url);
//스크립트 로드
document.getElementsByTagName('head')[0].appendChild(스크립트)

백엔드에서 PHP로 구현된 JSONP 서비스의 코드 조각:

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

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 인쇄: showPrice({"symbol" : "IBM", "price" : "91.42"});

이는 JSONP의 정의에 잘 맞고 함수 호출에 JSON 데이터를 패키징합니다.

위 예의 출처는 다음과 같습니다.

도메인 간 통신을 위해 JSONP 사용, 1부: JSONP 및 jQuery를 사용하여 강력한 매시업을 빠르게 구축

JQuery와 함께 JSONP 사용

jQuery에서 AJAX와 JSONP의 호출 방법은 매우 비슷해 보이지만 이 현상은 본질적으로 매우 다릅니다. AJAX는 XMLHttpRequest 객체를 통해 페이지가 아닌 콘텐츠를 얻는 반면, JSONP는 호출 서버 스크립트에 <script> 태그를 동적으로 추가합니다. jQuery는 JSONP를 AJAX 형식으로 캡슐화하지만 JSONP는 AJAX의 형식이나 특별한 경우가 아닙니다.

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

$.ajax({
URL: "http://query.yahooapis.com/v1/public/yql",
jsonpCallback: "showPrice",
​ jsonp: "콜백",
// jQuery에게 JSONP를 기대한다고 알립니다
데이터 유형: "jsonp",
데이터: {
​​​​ q: "query="cat"인 search.news에서 제목, 요약, URL을 선택하세요.
형식: "json"
},
// 응답 작업
성공: 함수(데이터) {
            console.log( data ) // 서버 응답
}
});

Ajax 요청 매개변수 설명:

데이터 유형 문자열

서버에서 반환할 것으로 예상되는 데이터 유형입니다. 지정하지 않으면 jQuery는 HTTP 패키지의 MIME 정보를 기반으로 자동으로 지능적인 판단을 내립니다. 예를 들어 XML MIME 유형은 XML로 인식됩니다. 1.4에서는 JSON이 JavaScript 객체를 생성하고 스크립트가 스크립트를 실행합니다. 그런 다음 서버에서 반환된 데이터는 이 값을 기반으로 구문 분석되어 콜백 함수에 전달됩니다. 사용 가능한 값:

"xml": jQuery로 처리할 수 있는 XML 문서를 반환합니다.

"html": 일반 텍스트 HTML 정보를 반환합니다. 포함된 스크립트 태그는 DOM에 삽입될 때 실행됩니다.

"script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "cache" 매개변수가 설정되지 않은 경우. '''참고:''''원격 요청을 할 때(동일한 도메인이 아닌) 모든 POST 요청은 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다)

"json": JSON 데이터를 반환합니다.

"jsonp": JSONP 형식입니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.

"text": 일반 텍스트 문자열을 반환합니다

jsonp,

jsonp 요청에서 콜백 함수 이름을 다시 작성합니다. 이 값은 "callback=?"과 같은 GET 또는 POST 요청의 URL 매개변수에서 "콜백" 부분을 대체하는 데 사용됩니다. 예를 들어, {jsonp:'onJsonPLoad'}를 사용하면 "onJsonPLoad"가 서버에 전달됩니다.

jsonpCallback,

jsonp에 대한 콜백 함수 이름을 지정합니다. 이 값은 jQuery가 자동으로 생성한 임의의 함수 이름 대신 사용됩니다. 이는 주로 jQuery가 고유한 함수 이름을 생성하여 요청을 더 쉽게 관리하고 콜백 함수 및 오류 처리를 제공하는 데 사용됩니다. 브라우저가 GET 요청을 캐시하도록 하려는 경우 이 콜백 함수 이름을 지정할 수도 있습니다. 하지만 실제 사용에서는 이 예제의 showPrice와 같은 콜백 함수를 작성할 필요가 없으며, JSONP를 처리할 때 jQuery가 자동으로 콜백 함수를 생성하고 가져오기 때문에 작성하지 않아도 오류가 보고되지 않습니다. 성공 메소드를 호출하기 위해 데이터를 출력합니다. 다음과 같이 보일 수 있습니다:

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

function Success_jsonpCallback(data) { 성공(데이터) }

위 내용은 이 글의 전체 내용입니다. jsonp에 대해 자세히 이해하셨나요? 궁금한 점이 있으시면 메시지를 남겨주시면 함께 논의해 보겠습니다.