AJAX(1)
🎁 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를 초기화. 다른 모든 메소드 호출 이전에 호출되어야 함.
🎁 속성
XMLHttpRequest.onreadystatechange
readyState
어트리뷰트가 변경될때마다 호출되는 EventHandler.
XMLHttpRequest.readyState
(Read only)- 요청의 상태를
unsigned short
로 반환.
- 요청의 상태를
XMLHttpRequest.response
- 응답 엔티티 바디를 갖는
XMLHttprequest.responseType
의 값에 따라ArrayBuffer
,Blob
,Document
,Javascript객체
, 또는DOMString
을 반환.
- 응답 엔티티 바디를 갖는
XMLHttpRequest.responseText
- 요청에 대한 응답을 텍스트로 갖는
DOMString
을 반환.
- 요청에 대한 응답을 텍스트로 갖는
🎁 메소드
XMLHttpRequest.abort()
- 이미 전송된 요청을 중지.
XMLHttpRequest.getAllResponseHeaders()
- 모든 응답 헤더를 CRLF로 구분한 문자열로 반환. 응답을 받지 않은 경우
null
- 모든 응답 헤더를 CRLF로 구분한 문자열로 반환. 응답을 받지 않은 경우
XMLHttpRequest.getResponseHeader()
- 지정된 헤더의 텍스트를 갖는 문자열을 반환. 응답을 받지 못한 경우
null
- 지정된 헤더의 텍스트를 갖는 문자열을 반환. 응답을 받지 못한 경우
XMLHttpRequest.open(method, url[,async[,user[,password]]])
- 요청을 초기화. 네이티브 코드로부터 요청을 초기화하기 위해 JavaScript코드에 의해 사용됨.
- method :
"GET"
,"POST"
,"PUT"
,"DELETE"
등이 존재. - url : URL을 나타내는
DOMString
XMLHttpRequest.send()
- 요청을 보낸다. 요청이 비동기인 경우(기본값) 이 메소드는 요청이 보내진 즉시 반환.
📌 Request
🎁 Server에 request 보내기.
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
-
open(method, url, async)
- method : GET or POST
- url : server의 위치
- async : true(비동기) or false(동기)
-
send() : GET을 사용해서 server에 request를 보냄.
-
send(string) : POST를 사용해서 server에 request를 보냄.
🎁 GET or POST
GET
이POST
보다 빠르고 간단.- 언제 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");
Author And Source
이 문제에 관하여(AJAX(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@luck2901/AJAX1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)