로드 이벤트
<인라인 이벤트 형식>
<script>
function getKorDay() {
var kordayname = ["일", "월", "화", "수", "목", "금", "토"]
return kordayname[new Date().getDay()];
}
</script>
</head>
<body onload="window.alert('반갑습니다!! 오늘은 즐거운 '+getKorDay()+'욜입니다.')">
<h1>로드 이벤트를 테스트 합니다.(인라인 이벤트 모델)</h1>
<hr>
<p>로드(load) 이벤트가 무엇인가요?</p>
<p>문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 브라우저에서 자동으로 발생하는 이벤트</p>(참고)자바스크립트에서는 일요일이 0이다.
로드 이벤트란 문서의 모든 콘텐츠가 로드된 후 브라우저에서 자동으로 발생하는 이벤트
인라인, 고전, 표준 형식으로 작성이 가능하다.
<고전 이벤트 형식>
<script>
function getKorDay() {
var kordayname = ["일", "월", "화", "수", "목", "금", "토"]
return kordayname[new Date().getDay()];
}
</script>
</head>
<body>
<h1>로드 이벤트를 테스트 합니다.(고전 이벤트 모델)</h1>
<hr>
<p>로드(load) 이벤트가 무엇인가요?</p>
<p>문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 브라우저에서 자동으로 발생하는 이벤트</p>
<script>
window.onload = function() {
window.alert('반갑습니다!! 오늘은 즐거운 '+getKorDay()+'욜입니다.');
}
</script><표준 이벤트 형식>
<script>
function getKorDay() {
var kordayname = ["일", "월", "화", "수", "목", "금", "토"]
return kordayname[new Date().getDay()];
}
</script>
</head>
<body>
<h1>로드 이벤트를 테스트 합니다.(표준 이벤트 모델)</h1>
<hr>
<p>로드(load) 이벤트가 무엇인가요?</p>
<p>문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 브라우저에서 자동으로 발생하는 이벤트</p>
<script>
window.addEventListener("load",function() {
window.alert('반갑습니다!! 오늘은 즐거운 '+getKorDay()+'욜입니다.')
});
</script>고전 방식과 거의 같으며, 함수만 window.onload()에서 window.addEventListener()로
바뀌었음
json
JSON(제이슨, JavaScript Object Notation)은, 인터넷에서 자료를 주고 받을 때 그 자료를
표현하는 방법이다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데
적합하다. 형식은 자바스크립트의 구문 형식을 따르지만,
프로그래밍 언어나 플랫폼에 독립적이므로 C,
C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 많은 언어에서 이용할 수 있다.
AJAX
AJAX = Asynchronous JavaScript and XML
고전적인 웹의 통신 방법은웹페이지의 일부분을 갱신하기 위해서는 페이지 전체를 다시 로드해야했다.
AJAX 의 핵심은 재로드(refresh 재갱신)
하지않고 웹페이지의 일부만을 갱신하여
웹서버와 데이터를 교환하는 방법이다.
즉, 빠르게 동적 웹페이지를 생성하는 기술이다.
(1) XMLHttpRequest 객체 생성
(2) XMLHttpRequest 객체에 load 이벤트에 대한 핸들러를 등록 (응답된 컨텐츠를 사용하는 내용)
(3) XMLHttpRequest 객체 open() 메서드를 호출하여 대상 URL 또는 URI 정보를 등록
(4) XMLHttpRequest 객체 send()
모든 서버들이 AJAX 요청을 지원하는 것은 아니
a 태그로는 요청 가능
ajax 요청 불가 ----------> 컨텐츠 보호 : same origin policy
HTTP - 클라이언트 --------------> 서버
요청헤더 응답헤더
Same Origin Policy(SOP)
▪ 브라우저에서 보안상의 이슈로 동일 사이트의 자원(Resource)만접근해야 한다는 제약이다.
▪ AJAX는이 제약에영향을 받으므로Origin 서버가 아니면 AJAX 로요청한 컨텐츠를 수신할수
없다.
▪ Cross Origin Resource Sharing(CORS)
▪ 초기에는 Cross Domain이라고 하였다.(동일 도메인에서 포트만 다른 경우, 로컬 파일인경우
등으로 인해Origin이라는 으로 용어 통일됨)
▪ Origin 이 아닌 다른 사이트의 자원을 접근하여 사용한다는 의미이다.
▪ Open API 의 활성화와공공 DB 의 활용에의해서 CORS 의 중요성이 강조되고 있다.
▪ HTTP Header에 CORS 와 관련된 항목을 추가한다.
AJAX
response.addHeader("Access-Control-Allow-Origin", "*")
