Jsonp의 원리와 간단한 구현 방법-JS 튜토리얼-php.cn

Jsonp의 원리와 간단한 구현 방법

一个新手

풀어 주다： 2017-09-27 10:19:16

원래의

2360명이 탐색했습니다.

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 = &#39;<ul>&#39;;            for (var i = 0; i < result.length; i++) {
                html += &#39;<li>&#39; + result[i] + &#39;</li>&#39;;
            }
            html += &#39;</ul>&#39;;
            document.getElementById(&#39;pCustomers&#39;).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 중국어 웹사이트의 기타 관련 기사를 참조하세요!