• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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") 반환.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
String JS - concat() 메서드 ★ - 문자열결합 (= 문자열합치기 = concat메서드 = 컨캣메서드)
String JS - endsWith() 메서드 - 지정문자열로 끝나는지(=종료) 여부 (IE12이상)
String JS - fromCharCode() 메서드 - 유니코드를 문자열로 변환
String JS - includes() 메서드 ★ - 지정문자열포함여부 (= includes메서드 = 인클루드즈메서드)
String JS - indexOf() 메서드(문자열) ★ - 처음일치문자열위치찾기 (= 문자열포함검사 = 인덱스어브메서…
String JS - lastIndexOf() 메서드(문자열) ★ - 마지막일치문자열위치찾기 (= 문자열포함검사 = 라스…
String JS - localeCompare() 메서드 - 문자열순서비교
String JS - match() 메서드 ★ - 일치하는 문자열 반환 (= match메서드 = 매치메서드) ※ 정규식 …
String JS - repeat() 메서드 - 지정횟수만큼 문자열반복 (= 리피트)
String JS - replace() 메서드(String용) ★ - 문자열 대체 (= replace메서드 = 리플레이스…
String JS - search() 메서드 - 문자열위치찾기 ※ 문자열포함검사
String JS - slice() 메서드 - 문자열 자르기 (= 문자열 일부 추출 = slice메서드 = 슬라이스 메서…
String JS - split() 메서드 - 문자열 쪼개기 (= split메서드 = 스플릿 메서드) ※ 이메일숨기기 (…
String JS - startsWith() 메서드 - 지정문자열로 시작 여부 (IE12이상)
String JS - substr() 메서드 ★ - 문자열 자르기 - 문자열의 특정 위치 이후의 특정 길이 만큼 반환
String JS - substring() 메서드 ★ - 문자열 일부 추출 (= 문자열 자르기 = substring메서드…
String JS - toLocaleLowerCase() 메서드 - 로캘 소문자로 변환
String JS - toLocaleUpperCase() 메서드 - 로캘 대문자로 변환
String JS - toLowerCase() 메서드 - 소문자로변환
String JS - toString() 메서드 (문자열경우) - 문자열타입으로 변경 (= toString메서드 = 투스…
6/67
목록
찾아주셔서 감사합니다. Since 2012