목차
- JSONP 소개
- JSONP 예제1 - 페이지 로드 시 자동출력
- JSONP 예제2 - 버튼 클릭했을 때만 출력
- JSONP 예제3 - 버튼 클릭했을 때만 출력 (서버DB 연결)
- [참고] 배열키 결정 방법
JSONP 소개
도메인 간 생기는 문제 걱정 없이 JSON 데이터 전송하는 방법.
1.
데이터 전송에 <script> 태그 사용. (※ XMLHttpRequest 객체 사용 X)
(예) <script src="a.php"></script>
2.
JSONP (=JSON + Padding) = 패딩 있는 JSON
3.
다른 도메인의 파일을 요청하면 도메인 간 정책으로 인해 문제가 발생 가능.
그러나, 다른 도메인에서 외부 script 요청하는 데는 문제 발생 안 함.
이 점에 착안해,
JSONP는 XMLHttpRequest 객체 대신 script 태그를 사용해서 파일 요청.
JSONP 예제1 - 페이지 로드 시 자동출력
b.php (브라우저 출력)
<p id="demo"></p>
<script>
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.site;
}
</script>
<script src="a.php"></script>
PS. 이 방법은 페이지 로드 중 함수를 실행해서 바람직 안 함.
a.php (서버 처리)
<?php
$myJSON = '{ "site":"홈짱닷컴", "domain":"Homzzang.com", "open":2012 }';
echo "myFunc(".$myJSON.");";
?>
JSONP 예제2 - 버튼 클릭했을 때만 출력
b.php (브라우저 출력)
<button onclick="clickButton()">클릭</button>
<p id="demo"></p>
<script>
function clickButton() {
var s = document.createElement("script");
s.src = "a.php";
document.body.appendChild(s);
}
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.site;
}
</script>
PS. 이 방법은 필요할 때 함수를 호출해 실행하므로 바람직.
a.php (서버 처리)
앞 예제와 동일.
JSONP 예제3 - 버튼 클릭했을 때만 출력 (서버DB 연결)
b.php (브라우저측)
<button onclick="btn()">클릭</button>
<p id="demo"></p>
<script>
function btn() {
var obj, s
obj = { limit: 10 };
s = document.createElement("script");
s.src = "a.php?x=" + JSON.stringify(obj); // JS 객체를 JSON 객체로 변환
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].mb_name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
a.php (서버측)
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
// JSON 요청을 PHP 객체로 변환
$conn = new mysqli("localhost", "root", "autoset", "mw7");
// 서버 DB 연결 (호스트, ID, PW, DB명)
$result = $conn->query("SELECT mb_name FROM g5_member LIMIT ".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
// 필드명을 배열키로 사용
echo "myFunc(".json_encode($outp).")";
// PHP 배열을 JSON으로 변환
?>
[주의] 워삼스쿨 경우, $limit 변수로 되어 있는데 그냥 limit로 적어야 됨.
[참고] 배열키 결정 방법
MYSQLI_ASSOC : 필드명을 배열키로 사용
MYSQLI_NUM : 숫자를 배열키로 사용
MYSQLI_BOTH: 필드명과 숫자 모두 배열키로 사용
