JavaScript 의 이해 - [AJAX] XHR(XMLHttpRequest)

KITRI/JAVASCRIPT

JavaScript 의 이해 - [AJAX] XHR(XMLHttpRequest)

또효니 2020. 7. 16. 10:36

XHR(XMLHttpRequest)이란?

XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다.

XMLHttpRequest(XHR) 객체는 서버와 상호 작용하는 데 사용됩니다. 전체 페이지를 새로 고치지 않고도 URL에서 데이터를 검색 할 수 있습니다. 이를 통해 웹 페이지는 사용자의 작업을 방해하지 않고 페이지의 일부만 업데이트 할 수 있습니다. AJAX 프로그래밍에 XMLHttpRequest많이 사용됩니다.

[참고자료추가]

https://www.w3schools.com/js/js_ajax_http.asp

AJAX The XMLHttpRequest Object

AJAX - The XMLHttpRequest Object The keystone of AJAX is the XMLHttpRequest object. The XMLHttpRequest Object All modern browsers support the XMLHttpRequest object. The XMLHttpRequest object can be used to exchange data with a web server behind the scenes.

www.w3schools.com

command.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
${param.msg}

postXHR.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="postXHR.js"></script>
</head>
<body>
	<form id="createForm" action="">
		<input type="text" name="msg"/>
		<input type="button" value="입력" onclick="toServer()"/>
	</form>
	<br /><br />
	
	<div id="disp">
		
	</div>
</body>
</html>

postXHR.js

/**
 * 
 */

var xhr = null;
var arr = new Array();

function toServer(){
	var msg = document.getElementById("createForm").msg.value;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest;
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
//	GET
//	xhr.open("GET", "command.jsp?msg=" + msg, true); //요청방식, 서버파일, 비동기식(정적페이지)
//	xhr.send();
	
//	POST
	xhr.open("POST", "command.jsp", true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send("msg="+msg);
	xhr.onreadystatechange = process;
}	
function process(){
	if(xhr.readyState==4 && xhr.status==200){
		arr.push("msg" + xhr.responseText);
		
		var disp = document.getElementById("disp");
		disp.innerText = xhr.responseText;
	}
	
	//alert(arr.join("\n"));
}