AJAX란 ?
AJAX 이론
1.AJAX
Asynchoronous Javascript And XML
JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술
==> 자바스크립트를 통해서 서버에 데이터를 요청하는 것
2.비동기란?
웹페이지를 리로드하지 않고도 데이터를 불러오는 방식
3.AJAX를 사용 가능하게 하는 기술?
HTML
DOM
JavaScript
XMLHttpRequest
4.AJAX로 할 수 있는 것
클라이언트에서 서버로 데이터를 요청하고 결과를 돌려받을 수 있다. 그런데 그 동안 브라우저가 멈추지 않는다.
5.클라이언트란?
서버에서 정보를 가져와 사용자에게 보여줄 수 있는 소프트웨어를 말한다.
예) 웹브라우저, App
6.서버란?
네트워크상에서 접근할 수 있는 프로그램
어떤 자료들에 대한 관리나 접근을 제어하는 프로그램
일반적으로 서버에는 사용자가 직접적으로 접근하지 않는다.
7.AJAX를 사용하는 이유?
실시간으로 웹 화면을 갱신하고 싶은 경우 기본적으로 HTTP 통신은 클라이언트에서 Request를 보내고 서버측에서 Response를 받으면 연결이 종료된다.
내용의 일부를 갱신하기 위해서 페이지 전체를 다시 읽어와야 한다.
AJAX는 일부 화면을 새로고침 없이 갱신할 수 있는 기술이다.
8.AJAX의 장점?
웹페이즈의 속도향상
서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
서버에서 Data만 정송하면 되므로 저체적인 코드의 양이 줄어든다.
기존 엡에서는 불가능했던 다양한 UI를 가능하게 해준다.
9.AJAX의 단점?
히스토리 관리가 되지 않는다.
페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
XMLHttpRequest를 통해 통신하는 경우 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
HTTP 클라이언트의 기능이 한정되어 있다.
지원하는 Charset이 한정되어 있다.
Script로 작성되므로 디버깅이 용이하지 않다.
동일 출처 정챌으로 인하여 다른 도메인과는 통신이 불가능하다(Cross-Domain문제)
10.AJAX진행과정
- XMLHttpRequest Object를 만든다.
- requset를 보낼 준비를 브라우저에게 시키는 과정
- 이것을 위해서 필요한 method를 갖춘 object가 필요함
- callback 함수를 만든다.
- 서버에서 response가 왔을 때 실행시키는 함수
- HTML 페이지를 업데이트 함
- Open a request
- 서버에서 response가 왔을 때 실행시키는 함수
- HTML 페이지를 업데이트 함
- send the request
AJAX 코드 예실습
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
}