JSONP는 jQuery의 도메인 간 AJAX 통신 문제를 어떻게 해결할 수 있습니까?

jQuery AJAX 도메인 간 통신 문제

한 도메인의 HTML 문서가 다른 도메인에 요청하면 어려움이 발생합니다. test.php와 testserver.php라는 두 개의 PHP 파일이 있는 시나리오를 살펴보겠습니다.

test.php:

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
  $(function() {
    $.ajax({
      url: "testserver.php",
      success: function() {alert("Success")},
      error: function() {alert("Error")},
      dataType: "json",
      type: "get"
    });
  });
</script>

testserver.php:

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

두 파일이 모두 동일한 서버에서 호스팅되는 경우 AJAX 요청은 성공합니다. 그러나 다른 서버에 배치되면 요청이 실패하고 "오류" 경고가 발생합니다. 이는 도메인 간 데이터 공유를 제한하는 브라우저의 SOP(Same Origin Policy) 때문입니다.

해결책: JSONP 활용

SOP를 극복하려면 다음을 수행하세요. JSONP(JSON with Padding)를 사용합니다. JSONP를 사용하면 데이터를 함수 호출로 전송할 수 있으므로 SOP에 의해 부과된 제한 사항을 피할 수 있습니다.

jQuery:

$.ajax({
  url: "testserver.php",
  dataType: 'jsonp', // Notice! JSONP < - P (lowercase)
  success: function(json){
    // do stuff with json (in this case an array)
    alert("Success");
  },
  error: function(){
    alert("Error");
  }
});

PHP:

<?php
$arr = array("element1", "element2", array("element31", "element32"));
$arr['name'] = "response";
echo $_GET['callback'] . "(" . json_encode($arr) . ");";
?>

이 수정된 코드에서 JavaScript 요청에는 'dataType: JSONP 사용을 나타내는 'jsonp''입니다. PHP 스크립트는 '$_GET['callback']'을 통해 jQuery가 보낸 콜백 함수 이름을 검색하고 이를 사용하여 출력을 형성합니다. PHP 스크립트의 출력은 콜백 함수와 JSON 데이터로 나타나야 데이터가 함수 호출로 전송되도록 할 수 있습니다.

또는 jQuery는 처리를 위한 약칭인 $.getJSON() 메서드를 제공합니다. JSONP 요청. 그러나 'callback=?'을 포함하는 URL이 필요합니다. GET 매개변수로, jQuery가 자체 콜백 메소드를 동적으로 삽입합니다.

위 내용은 JSONP는 jQuery의 도메인 간 AJAX 통신 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!