<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Ajax ๊ณต๋ถ์ค</title>
</head>
<body>
<h1>GET ๋ฐฉ์ ์์ฒญ</h1>
<button type="button" onclick="GetRequest()">GET</button>
<p id="get"></p>
<h1>POST ๋ฐฉ์ ์์ฒญ</h1>
<button type="button" onclick="PostRequest()">POST</button>
<p id="post"></p>
<script>
function GetRequest() {
//XMLhttpRequest object์์ฑ
var Request = new XMLHttpRequest();
//onreadystatechagne : ์์ฒญ์ ๋ํ ์ํ๊ฐ ๋ณํํ ๋ ๋ง๋ค functionํธ์ถ
Request.onreadystatechange = function(){
if (Request.readyState == 4 && Request.status == 200 ) {
//readyState์ ์ํ ๊ฐ : 1(open๋ฉ์๋ ์คํ ์ฑ๊ณต) | 2(์๋ฒ์ ์ฐ๊ฒฐ ์๋ฃ) | 3(request์์ฒญ ์ฒ๋ฆฌ์ค) | 4(request์ฒ๋ฆฌ ๋ = ์๋ต ์ค๋น ์๋ฃ)
//status์ ์ํ ๊ฐ : 200(OK)
document.getElementById("get").innerHTML = Request.responseText;
//์๋ต ๋ฐ์ดํฐ์ ์ข
๋ฅ : responseText | responseXML
}
}
//open() : ์์ฒญ๋ฐฉ์, url, ๋น๋๊ธฐ์ฌ๋ถ(true = ๋น๋๊ธฐ)
Request.open("GET", "/study/sample.txt", true);
//์์ฒญ ๋ณด๋ด๊ธฐ
Request.send();
}
function PostRequest(){
var Request = new XMLHttpRequest();
Request.onreadystatechange = function(){
if(Request.readyState == 4 && Request.status == 200){
document.getElementById('post').innerHTML = Request.responseText;
}
}
Request.open("POST", "/study/sample.txt", true);
//POST๋ฐฉ์ ์ฌ์ฉ์ ์๋ ๋ฉ์๋ ์ถ๊ฐ(MIME type ์ค์ )
Request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Request.send();
}
</script>
</body>
</html>
'๐ Programming > Web' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] Fetch API๋ก JSON Parsing (0) | 2021.02.16 |
---|---|
[JavaScript] JQuery์ Ajax (0) | 2021.02.07 |
[HTML] ๊ธฐ์ด์ ๋ฆฌ (0) | 2021.01.31 |
[HTML] table & list (0) | 2021.01.31 |