AJAX의 작동 원리, 장점 및 단점에 대한 자세한 설명

AJAX는 빠르고 동적인 웹페이지를 만드는 기술입니다. AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

1. Ajax에 포함된 기술

Ajax가 새로운 기술이 아니라 여러 가지 원천기술의 조합이라는 것은 누구나 알고 있는 사실입니다. 이는 다음과 같은 기술로 구성됩니다.

CSS와 XHTML을 사용하여 표현되었습니다.

상호작용 및 동적 표시를 위해 DOM 모델을 사용합니다.

XMLHttpRequest를 사용하여 서버와 비동기적으로 통신합니다.

바인딩 및 호출에는 자바스크립트를 사용하세요.

위 기술 중 XmlHttpRequest 객체를 제외한 다른 모든 기술은 웹 표준을 기반으로 하며 널리 사용됩니다. XMLHttpRequest는 아직 W3C에서 채택되지 않았지만 이미 표준으로 자리잡고 있습니다. 현재 거의 모든 주요 브라우저가 이를 지원합니다.

2. ajax 생성 방법

Ajax의 원리는 단순히 XmlHttpRequest 객체를 통해 서버에 비동기 요청을 보내고, 서버로부터 데이터를 얻은 후, javascript를 사용하여 동작시키는 것입니다. DOM을 사용하고 페이지를 업데이트합니다. 가장 중요한 단계는 서버에서 요청 데이터를 얻는 것입니다. 기본적으로 Ajax를 생성하는 작업은 다음 네 단계로 나눌 수 있습니다.

1. XMLHttpRequest 객체 생성

모든 최신 브라우저(IE7+, Firefox, Chrome, Safari 및 Opera)에는 XMLHttpRequest 객체가 내장되어 있습니다.

XMLHttpRequest 객체 생성 구문:

var xhr = new XMLHttpRequest();

이전 버전의 Internet Explorer(IE5 및 IE6)에서는 ActiveX 객체를 사용합니다.

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

IE5, IE6을 포함한 모든 최신 브라우저를 처리하려면 해당 브라우저가 XMLHttpRequest 개체를 지원하는지 확인하세요. 지원되는 경우 XMLHttpRequest 객체를 만듭니다. 지원되지 않는 경우 ActiveXObject를 생성합니다.

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 요청 준비

XMLHttpRequest 객체를 초기화하고 세 가지 매개변수를 허용합니다:

xhr.open(method,url,async);

첫 번째 매개변수는 요청 유형의 문자열을 나타내며 해당 값은 GET 또는 POST일 수 있습니다.

GET 요청:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST 요청:

xhr.open("POST",demo.php,true);

두 번째 매개변수는 요청을 보낼 URL입니다.

세 번째 매개변수는 true 또는 false이며 요청이 비동기 모드에서 실행되는지 아니면 동기 모드에서 실행되는지를 나타냅니다. (기본값은 true, false는 일반적으로 권장되지 않음)

false: 동기 모드에서 실행된 요청은 브라우저가 네트워크에 연결되거나 다운로드되는 경우 서버가 응답을 받을 때까지 모든 자바스크립트 코드의 실행을 일시 중지합니다. file 문제가 발생하면 페이지가 영원히 정지됩니다.
true: 비동기 모드에서 발행된 요청입니다. 요청 개체가 데이터를 보내고 받는 동안 브라우저는 계속해서 페이지를 로드하고 다른 자바스크립트 코드를 실행할 수 있습니다.

3 요청 보내기

xhr.send() ;

일반적인 상황에서 Ajax를 사용하여 제출하는 매개변수는 대부분 간단한 문자열입니다. 제출할 매개변수를 open 메소드의 url 매개변수에 직접 작성하면 됩니다. . 이때 전송 메소드의 매개변수는 null이거나 비어 있습니다.

GET 요청:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST 요청:

HTML 형식과 같이 데이터를 POST해야 하는 경우, HTTP 헤더를 추가하려면 setRequestHeader()를 사용하세요. 그런 다음 send() 메서드에 보내려는 데이터를 지정합니다.

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4. 응답 처리

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

onreadystatechange 이벤트:

요청이 서버로 전송되면 몇 가지 응답 기반 작업을 수행해야 합니다. ReadyState가 변경될 때마다 onreadystatechange 이벤트가 트리거됩니다.

readyState 속성:

0: 객체가 생성되었지만 open() 메서드가 아직 호출되지 않았습니다.

1: open() 메서드가 호출되었지만 아직 요청이 전송되지 않았습니다.

2: 요청이 전송되었으며 헤더와 상태가 수신되어 사용 가능합니다.

3: 서버로부터 응답을 받았습니다.

4: 요청 데이터를 수신하면 요청이 완료되었음을 의미합니다.

status 속성:

200: "OK"

404: 페이지를 찾을 수 없음

responseText: 문자열 형식으로 응답 데이터 가져오기

responseXML: XML 형식으로 응답 데이터 가져오기

반환 값은 일반적으로 JSON 문자열이며 JSON.parse(xhr.responseText)를 사용하여 JSON 개체로 변환할 수 있습니다.

5. 전체 예시

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

data.json

{
"name":"tsrot",
"age":24
}

3. Ajax 애플리케이션 시나리오

시나리오 1. 데이터 검증

시나리오 2. 요청 시 데이터 가져오기

시나리오 3. 페이지 자동 업데이트

4. ajax의 장점과 단점

장점:

1. 페이지 새로 고침이 없고 사용자 경험이 좋습니다.

2. 비동기 통신, 더 빠른 응답 능력.

3. 중복 요청 감소 및 서버 부담 감소

4. 표준화되고 널리 지원되는 기술을 기반으로 플러그인이나 애플릿을 다운로드할 필요가 없습니다.

단점:

1. Ajax는 뒤로 버튼을 종료하여 브라우저의 뒤로 메커니즘을 파괴합니다.

2. 특정 보안 문제가 있습니다.

3. 검색 엔진에 대한 지원이 상대적으로 약합니다.

4. 프로그램의 예외 메커니즘을 삭제했습니다.

5. URL로는 직접 접속할 수 없습니다.