JsonP 其實即係用 `script` Tag 來載入第三方 (不同 Domain) 的 javascript 檔案來取得資料，好處就係可以通過 Browser 的 CORS 的封鎖。

原理係通過由載入的 Javascript 檔案內容來直接 Call 你預先設定好的 Function。因為用 `script` Tag 載入的 Javascript 會直接執行。

### 例子

你有一個 Html

```html
<!-- 預備工作 -->
<script type='text/javascript'>
	
	// 預先定義一個 function 來處理收到的資料
	const myfnc = data => console.log(data);
</script>

<!-- 載入第三方 JS -->
<script type='text/javascript' src='https://example.com/json.php?callback=myfnc'></script>
```

而 Server 上有這個 PHP 檔案來 Handle 你個 Request

```php
<?php
	
	// get callback name from url params
	$fncName = $_GET['callback'];
	
	// data
	$data = ["foo" => "bar", "apple" => "pen"];
	
	// set javascript response header
	header('Content-Type: text/javascript; charset=utf-8');
	
	// print result
	echo $fncName . "(" . json_encode($data) . ")";
?>
```

當你去 Request 呢個 PHP 時，大約就會得到以下的 Response body

```js
myfnc({"foo":"bar","apple":"pen"})
```

咁當第三方 JS 載入完成後，就會立即自動 call 埋你預先寫好的 `myfnc` function 了。

### 實際應用

當然實際上應用唔會好似上面咁揼死個 `script` tag 去載入，而一定係用 js 去插入一個 `script` tag 先有意義。

```js
// 設定一個 function
function requestData() {
	
	// 開一個 script tag
	const s = document.createElement('script');
	
	// 設定好路徑
	s.src = 'https://example.com/json.php?callback=myfnc';
	
	// 加入到 body 中
	document.body.appendChild(s);
}
```

這樣就可以了。