• Q&A
  • 회원가입
  • 로그인

[AJAX] JS - AJAX - XMLHttpRequest () 메서드 ★ - 객체생성 (= 아작스 핵심)

418  

XMLHttpRequest 객체 정의 및 사용법

 

1.

XMLHttpRequest객체는 백그라운드에서 웹 서버와 데이터 교환 가능.
즉, 전체 페이지를 다시 로드 않고도 웹 페이지 일부를 업데이트 가능.


2.

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

3.

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

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

 

 

XMLHttpRequest 객체 생성 구문

 

variable = new XMLHttpRequest();

 

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>

 

※ readyState == 4 :  통신 종료 (= 통신 완료)
※ status == 200 : 통신 성공

※ JS : A.innerHTML = B
※ JQ : 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 (찾을 수 없음)"

더 자세한 정보는 아래 좌표 참고

 

https://homzzang.com/b/html-154

 

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

 



찾아주셔서 감사합니다. Since 2012