Ajax5 서버로부터의 응답(response) 확인[AJAX개발] Ajax에서 서버로부터의 응답을 확인하기 XMLHttpRequest 객체의 프로퍼티 3가지 - readyState 프로퍼티 - status 프로퍼티 - onreadystatechange 프로퍼티 readyState 프로퍼티 readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타냄 1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성 2. OPENED (숫자 1) : open() 메소드가 성공적으로 실행 3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착 4. LOADING (숫자 3) : 요청한 데이터를 처리 중 5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료 status 프로퍼티 status .. 2023. 11. 3. 서버에 요청(request)하기[AJAX개발] 서버에 요청(request)하기 XMLHttpRequest 인스턴스의 open() 메소드와 send() 메소드를 사용하여 요청보내기 가능 open() 메소드 open() 메소드는 서버로 보낼 Ajax 요청의 형식을 설정 open(전달방식, URL주소, 동기여부); send() 메소드 send() 메소드는 작성된 Ajax 요청을 서버로 전달 send(); // GET 방식 send(문자열); // POST 방식 GET 방식과 POST 방식 GET 방식: 주소에 데이터(data)를 추가하여 전달하는 방식으로 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됨 보통 쿼리 문자열(query string)에 포함되어 전송되어, 길이의 제한이 있음 보안상 취약점이 존재(중요한 데이터는 POST 방식을 사.. 2023. 11. 3. AJAX-XMLHttpRequest 객체[AJAX개발] XMLHttpRequest 객체 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문 XMLHttpRequest 객체의 생성 1. XMLHttpRequest 객체를 이용한 방법 2. ActiveXObject 객체를 이용한 방법 문법 # 익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라에서는 XMLHttpRequest 객체를 사용 var 변수이름 = new XMLHttpRequest(); # 스플로러의 구형 버전인 5와 6 버전에서는 ActiveXObject 객체를 사용 var 변수이름 = new ActiveXObject("Microsoft.XMLHTTP"); EX.. 2023. 11. 2. AJAX-DOM, 노드, DOM API[AJAX] 문서 객체 모델(DOM) DOM(Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스 DOM을 이용하여 웹 페이지의 일부 요소만을 변경 가능 DOM 요소의 선택 자바스크립트로 DOM 요소를 다루기 위해서는 우선 해당 요소를 선택해야함 * DOM 요소를 선택하는 방법 1. 태그 이름(tag name)을 이용한 선택 2. 아이디(id)를 이용한 선택 3. 클래스(class)를 이용한 선택 4. CSS 선택자(selector)를 이용한 선택 5. HTML 객체 집합(object collection)을 이용한 선택 DOM 요소의 내용 변경 DOM 요소의 내용을 바꾸는 방법은 innerHTML 프로퍼티를 이용하는 것 DOM 요소의 속성 이름을 이용하면 속성값을 .. 2023. 11. 2. Ajax 란? Ajax[Asynchronous JavaScript and XML]Ajax는 그 자체가 별도의 새로운 언어는 아니며 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 HTML, CSS, 자바스크립트, DOM, XML 등 여러 기술을 함께 사용하는 새로운 개발 기법 Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여 결과를 웹 페이지의 일부분에만 표시 가능 Ajax의 장점 1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 가능 2. 웹 페이지가 로드된 후에 서버로 데이터 요청 보내기 가능 3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받기 가능 4. 백그라운드 영역에서 서버로 데이.. 2023. 11. 2. 이전 1 다음 728x90
