안녕하세요 이번시간에는 javascript 에서 웹 브라우저와 웹 서버 간에 데이터를 전송하는 http를 사용하기 위한 객체 인 XmlHttpRequest를 방법에 대해서 포스팅 해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="text"></div>
<script>
var xmlHttp = new XMLHttpRequest(); // XMLHttpRequest 객체를 생성함.
xmlHttp.onreadystatechange = function () {
// 보낸 요청에 대한 응답은 이 콜백 메서드 내부에서 동작함.
// onreadystatechange 이벤트 핸들러를 작성함. == callback method
// 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
if (this.status == 200 && this.readyState == this.DONE) {
// 요청한 데이터를 문자열로 반환함.
document.getElementById("text").innerHTML = xmlHttp.responseText;
} else if (this.status != 200 && this.readyState == this.DONE) {
// 잘못된 페이지 또는 네트워크 오류를 가져 왔습니다. 404,500 등 ..
}
};
//get 방식
xmlHttp.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xmlHttp.send();
// POST 방식의 요청은 데이터를 Http 헤더에 포함시켜 전송함.
//xmlHttp.open("POST", "URL..", true);
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//xmlHttp.send(body에 담을 데이터 쿼리);// ex)title=xxx&....
</script>
</body>
</html>open() 메소드는
(httpRequestMethod, URL, Sync-Async,) 순서로 다음과 같이 작성합니다.
httpRequestMethod : get, post 등등..
URL : 요청주소
Sync-Async : true == 비동기, falsce == 동기
send()
get, post 요청에 따라 인자값을 넣어 줄 수있고 안 넣어 줄 수도 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="text"></div>
<script>
var xmlHttp = new XMLHttpRequest(); // XMLHttpRequest 객체를 생성함.
xmlHttp.onreadystatechange = function () {
// 보낸 요청에 대한 응답은 이 콜백 메서드 내부에서 동작함.
// onreadystatechange 이벤트 핸들러를 작성함. == callback method
// 서버상에 문서가 존재하고 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
if (this.status == 200 && this.readyState == this.DONE) {
// 요청한 데이터를 문자열로 반환함.
document.getElementById("text").innerHTML = xmlHttp.responseText;
} else if (this.status != 200 && this.readyState == this.DONE) {
// 잘못된 페이지 또는 네트워크 오류를 가져 왔습니다. 404,500 등 ..
}
};
//get 방식
xmlHttp.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xmlHttp.send();
// POST 방식의 요청은 데이터를 Http 헤더에 포함시켜 전송함.
httpRequest.open("POST", "/examples/media/request_ajax.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send(body에 담을 데이터 쿼리);// ex)title=xxx&....
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] Selector 태그에 placeholder 적용하기 (0) | 2023.03.18 |
|---|---|
| [JavaScript] 체크박스 커스텀하기 (0) | 2023.03.04 |
| [javascript] Webrtc 1:1 영상통화 구현하기 (0) | 2023.02.23 |
| [javascript]정규식(regular expression) (0) | 2023.02.19 |
| Formdata와 fetch를 활용하여 서버로 데이터 전송하기 (0) | 2023.02.15 |