<Content 바꾸기> 버튼을 클릭하면 서버에 있는 내용("ajaxTarget.txt)이 불러와지도록
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxText01</title>
<script type="text/javascript">
/* function loadXMLDocs()
{
var xmlHttp;
if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200 )
{
document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
}
}
xmlHttp.open("GET","ajaxTarget.txt", true);
xmlHttp.send("");
} */
function loadXMLDocs()
{
// XMLHttpRequest 객체를 담을 수 있는 변수 선언 → AJAX 객체
var xmlHttp;
// 브라우저에 따라서 객체를 만드는 방법이 다르다.
// (클라이언트) 브라우저에 따른 분기이다. (클라이언트 측에서) 자신의 브라우저가 xml http request 를
// 지원하고 있는 상황이라면 new XMLHttpRequest 로 하고
// 그렇지 않다면 new ActiveXObject("Microsoft.XMLHTTP"); 로 객체생성한다.
if (window.XMLHttpRequest) // XMLHHttpRequest 를 지원하니?
{
xmlHttp = new XMLHttpRequest();
} else
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// (객체를 생성하는 방법의 차이만 있을 뿐이지 여기까지 수행하면 XMLHttpRequest 객체 생성이 완료된다!)
// 『xmlHttp』 : XMLHttpRequest 객체이다.
// 서버로부터 응답이 오면 『readystatechange』이벤트가 발생하게 된다.
// xmlHttp 객체에 readystatechange 이벤트가 발생하면! > 이벤트 핸들러
// 응답이 오길 기다리는 것이 아니라 응답이 올 때마다 함수를 실행하도록 한다
xmlHttp.onreadystatechange = function()
{
/// 응답이 올 때 마다
// readyState 가 그 상황에서의 XMLHttpRequest 상태를 저장하게 된다.
// 즉, readyState 는 XMLHttpRequest 객체의 property 이다.
// ==>> readystatechange 이벤트는
// readyState 가 변경될 때마다 발생한다.
// ※ 『XMLHttpRequest』의 readyState 는 0 에서 4까지 순차적으로 바뀌게 되는데
// 0 → 요청이 초기화되지 않은 상태
// 1 → 서버 연결이 이루어지지 않음
// 2 → 요청이 수신된 상태
// 3 → 요청을 처리중인 상태
// 4 → 요청의 처리가 종료되고, 응답이 준비됨.
// ※『XMLHttpRequest』의 『status』는 HTTP Status 코드를 의미한다.
// 200 → 올바른 응답
// 40x → 클라이언트 측 에러 (대표:404 페이지 찾을 수 없음)
// 50x → 서버측 에러 (500에러 → 자바에러)
// 요청이 처리되고 응답이 준비되었다 그런데 페이지를 찾을 수 없는데!(400에러)도 응답에 포함된다.
// 서버로부터 응답을 받았고, 그 응답이 올바른 응답이라면...
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
// 이 구문을 통해 서버로부터 응답을 가져와
// DOM을 업데이트 하겠다는 의미
// 응답의 속성에는 두 가지가 있는데
// responseText 는 텍스트 형식의 응답일 경우 사용하게 되고.
// responseXML 은 응답이 XML 형식일 경우 사용하게 된다.
document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
}
}
// XMLHttpRequest 의 open() 메소드 : open("페이지요청방식", "URL", async) 는
// XMLHttpRequest 객체를 필요한 값으로 초기화하는데 사용하는 메소드이다.
// get 방식이 아닌 post 방식으로 요청하기 위해서는
// xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xmlHttp.send(input1=value1&input2=value2);
// 와 같이 헤더를 추가해주어야 한다.
//(헤더에 ajax 영역이 없다. 굳이 만들어주지 않는다면 쓸 수가 없다?....?)
xmlHttp.open("GET", "ajaxTarget.txt", true);
xmlHttp.send("");
}
</script>
</head>
<body>
<div id="myDiv">
<h1>AJAX를 활용하여 이 텍스트를 바꾸어 보자</h1>
</div>
<button type="button" onclick="loadXMLDocs()">Content 바꾸기</button>
</body>
</html>
'📚Study Note > Ajax' 카테고리의 다른 글
| [] ajax 를 통한 주소검색(동 입력하면 상세 주소 나오도록) (0) | 2021.06.06 |
|---|---|
| [] ajax 를 통한 아이디 중복 검사 (0) | 2021.06.06 |
| 이클립스에 Emmet(구 Zen coding) 플러그인 설치하는 방법 (0) | 2021.06.03 |
