Ajax (Asynchronous JavaScript and XML)
: JavaScript 를 이용한 비동기 통신
-> XMLHttpRequest 객체를 이용하여 Client 와 Server 간 정보(XML 데이터)를 주고받는 기술
| 장점 | 단점 |
|---|---|
| 서버 처리를 기다리지 않고 비동기 요청이 가능 | 다른 도메인과 연결 불가능 |
| -> 페이지이동(새로고침) 없이 고속으로 화면 전환 | 오픈소스이므로 차별화가 어려움 |
| -> 수신하는 데이터 양 감소 | 히스토리 관리 안됨 |
| -> 수신하는 데이터 양 감소 | (페이지 이동이 없으므로) 보안이 약함 |
| -> 서버 측 처리를 각 PC에 분산 가능 | 해당 브라우저에서의 AJAX 사용 가능 여부 |
로직 차이
| 기존방식 | AJAX |
|---|---|
 |  |
| AJAX |
|---|
| 주요 구성요소 : |
| 1. XMLHttpRequest : 웹서버와 사용자의 통신을 담당 |
| 2. DOM : 문서의 구조,tree 형식 |
| 3. CSS |
| 4. JavaScript : 이벤트 발생 시 XMLHttpRequest 객체 이용 |
| 프로그래밍 순서 : |
| 1. XMLHttpRequest 객체 생성 |
| 2. 웹서버에 요청 전송 |
| 3. 웹서버에서 응답 도착 화면에 조작 |
| XMLHttpRequest 객체 생성 방식 | Ex |
|---|---|
| 1-a. activeXObject 객체 (IE 브라우저 - IE5 이후) | var xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP"); |
| 1-b. activeXObject 객체 (IE 브라우저 - IE5 이전) | var xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); |
| 2. XmlHttpRequest 객체 (그 외 브라우저) 사용자에 진행정보 제공 안 함 | var xmlHttpObject = new XMLHttpRequest(); |
| JS에서 동적으로 DOM(DocumentObjectModel) 생성 | Ex |
|---|---|
| 1. 요소태그 생성 | var header = document.createElement('h2'); |
| 2. 텍스트 생성 | var textNode= document.createTextNode('Hello DOM'); |
| 3. 태그에 텍스트 삽입 | header.appendChild(textNode); |
| 4. Body 태그에 입력 | document.body.appentChile(header); |
웹서버에 요청 전송 (XMLHttpRequest 객체의 메서드)
abort() : 현재의 요청을 중단한다
getAllResponseHeaders() : Http 요청에 대한 모든 응답 헤더들을 키와 값이 쌍인 문자열로 리턴
getResponseHeader() : 매개변수로 주어진 headerName에 해당하는 헤더의 값을 문자열로 리턴
open() : 사용자의 요청을 설정한다
("[GET|POST]","url",[true|false])
-> 이때, true(동기)/false(비동기)는 선택사항
send() : 사용자의 요청을 서버로 전달
setRequestHeader() : 헤더의 값을 설정
부가정보
HTTP 헤더 : 클라이언트서버 간 요청 혹은 응답으로 부가정보 전송
Request Header : fetch될 resource 혹은 client 자체에 대한 정보를 포함하는 헤더
Response Header : 위치 혹은 서버 자체에 대한 정보(이름,비번,...) 등
응답에 대한 부가정보를 포함하는 헤더
HTTP 헤더 속성 : General Header, Request Header, Reponse Header, Entity Header
Get : url에 값 포함, send에 null Post : url에 값 없음, send에 값 삽입
window.onload() Vs $(document).ready()
| onload() | ready() |
|---|---|
| 페이지의 모든 요소가 로드된 후 호출 | DOM 로드된 후 호출 |
| 한 페이지에 한번(마지막 함수)만 사용 가능 | 한 페이지에서 중복 사용 가능 |
window.onload() = function(){}<body onload = "function()">window::onload() | $(document).ready(function(){}) |
<body>의 onload속성은 window.onload와 동시 사용 불가능=> 따라서 마지막 gkatndls <body>만 적용됨 다만, window::onload()는 <body>와 동시 적용 가능<body>태그의 onload먼저 실행 후 window::onload()실행됨 |
| 실행순서 |
|---|
DOM 생성 $(document).ready() 이미지를 포함한 요소를 로드 |
(단일사용) <body>의 onload 혹은 window.onload 실행 |
(동시사용) <body>의 onload 이후 window::onload() 실행 |
개발자를 꿈꾸는