XHR 요청
XMLHttpRequest 객체는 서버와 데이터를 교환하는 데 사용됩니다.
서버에 요청 보내기
서버에 요청을 보내기 위해 XMLHttpRequest 개체의 open() 및 send() 메서드를 사용합니다:
xmlhttp.send();
| Method | Description |
|---|---|
| open(method,url,async) | Sp 요청 유형 및 URL을 명시합니다. 그리고 이를 비동기적으로 처리할지 여부를 묻습니다.
|
| send(string) | 서버에 요청을 보냅니다.
|
GET 또는 POST?
POST에 비해 GET은 더 간단하고 빠르며 대부분의 경우에 작동합니다.
단, 다음과 같은 경우에는 POST 요청을 이용해 주시기 바랍니다.
캐시 파일을 사용할 수 없는 경우(서버의 파일이나 데이터베이스를 업데이트하는 경우)
서버에 대용량 데이터를 보내는 경우(POST에는 데이터 크기 제한이 없습니다) ) is ost 포스트는 알 수없는 문자를 포함하는 사용자 입력을 보낼 때 얻는 것보다 더 안정적이고 신뢰할 수 있습니다. 온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 누르세요.
- 위 예에서는 캐시된 결과를 얻을 수 있습니다. 이를 방지하려면 URL에 고유 ID를 추가하세요.
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html><html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<p>Click the button several times to see if the time changes, or if the file is cached.</p>
<div id="myDiv"></div>
</body>
</html>Run Instance»
예제<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>HTML 형식과 같은 데이터를 POST해야 하는 경우 setRequestHeader를 사용하세요. () HTTP 헤더를 추가합니다. 그런 다음 send() 메서드에 보내려는 데이터를 지정합니다.
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run Instance»
header: 헤더의 이름을 지정합니다
| value | : 헤더의 값을 지정합니다 |
|---|---|
