๐ป
JavaScript ์ ์ดํด - [AJAX] XHR(XMLHttpRequest) ๋ณธ๋ฌธ
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"));
}
'KITRI > JAVASCRIPT' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| JavaScript ์ ์ดํด - [AJAX] XMLHttpRequest.responseXML (0) | 2020.07.16 |
|---|---|
| JavaScript ์ ์ดํด - [AJAX] ํ์ค ๋ต๊ธ ๋ฌ๊ธฐ(CRUD) (0) | 2020.07.16 |
| JavaScript ์ ์ดํด - [AJAX] JSON ๊ฐ์ฒด ๋ค๋ฃจ๊ธฐ (0) | 2020.07.15 |
| JavaScript ์ ์ดํด - JS/jQuery ์๋์์ฑ ํ๋ฌ๊ทธ์ธ ์ค์น (0) | 2020.07.14 |
| JavaScript ์ ์ดํด - ์ค๋ธ์ ํธ(Object) (0) | 2020.06.05 |
