JSONP
- 이전 페이지 JSON HTML
- 다음 페이지 jQuery 선택자
JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。
JSONP 不使用 XMLHttpRequest 对象。
JSONP 使用 标签取而代之。
JSONP 简介
JSONP 指的是 JSON with Padding。
从另一个域请求文件会引起问题,由于跨域政策。
예제
<?php $myJSON = '{ \ echo \ ?>
결과는 JSON 데이터가 파라미터로 들어간 "myFunc" 함수 호출로 반환됩니다。
고객 측에 해당 함수가 존재하는지 확인하십시오。
JavaScript 함수
"myFunc" 함수는 클라이언트 측에 위치하며 JSON 데이터를 처리합니다:
예제
function myFunc(myObj) { document.getElementById("demo").innerHTML = myObj.name; }
동적 스크립트 태그 생성
이 예제는 페이지가 로드될 때 "myFunc" 함수를 실행하며, 스크립트 태그를 배치한 위치에 따라 이렇게는 만족스럽지 않습니다。
스크립트는 필요할 때만 생성되어야 합니다:
예제
버튼이 클릭될 때 <script> 태그를 생성하고 삽입합니다:
function clickButton() { var s = document.createElement("script"); s.src = "demo_jsonp.php"; document.body.appendChild(s); }
동적 JSONP 결과
이 예제는 여전히 정적입니다。
PHP 파일에 JSON을 보내어 동적 예제를 생성하고, 이 php 파일에서 얻은 정보를 기반으로 JSON 객체를 반환할 수 있습니다。
PHP 파일
<?php header("Content-Type: application/json; charset=UTF-8"); $obj = json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind"); $result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit); $outp = array(); $outp = $result->fetch_all(MYSQLI_ASSOC); echo "myFunc(".json_encode($outp).")"; ?>
PHP 파일 설명:
- 요청을 객체로 변환하고 PHP 함수를 사용합니다
json_decode()
。 - 데이터베이스에 접근하고 요청된 데이터로 배열을 채웁니다。
- 객체에 배열을 추가합니다。
- 사용
json_decode()
함수는 이 배열을 JSON으로 변환합니다。 - "myFunc()"를 사용하여 반환된 객체를 포장합니다。
JavaScript 예제
将从 php 파일에서 "myFunc" 함수를 호출합니다:
function clickButton() { var obj, s obj = { "table":"products", "limit":10 }; s = document.createElement("script"); s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj); document.body.appendChild(s); } function myFunc(myObj) { var x, txt = ""; for (x in myObj) { txt += myObj[x].name + "<br>"; } document.getElementById("demo").innerHTML = txt; }
콜백 함수
서버 파일을 제어할 수 없는 경우, 서버 파일이 올바른 함수를 호출하도록 어떻게 합니까?
때로는 서버 파일이 콜백 함수를 파라미터로 제공합니다:
예제
PHP 파일은 귀하가 콜백 파라미터로 전달한 함수를 호출합니다:
function clickButton() { var s = document.createElement("script"); s.src = "jsonp_demo_db.php?callback=myDisplayFunction"; document.body.appendChild(s); }
- 이전 페이지 JSON HTML
- 다음 페이지 jQuery 선택자