JS의 JSON 및 JSONP에 대한 자세한 설명

json을 사용하는 것만으로는 도메인 간 리소스 요청을 지원할 수 없습니다. 이 문제를 해결하려면 jsonp 데이터 상호 작용 프로토콜을 사용해야 합니다. 우리 모두 알고 있듯이 js 파일의 호출은 도메인 간인지 여부에 따라 제한되지 않습니다. 따라서 순수 웹 측을 통해 도메인 간 데이터에 액세스하려는 경우 json 데이터를 다음과 같이 캡슐화하려고 시도할 수 있습니다. 클라이언트가 호출하고 추가 처리할 수 있도록 원격 서버에 js 형식 파일을 만드는 것이 jsonp 프로토콜의 원칙입니다.

JSON 및 JSONP

JSONP는 도메인 간 문제를 걱정하지 않고 JSON 데이터를 보내는 방법입니다. JSONP는 XMLHttpRequest 객체를 사용하지 않습니다. JSONP는 대신 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용합니다.
교차 도메인 정책으로 인해 다른 도메인에 파일을 요청하면 문제가 발생할 수 있습니다. 다른 도메인에서 외부 스크립트를 요청하면 이 문제가 발생하지 않습니다. JSONP는 이를 활용하여 XMLHttpRequest 객체 대신 스크립트 태그를 사용하여 파일을 요청합니다.

<script src="demo_jsonp.php">

서버 파일

서버의 파일은 결과를 함수 호출로 래핑합니다.

<?php
$myJSON = &#39;{"name":"John", "age":30, "city":"New York"}&#39;;
echo "myFunc(".$myJSON.");";
?>

결과는 JSON 데이터를 매개변수로 사용하여 "myFunc"라는 함수에 대한 호출을 반환합니다. 해당 기능이 클라이언트에 존재하는지 확인하세요.

JavaScript 함수

"myFunc"라는 함수는 클라이언트 측에 있으며 JSON 데이터를 처리할 준비가 되어 있습니다.

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.send("x=" + dbParam);

동적 스크립트 태그 만들기

위치에 따라 위의 스크립트 태그 이 예제에서는 페이지가 로드될 때 "myFunc" 함수를 실행하지만 이는 그다지 만족스럽지 않습니다. 스크립트 태그는 필요할 때만 생성해야 합니다.
버튼을 클릭할 때 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 생성하고 삽입합니다.

function clickButton() {
  var s = document.createElement("script");
  s.src = "demo_jsonp.php";  
  document.body.appendChild(s);
}

동적 JSONP 결과

위의 예는 여전히 매우 정적입니다. JSON을 PHP 파일로 전송하여 예제를 동적으로 만들고, 얻은 정보를 기반으로 PHP 파일이 JSON 개체를 반환하도록 합니다.
PHP 파일

<?phpheader("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_encode() 함수를 사용하여 배열을 JSON으로 변환합니다.
반환 객체 주위에 "myFunc()"를 래핑합니다.

JavaScript 예:

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 + "
";
  }
  document.getElementById("demo").innerHTML = txt;
}

콜백 함수

제어할 수 없을 때 서버 파일이 올바른 함수를 호출하도록 하려면 어떻게 해야 합니까? 때때로 서버 파일은 콜백 함수를 매개변수로 제공합니다.
php 파일은 콜백 매개변수로 전달한 함수를 호출합니다.
PHP 파일:

<?php
$callback = trim($_GET(&#39;callback&#39;));
$myJSON = &#39;{ "name":"John", "age":30, "city":"New York" }&#39;;
echo $callback."(".$myJSON.");";
?>

javascript :

function clickButton() {
  var s = document.createElement("script");
  s.src = "jsonp_demo_db.php?callback=myDisplayFunction";  
  document.body.appendChild(s);
}

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 소개 프로그래밍! !

위 내용은 JS의 JSON 및 JSONP에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!