hyeonga_code

- webapp > ch02 > 'clock.html' html 파일을 생성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 시계 // 시간을 호출하는 함수를 작성합니다. function printTime() { var clock = document.getElementById("clock"); // 현재 시간을 가져옵니다. var now = new Date(); // clock이라는 이름을 가진 태그에 출력할 내용의 형식을 지정합니다. clock.innerHTML = now.getFullYear() + "년 " + (now.getMonth() ..

- 속성을 사용한 화면 변경 - XMLHttpRequest 객체를 사용하는 프로그램의 코드 구성 - 사용자가 이벤트를 발생시키면 웹 서버에서 데이터를 전송합니다. - 웹 서버가 생성한 응답 결과를 바탕으로 화면을 조작합니다. - alert() 메소드로 출력하는 경우 화면의 내용이 변경되거나 새로운 내용이 추가되도록 구현해야 합니다. - webapp > ch02 폴더 생성 - ch02 > innerHTML.html 파일 생성 ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 innerHTML 내용 출력 function view() { // body 태그의 p 태그를 지정합니다. var p1 = document.getElementByI..

- Ajax 실습 - webapp > ch01 > 'httpRequest.html' 파일을 생성합니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 Insert title here // 입력 버튼을 클릭하면 함수가 호출됩니다. function helloToServer() { // 매개 변수 값에 name에 입력된 값을 인코딩하여 저장합니다. var params = "name=" + encodeURIComponent(document.f.name.value); // 저장된 값을 POST 방식으로 httpRequest.jsp 파일에 넘기고 요청이 종료되면 함수를 ..

- encodeURIComponent() 함수를 제공합니다. ===== 1 2 3 4 5 6 7 8 9 // 입력값이 한글일 경우 인코딩이 필요합니다. var params = "name=" + encodeURIComponent("한글"); // 인코딩 된 값을 넘겨 글이 깨지지 않도록합니다. httpRequest.open("GET", "/myfile.jsp?" + params, true);

- XMLHttpRequest의 open() 함수는 인자를 세 개 받아옵니다. - 마지막 인자값이 동기/비동기 여부를 표시합니다. - true : 비동기 방식 - send() 함수가 호출된 뒤 곧바로 다음 코드가 실행됩니다. - false : 동기 방식 - send() 함수가 호출되고 서버와의 통신이 완전히 완료된 이후에 send() 함수 이후의 코드가 실행됩니다. ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var httpRequest = null; ... function processEvent(){ httpRequest = getXMLHttpRequest(); httpRequest.onreadystatechange = callBackFunction; httpRequest.op..

- 서버의 응답 처리 - XMLHttpRequest 객체의 프로퍼티 - onreadystatechange 프로퍼티 - 상태의 변경이 발생한 경우 해당하는 이벤트를 처리하기 위한 이벤트 핸들러를 기술합니다. httpRequest.onreadystatechange = callBackFunction; - readyState 프로퍼티 - 요청 객체의 상태를 리턴하는 것 - 프로퍼티 - UNINITIALIZED - 객체만 생성되고 아직 초기화되지 않은 상태입니다. - open 메소드가 호출되지 않습니다. - LOADING - open 메소드가 호출되고 아직 send 메소드가 호출되지 않은 상태입니다. - LOADED - send 메소드가 호출되었지만 status와 헤더는 도착하지 않은 상태입니다. - INTERA..

- 웹 서버에 요청 전송 - XMLHttpRequest 객체 메소드 - abort() - 현재의 요청을 중단하는 메소드입니다. - getAllResponseHeader() - Http요청에 대한 모든 응답 헤더들을 키와 값의 쌍인 문자열로 리턴합니다. - getResponseHeader() - 매개 변수로 주어진 headerName에 해당하는 헤더의 값을 문자열로 리턴합니다. - open() - 사용자의 요청을 설정하는 메소드입니다. - 반드시 기술해야 하는 매개변수인 method, url - 선택적으로 기술하는 요청에 대한 매개 변수 - send() - 사용자의 요청을 서버로 보내는 역할입니다. - setRequestHeader() - 헤더의 값을 설정 - Sample - 서버에 있는 "test.txt..

- XMLHttpRequest 프로그래밍 순서 - XMLHttpRequest 객체 구하기 - IE 버전 var xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); - 나머지 var xmlHttpObject = new XMLHttpRequest(); - 웹 서버에 요청 전송하기 - 웹 서버에서 응답이 도착하면 화면에 변경하기 - 웹 브라우저에 상관 없이 XMLHttpRequest 객체를 생성하는 방법 ===== 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var httpRequest = null; function getXMLHttpRequest(){ if(window.ActiveXObject){ try{ return ..

- 주요 구성 요소 - XMLHttpRequest - 웹 서버와 통신을 담당합니다. - 사용자의 요청을 웹 서버에 전속 및 웹 서버로부터 받은 결과를 웹 브라우저에 전달합니다. - DOM - 문서의 구조를 나타냅니다. - 폼 등의 정보나 화면 구성을 조작할 때 사용합니다. - CSS - 글자색, 배경색, 위치, 투명도 등 UI 관련 부분을 담당합니다. - 자바 스크립트 - 사용자가 마우스나 버튼을 클릭하면 XMLHttpRequest 객체를 사용하여 웹 서버에 요청을 전송합니다. - XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 사용하여 화면을 조작합니다.

- Ajax_Asynchronous JavaScript and XML - JavaScript를 사용한 비동기 통신입니다. - Client와 Server간에 XML 데이터를 주고받는 기술입니다. - 장점 - 페이지의 이동 없이 고속으로 화면을 전환할 수 있습니다. - 서버 처리를 기다리지 않고 비동기 요청이 가능합니다. - 서버 측 처리를 각 PC에 분산이 가능합니다. - 수신하는 데이터의 양을 줄입니다. - 단점 - 크로스 브라우저화의 노하우가 필요합니다. - 브라우저별로 호환이 가능한 부분이 다릅니다. - Ajax를 사용하지 못하는 브라우저가 있습니다. - 현재는 모두 사용이 가능합니다. - 오픈소스이므로 차별화가 쉽지 않습니다. - 보안에 더욱 신경을 써야합니다. - 기존 방식 - 웹 브라우저가 웹 ..