코밍이의 하루
[JQuery] JSONP로 교차 도메인 데이터(XML) 불러오기 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3, JS, jQuery, Ajax, php, jsonp |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) JSONP
- 교차 도메인 서버 간의 데이터를 요청하고 응답하는 방법을 말함
3. 소스 코드 및 실행 결과
- member_test.php
<?php
$data = '[
{"id":"1","name":"Choldcroft","email":"dcroft0@hibu.com"},
{"id":"2","name":"Levi","email":"wlevi1@blogger.com"},
{"id":"3","name":"Axcell","email":"laxcellc@ebay.co.uk"}
]';
echo $_GET["callback"]."(".$data.")";
?>※ php에서 .연산자는 문자열 결합 연산자
- jquery_ajax_6_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
var href = "http://shgdx12.dothome.co.kr/member_test.php?callback=myFnc";
$.ajax({
url:href,
dataType:"jsonp"
}).done(function myFnc(data){
console.log(data);
});
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
- jquery_ajax_7_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
var href = "http://shgdx12.dothome.co.kr/member_test.php?callback=myFnc"
$.ajax({
url:href,
dataType:"jsonp"
}).done(function myTest(data){
if(data.length > 0) {
var $table = $("<table/>");
data.forEach(function(o){
$id = o.id;
$name = o.name;
$email = o.email;
var trTag = $("<tr/>");
trTag.append(
$("<td/>").text($id),
$("<td/>").text($name),
$("<td/>").text($email)
);
$table.append(trTag);
});
$(".wrap").append($table);
}
});
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
※ 실행 URL : http://shgdx12.dothome.co.kr/jquery_ajax_5_test.html
Ajax
shgdx12.dothome.co.kr
※ 서버 웹호스팅 관련 사이트
https://www.dothome.co.kr/index.php
닷홈 | 호스팅은 닷홈
닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.
www.dothome.co.kr
- 해당 사이트에서 무료로 웹 호스팅하여 실제 서버에 올려 실행할 수 있었음.
'웹언어 공부 > JQuery' 카테고리의 다른 글
| [JQuery] 제이쿼리 UI 플러그인 활용 (0) | 2021.08.24 |
|---|---|
| [JQuery] 제이쿼리 플러그인 정의 (0) | 2021.08.24 |
| [JQuery] 서버 언어(PHP)로 교차 도메인 데이터(XML) 불러오기 (0) | 2021.08.24 |
| [JQuery] 자바스크립트의 보안 정책과 외부 데이터 바인딩하기 (0) | 2021.08.24 |
| [JQuery] Ajax로 XML 데이터 바인딩하기 (0) | 2021.08.24 |
'웹언어 공부/JQuery' Related Articles
more
