JSONP

JSONP는 크로스 도메인 문제를 고려하지 않고 JSON 데이터를 전송하는 방법입니다。

JSONP는 XMLHttpRequest 객체를 사용하지 않습니다。

JSONP 사용 <script> 태그 대신 사용됩니다。

JSONP 소개

JSONP는 JSON with Padding을 의미합니다。

다른 도메인에서 파일을 요청하면 크로스 도메인 정책 때문에 문제가 발생합니다。

다른 도메인에서 외부 스크립트를 요청하면 이 문제가 발생하지 않습니다。

JSONP는 이 장점을 활용하고 script 태그를 XMLHttpRequest 객체 대신 사용합니다。

<script src="demo_jsonp.php">

서버 파일

서버의 파일이 함수 호출에서 결과를 포장합니다：

ਮਾਡਲ

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

显示 PHP 文件

结果返回对名为 "myFunc" 的函数的调用，其中的 JSON 数据为参数。

请确保客户端存在该函数。

جاوااسکریپت کورس

函数 "myFunc" 位于客户端，用于处理 JSON 数据：

ਮਾਡਲ

function myFunc(myObj)  {
    document.getElementById("demo").innerHTML =  myObj.name;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

创建动态脚本标签

上例会在页面加载时执行 "myFunc" 函数，根据您放置脚本标签的位置，这样不很令人满意。

Script 只应该在需要时创建：

ਮਾਡਲ

在按钮被点击时创建和插入 <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);
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ