AJAX(1)

한상현·2021년 3월 12일
ajaxhtmljsw3schools
0

AJAX

목록 보기
1/1
post-thumbnail

🎁 w3schools, Mozilla를 보며 혼자 공부하는 AJAX.

📌 AJAX 구성

💻HTML Page

<!DOCTYPE html>
<html>
    <body>
        <div id="demo">
            <h2>Let AJAX change this text</h2>
            <button type="button" onclick="loadDoc()">Change Content</button>
        </div>
    </body>
</html>
  • HTML 페이지에 div와 button을 포함한다.
  • <div>는 server에서 오는 정보를 보여준다.
  • <button> 은 function을 부르는 역할(클릭이벤트로).

function loadDoc() {
       var xhttp = new XMLHTTPRequest();
       xttp.onreadystatechange=function(){
       if(this.readyState==4 && this.status ==200){
       document.getElementById("demo").innerHTML = this.responseText;
           }
       };
       xhttp.open("GET", "ajax_info.txt", true);
       xhttp.send();
}

📌 XMLHttpRequest

👀 XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 사용. 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트 할 수 있도록 해줌.(주로 AJAX에서 사용)

🎁 생성자 : XMLHttpRequest를 초기화. 다른 모든 메소드 호출 이전에 호출되어야 함.

🎁 속성

  1. XMLHttpRequest.onreadystatechange
    • readyState 어트리뷰트가 변경될때마다 호출되는 EventHandler.
  2. XMLHttpRequest.readyState (Read only)
    • 요청의 상태를 unsigned short로 반환.
  3. XMLHttpRequest.response
    • 응답 엔티티 바디를 갖는 XMLHttprequest.responseType의 값에 따라 ArrayBuffer, Blob, Document, Javascript객체, 또는 DOMString을 반환.
  4. XMLHttpRequest.responseText
    • 요청에 대한 응답을 텍스트로 갖는 DOMString을 반환.

🎁 메소드

  1. XMLHttpRequest.abort()
    • 이미 전송된 요청을 중지.
  2. XMLHttpRequest.getAllResponseHeaders()
    • 모든 응답 헤더를 CRLF로 구분한 문자열로 반환. 응답을 받지 않은 경우 null
  3. XMLHttpRequest.getResponseHeader()
    • 지정된 헤더의 텍스트를 갖는 문자열을 반환. 응답을 받지 못한 경우 null
  4. XMLHttpRequest.open(method, url[,async[,user[,password]]])
    • 요청을 초기화. 네이티브 코드로부터 요청을 초기화하기 위해 JavaScript코드에 의해 사용됨.
    • method : "GET", "POST", "PUT", "DELETE" 등이 존재.
    • url : URL을 나타내는DOMString
  5. XMLHttpRequest.send()
    • 요청을 보낸다. 요청이 비동기인 경우(기본값) 이 메소드는 요청이 보내진 즉시 반환.

📌 Request

🎁 Server에 request 보내기.

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

  1. open(method, url, async)

    • method : GET or POST
    • url : server의 위치
    • async : true(비동기) or false(동기)

  2. send() : GET을 사용해서 server에 request를 보냄.

  3. send(string) : POST를 사용해서 server에 request를 보냄.

🎁 GET or POST

  1. GET이 POST보다 빠르고 간단.
  2. 언제 POST를 사용??
    • 대량의 데이터를 전송할 때 (POSTsms 크기제한이 없음)
    • user의 입력을 보낼 때(POST가 GET보다 안전.)

🎁 GET Requests

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
  • 만약 GET 메소드를 통해 정보를 보내고 싶다면??
  • url을 통해 같이 보냄.
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();

🎁 POST Requests

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
profile
한상현
의 공부 노트.

0개의 댓글