Jsonp의 원리와 간단한 구현 방법
- 一个新手원래의
- 2017-09-27 10:19:162315검색
Function
Jsonp是json的一种使用模式，用来解决主流浏览器的跨域数据访问的问题.因为同源策略，页面是无法直接与其他不同源的页面沟通的.利用Script元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
동일한 출처: 동일한 프로토콜, 도메인 이름, 포트를 의미합니다. 브라우저 페이지에서 스크립트를 실행할 때 해당 스크립트가 속한 페이지만 확인합니다. 그렇지 않으면 콘솔에서 오류를 보고합니다.
Principle
클라이언트에서 Script 태그를 사용하여 Jsonp 형식의 데이터를 얻습니다. (JSONP로 캡처한 데이터는 JSON이 아니라 임의의 JavaScript이며 다음과 같이 실행됩니다.) JSON 파싱 대신 자바스크립트 인터프리터(프로세서 파싱)와 jsonp 콜백 함수 실행을 동시에 수행하려면 먼저 클라이언트측에서 콜백 함수를 정의해야 합니다.
간단한 구현
내가 찾은 비교적 간단한 구현은 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Top Customers with Callback</title></head><body>
<p id="pCustomers">
</p>
<script type="text/javascript">
function onCustomerLoaded(result, methodName) {
var html = '<ul>'; for (var i = 0; i < result.length; i++) {
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('pCustomers').innerHTML = html;
} </script> <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script></body></html>예를 들어 고객이 http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction을 방문하기를 원합니다.
고객이 돌아올 것으로 예상한다고 가정합니다. JSON 데이터: [ "customername1","customername2"]
그런 다음 클라이언트에 실제로 반환되는 스크립트 태그: callbackFunction(["customername1","customername2"])
위 내용은 Jsonp의 원리와 간단한 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：새로운 Vue 프로젝트를 생성하는 방법다음 기사：새로운 Vue 프로젝트를 생성하는 방법