[JSON] JS - JSON - JSONP (= script 이용한 서버연동)

1. JSONP 소개
2. JSONP 예제1 - 페이지 로드 시 자동출력
3. JSONP 예제2 - 버튼 클릭했을 때만 출력
4. JSONP 예제3 - 버튼 클릭했을 때만 출력 (서버DB 연결)
5. [참고] 배열키 결정 방법

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: 필드명과 숫자 모두 배열키로 사용