[AJAX] JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = XMLHttpRequest메서드 = 엑스엠엘에이치티티피리퀘스트메서드)

목차

1. XMLHttpRequest 객체 정의
2. XMLHttpRequest 객체 생성 구문
3. XMLHttpRequest 예제 - 새로고침 없이 문자열 변경
4. XMLHttpRequest 객체의 메서드 종류
5. XMLHttpRequest 객체의 속성 종류

XMLHttpRequest 객체 정의

 

XMLHttpRequest객체는 백그라운드에서 웹 서버와 데이터 교환 가능.

즉, 전체 페이지를 다시 로드 않고도 웹 페이지 일부를 업데이트 가능.

 

---

1.

IE7 이상 주요 최신 브라우저는 XMLHttpRequest 객체 지원.
cf. IE6, IE는 ActiveXObject 객체 이용. 

2.

보안 상의 이유로 최신 브라우저는 도메인 간 접근을 비허용.

즉, 로드할 웹페이지와 XML 파일 모두 동일 서버에 있어야 함.
 

XMLHttpRequest 객체 생성 구문

 

variable = new XMLHttpRequest();

 

---

PS.

• variable : 변수
• new : 객체 생성 키워드

XMLHttpRequest 예제 - 새로고침 없이 문자열 변경

b.php

 

<p id="demo">코딩 배우기 가장 좋은 사이트는 어디 ?</p>

<button type="button" onclick="hz()">클릭</button>

<script>

function hz() {

  // 비동기 통신할 객체 생성

  var xhttp;

  if (window.XMLHttpRequest) { // IE7 이상 최신 브라우저    

    xhttp = new XMLHttpRequest();

  } else { // IE6 이하 구형 브라우저

    xhttp = new ActiveXObject("Microsoft.XMLHTTP");

  }

  // 통신 성공 시 취할 조치

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      document.getElementById("demo").innerHTML = this.responseText;

    }

  };

  // 서버에 요청 보내기

  xhttp.open("GET", "a.php", true); // GET 방식으로 a.php 파일을 비동기로 요청.

  xhttp.send(); // 요청을 보내기.

}

</script>

 

---

a.php (ajax로 불러올 파일)

 

<h1>홈짱닷컴 소개  Homzzang.com</h1>

<p>HTML - 기본틀</p>

<p>CSS - 디자인</p>

<p>JS - 동작기능</p>

 

---

PS.

• readyState == 4 : 통신준비완료
• status == 200 : 대상파일존재
• JavaScript 경우 : A.innerHTML = B
• jQuery 경우 : A.html(B)

 

XMLHttpRequest 객체의 메서드 종류

 

new XMLHttpRequest () 

새로운 XMLHttpRequest 객체 생성.

 

abort ()
현재 요청을 취소.

 

getAllResponseHeaders ()
헤더 정보를 반환.

 

getResponseHeader ()
특정 헤더 정보를 반환.

open (method, url, async, user, psw)
요청을 구체화.

• method : 요청 유형 GET 또는 POST
• url : 파일 위치
• async : true (비동기) 또는 false (동기)
• user : 선택적 사용자 이름
• psw : 선택적 암호

 

send () 

서버에 요청 보내기. GET 방식 요청일 때 사용.

 

send (string) 

서버에 요청 보냄. POST 방식 요청일 때 사용.

setRequestHeader ()
보낼 헤더에 label / value 짝을 추가.

※ GET 방식 vs. POST 방식 비교

XMLHttpRequest 객체의 속성 종류

 

onreadystatechange
readyState 속성 변경될 때 호출할 함수 정의.

readyState
XMLHttpRequest 상태 표시

• 0 : 요청이 초기화 안 된 상태
• 1 : 서버 연결 설정된 상태
• 2 : 요청 접수된 상태
• 3 : 요청 처리 중 상태
• 4 : 요청 완료되고 응답 준비된 상태 ★

 

responseText 

응답 데이터를 문자열로 반환.

 

responseXML 

응답 데이터를 XML 데이터로 반환.

 

status 

요청의 상태 번호 반환. 

• 200 : "OK (통신성공 상태)" ★
• 403 : "Forbidden (접근금지 상태)"
• 404 : "Not Found (찾을 수 없음)"
• 더 자세한 정보 보기

 

statusText
상태 텍스트 (예 : "OK" 또는 "Not Found") 반환.