XHR(XMLHttpRequest)이란?
XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다. XHR은 XMLHttpRequest의 약자로 말 그대로 http 프로토콜을 통해 서버에 자원을 요청하기 위해 사용한다. 페이지 전체를 새로고침 할 필요 없이 원하는 데이터를 url에서 제공받을 수 있다.
XMLHttpRequest(XHR) 객체는 서버와 상호 작용하는 데 사용됩니다. 전체 페이지를 새로 고치지 않고도 URL에서 데이터를 검색 할 수 있습니다. 이를 통해 웹 페이지는 사용자의 작업을 방해하지 않고 페이지의 일부만 업데이트 할 수 있습니다.
AJAX 프로그래밍에 XMLHttpRequest많이 사용됩니다.
5) Spring - 회원가입(ajax를 이용한 id 중복체크)
json을 이용하기 위한 lib 추가 pom.xml에 아래 코드를 추가해 줍니다. com.googlecode.json-simple json-simple 1.1 org.codehaus.jackson jackson-mapper-asl 1.9.13 Register.jsp 수정 ajax를 이용하기위해 jqu..
migusdn.tistory.com
에서 Jquery를 이용한 ajax를 XMLHttpRequest로 바꿔보겠다.
//Jquery
id = $("#user_id").val();
$.ajax({
url: 'ID_Check',
type: 'POST',
dataType: 'text', //서버로부터 내가 받는 데이터의 타입
contentType : 'text/plain; charset=utf-8;',//내가 서버로 보내는 데이터의 타입
data: id ,
success: function(data){
if(data == 0){
console.log("아이디 없음");
alert("사용하실 수 있는 아이디입니다.");
}else{
console.log("아이디 있음");
alert("중복된 아이디가 존재합니다.");
}
},
});
//XMLHttpRequest
const id = document.getElementById("user_id").val();
var checkRequest = new XMLHttpRequest();
checkRequest.onload = function(){
if(checkRequest.status === 200 || checkRequest.status === 201) {
if(checkRequest.responseText == 0){
console.log("아이디 없음");
alert("사용하실 수 있는 아이디입니다.");
} else {
console.log("아이디 있음");
alert("중복된 아이디가 존재합니다.");
}
} else {
console.log("error");
}
};
checkRequest.open("POST", "ID_Check");
checkRequest.setRequestHeader("Content-Type", "text/plain; charset=utf-8;");
checkRequest.setRequestHeader("dataType", "text");
checkRequest.send(id);[참고자료추가]
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"));
}실제로는 XML은 Ajax에서 잘 쓰이지 않게 됬는데 데이터 전송의 흐름이 XML에서 Json으로 넘어왔기 때문이다.
사실 잘 쓰이지 않는 정도가 아니라 필자는 본적도 없다. 물론 그렇게 쓰는 사람이 존재는 하겠지.
뭔가 붕어빵에 붕어가 안들어간것 마냥 위화감이 들지만 프로그래밍 세계에서는 이런일은 흔하다.
어쨋든 이 ajax를 사용하면 데이터를 비동기적으로 받는것이 가능해진다.
ajax를 무슨 기술인것 처럼 아는 사람들이 있던데 사실 기술은 아니고 정보 교환 기법중 하나이다.
따라서 javascript구문내에서 xml을(json이나 다른 yaml, 심지어 text도 가능)이용해서 비동기를 사용하기만 하면된다.
그래서 여러가지 서브파티 라이브러리들이 존재한다.
그러나 이 모든 서브파티 라이브러리들도 깊게 들어가면 딱 한가지의 방식을 사용하는걸 알 수 있다.
그 태초적인 방식이 바로 XMLHttpRequest이다.
'Coding > JAVASCRIPT' 카테고리의 다른 글
| JavaScript의 이해 = 기본 문법 및 개념 /이벤트/함수(funtion) (0) | 2022.04.09 |
|---|---|
| [AJAX] JSON (0) | 2022.04.08 |
| JS/jQuery 자동완성 플러그인 설치 (0) | 2022.04.07 |
| 1. Object(객체) (0) | 2022.04.07 |
| [AJAX] Kakao 지도 Javscript API 이용해서 지도그리기 (0) | 2022.04.04 |