JavaScript AJAX XMLHttpRequest

    2018-05-10 15:44:45 작성

    AJAX

    AJAX는 Asynchronous JavaScript And XML의 약자 입니다.
    AJAX는 XMLHttpRequest 객체를 사용하여 웹서버에서 데이터를 요청하고,
    JavaScript를 사용하여 HTML DOM에 데이터를 표시합니다.

    XML 문서 뿐아니라 일반 TEXT문서 그리고 JSON 문자열로 데이터를 전송할수 있습니다.

    AJAX를 사용하면 다음과 같은 일을할 수 있습니다.

    • 페이지가 로드 된 후 웹 서버에서 데이터 읽기
    • 페이지를 다시 로드하지 않고 웹페이지를 업데이트
    • 백그라운드에서 웹 서버에 데이터 보내기

    • XMLHttpRequest 객체

      XMLHttpRequest 객체를 생성하려면 다음과 같은 구문으로 생성합니다.

      var xhttp = new XMLHttpRequest();

      메서드 설명
      abort() 현재 요청을 취소합니다.
      open(method, url, async) 요청을 시작합니다.
      method : 요청 타입으로 GET 또는 POST 입니다.
      url : 파일의 위치 입니다.
      async : true(비동기) 또는 false(동기)
      send(string) 요청을 서버로 보냅니다.
      GET방식은 매개변수 없이 사용하며,
      POST 방식은 서버로 전송할 문자열을 매개변수로 지정합니다.
      setRequestHeader(label, value) 요청 해더를 추가합니다.
      open()과 send() 사이에서 호출해야 합니다.
      getAllResponseHeaders() 전체 해더 정보를 반환합니다.
      getResponseHeader() 지정한 해더 정보를 반환합니다.
      속성 설명
      onreadystatechange readyState 속성이 변할때 이벤트를 감지하여 호출한 function을 정의 합니다.
      readyState XMLHttpRequest 객체의 상태입니다.
      0: 요청이 초기화 되지 않았습니다.
      1: 서버 연결이 설정됨
      2: 요청 접수
      3: 처리 요청
      4: 요청이 완료되고 응답 준비가 완료되었습니다.
      status 요청의 상태를 반환합니다. 대표적인 상태는
      200: 성공
      403: 금지됨
      404: 찾을수 없음
      statusText 요청의 상태를 문자열로 반환합니다.
      responseText 응답데이터를 TEXT로 받습니다.
      responseXML 응답데이터를 XML 데이터로 받습니다.

      보안상의 이유로 로드하려는 파일은 동일한 서버에 있어야 합니다.