dev.Log
Ajax 본문
open(전달방식, URL주소, 동기여부) : 서버로 보낼 Ajax 요청의 형식을 설정함
send(); //GET 방식
send(문자열); //POST방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function sendRequest() {
console.log("함수들어옴");
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function () {
console.log(httpRequest.responseText);
if ( // DONE은 서버에 요청한 데이터의 처리가 완료되어 응답할 준비가 되었다는 뜻
//200은 요청한 문서가 서버상에 존재한다는 의미
httpRequest.readyState == XMLHttpRequest.DONE &&
httpRequest.status == 200
) {
document.getElementById("text").innerHTML =
httpRequest.responseText;
}
};
httpRequest.open(
"GET",
"http://tcpschool.com/examples/media/request_ajax.php?city=Seoul&zipcode=06141",
true
);
httpRequest.send();
}
</script>
</head>
<body>
<button type="button" onclick="sendRequest()">요청보내기</button>
<p id="text"></p>
</body>
</html>
*참고
GET방식의 HTTP요청은 브라우저에 의해 캐시되어 저장된다.
POST방식의 HTTP요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않는다.
(POST방식이 보안성이 높기때문에 따라서 Ajax에서는 주로 GET방식보다는 POST방식을 사용하여 요청을 전송한다.)
onreadystatechange 프로퍼티
XMLHttpRequest객체의 readyState프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정한다.
서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출된다.
이 프로퍼티를 이용하면 서버에 요청한 데이터가 존재하고( 200) , 서버로부터 응답이 도착하는 순간을 특정할 수 있다. (DONE)
setRequestHeader()메소드
Ajax에서 요청을 보내기 전에 setRequestHeader()메소드를 사용해서 HTTP 요청 헤더를 작성할 수 있다.
*참고 : HTTP 규약에서 사용하는 헤더 이름은 모두 첫글자가 영문 대문자이다.
getAllResponseHeaders()메소드
HTTP응답 헤더의 모든 헤더를 문자열로 반환
getResponseHeader("{인수}")메소드
HTTP응답 헤더 중 인수로 전달받은 이름과 일치하는 헤더의 값을 문자열로 반환
http://tcpschool.com/ajax/ajax_server_request
'<FRONTEND>' 카테고리의 다른 글
| 검색어 추천 기능 ajax로 구현해보기 (0) | 2020.07.06 |
|---|---|
| 동일출처정책 CORS??? (0) | 2020.07.06 |
| XMLHttpRequest 요청 (0) | 2020.07.06 |
| node.js 비밀번호 암호화 (0) | 2020.07.06 |
| React - Redux 규칙 (0) | 2020.06.26 |