코밍이의 하루
[JQuery] 자바스크립트의 보안 정책과 외부 데이터 바인딩하기 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3, JS, jQuery, Ajax |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) 자바스크립트의 보안 정책
- 동일 출처 원칙(Same-originpolicy) : 자바스크립트로 A 사이트(www.aaa.com)의 데이터를 B 사이트(www.bbb.com)로 불러오는 것을 허용하지 않음.
- ajax() 메소드로는 서로 다른 도메인의 데이터를 전송할 수 없을 뿐만 아니라 교차 도메인도 허용하지 않음.
2) 서로 다른 사이트에서 데이터 주고 받는 방법
① 서버 언어 사용
- 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공
- 주로 관리자가 직접 접근할 수 없는 외부 서버의 데이터를 가져올 때 사용
② JSONP 사용
- '동일 출처 보안 정책'을 피해야 하고 관리자의 외부 서버 접근이 가능해야 한다는 전제 조건 필요
- 교차 도메인으로 데이터를 불러올 때 사용
3) RSS(Really Simple Syndication)
- 초간편 배포
- 새로운 읽을거리가 자주 갱신되는 블로그나 뉴스에서 주로 사용하는 XML 기반의 콘텐츠 배급 포맷
- 뉴스나 블로그의 관심 있는 읽을거리만 모아서 볼 수 있음
- 사이트 연동 가능
3. 소스 코드 및 실행 결과
- jquery_ajax_4_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Ajax </title>
<script src="js/jquery.js"></script>
<script>
$(function() {
$.ajax({
url:"http://myhome.chosun.com/rss/www_section_rss.xml",
dataType:"xml",
success:function(data){
console.log(data);
}
});
});
</script>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
- 동일 출처 원칙에 따른 오류 발생
※ 실행 URL : http://shgdx12.dothome.co.kr/jquery_ajax_4_test.html
Ajax
shgdx12.dothome.co.kr
※ 서버 웹호스팅 관련 사이트
https://www.dothome.co.kr/index.php
닷홈 | 호스팅은 닷홈
닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.
www.dothome.co.kr
- 해당 사이트에서 무료로 웹 호스팅하여 실제 서버에 올려 실행할 수 있었음.
'웹언어 공부 > JQuery' 카테고리의 다른 글
| [JQuery] JSONP로 교차 도메인 데이터(XML) 불러오기 (0) | 2021.08.24 |
|---|---|
| [JQuery] 서버 언어(PHP)로 교차 도메인 데이터(XML) 불러오기 (0) | 2021.08.24 |
| [JQuery] Ajax로 XML 데이터 바인딩하기 (0) | 2021.08.24 |
| [JQuery] Ajax - $ajax()메소드 (0) | 2021.08.24 |
| [JQuery] Ajax 관련 메소드 (0) | 2021.08.23 |
