a, form 태그를 이용하지 않고 get, post 요청이 가능한지 궁금했다. 그래서 fetch api를 공부하던 중, internet Explorer에서는 fetch가 동작하지 않음을 발견했다. 이러한 발견은 fetch, axios 이전에는 서버에 새 페이지를 요청하지 않고 어떻게 데이터를 받아 페이지를 갱신할 수 있었을까? 하는 궁금증으로 이어졌다. explorer에서는 그것이 불가능 했던 것일까?
이러한 이유로 (XHR은 ajax, axios의 기반이 된다고 한다!), fetch를 정리하기 전에 XMLHttpRequest를 먼저 정리해보려고 한다. 이름만 보면 XML 데이터가 큰 역할을 하는 것 같지만, 예전 api들이 xml방식을 주로 썼어서 그런게 아닐지라는 추측이 남아있다고 한다. (최근에는 JSON이 많이 쓰인다.)
두가지 방법을 설명해보겠다. 먼저, 제일 많이 쓰이는 JSON을 이용하는 방법이다.
// jsonServer.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var bodyParser = require('body-parser');
// json 데이터를 파싱해주는 미들웨어.
// 이후 부터는 req.body를 통해 데이터 접근이 가능하다.
app.use(bodyParser.json());
// localhost:3000에 접속하면 jsonData.html 파일을 전송.
app.get('/', function (req, res) {
res.sendFile(__dirname + '/jsonData.html');
});
// /xml경로로 post 방식의 요청이 오면 그대로 재전송해준다.
// { data1: input } 객체가 올 것임.
app.post('/xml', function (req, res) {
res.send(req.body)
});
// 포트번호 3000번으로 서버 시작.
server.listen(3000, function () {
console.log('서버가 시작되었습니다.');
});
<!--jsonData.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<script>
// xhr을 통해 새로고침 없이도 엘리멘트 갱신이 가능하다.
var xmlHttp = new XMLHttpRequest();
// readyState 속성이 변화할 때 마다 호출된다.
// https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest/readyState
xmlHttp.onreadystatechange = function() {
if (this.status === 200 && this.readyState === this.DONE) {
// xhr의 response를 json 형태로 파싱한다.
// { data1: input } 객체가 올 것임.
let data = JSON.parse(xmlHttp.response);
document.querySelector("#responseData").innerHTML = data.data1;
}
}
// 클릭 시에 실행되는 함수
var xhr = function() {
var data1 = document.querySelector("#text1").value;
var jsonData = {
data1: data1
}
// 방식과 경로를 입력
xmlHttp.open("POST", "http://localhost:3000/xml");
// 컨텐츠 타입을 json으로 설정
xmlHttp.setRequestHeader('Content-type', 'application/json');
// 데이터를 json 형식으로 인코딩 후 전송
xmlHttp.send(JSON.stringify(jsonData));
document.querySelector("#requestData").innerHTML = data1;
}
</script>
<input type="text" id="text1" />
<button onclick="xhr()">xmlHttpRequest</button>
<div id="requestData">requestData</div>
<div id="responseData">responseData</div>
</body>
</html>
그 다음으로 x-www-form-urlencoded를 이용하는 방법이다. 실행 결과는 JSON 사용했을 때와 같다.
// server.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var bodyParser = require('body-parser');
// x-www-form-urlencoded 타입의 post 요청을 파싱해준다.
app.use(bodyParser.urlencoded());
app.get('/', function (req, res) {
res.sendFile(__dirname + '/data.html');
});
app.post('/xml', function (req, res) {
res.send(req.body)
});
server.listen(3000, function () {
console.log('서버가 시작되었습니다.');
});
<!--Data.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<script>
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (this.status === 200 && this.readyState === this.DONE) {
// JSON.parse()를 쓰지 않기 위한 노력 ㅠㅠ
let data = {};
let str = xmlHttp.response;
str = str.substring(1,str.length-1);
let props = str.split(',');
props.forEach(prop => {
let tmp = prop.split(':');
let key = tmp[0].substring(1, tmp[0].length-1)
let value = tmp[1].substring(1, tmp[1].length-1)
data[key] = value;
});
document.querySelector("#responseData").innerHTML = data['data1'];
}
}
var xhr = function() {
var data1 = document.querySelector("#text1").value;
var data = `data1=${data1}`;
xmlHttp.open("POST", "http://localhost:3000/xml");
// post 요청은 컨텐트 타입을 명시해줘야 한다.
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(data);
document.querySelector("#requestData").innerHTML = data1;
}
</script>
<input type="text" id="text1" />
<button onclick="xhr()">xmlHttpRequest</button>
<div id="requestData">requestData</div>
<div id="responseData">responseData</div>
</body>
</html>
developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest#%EC%83%9D%EC%84%B1%EC%9E%90
XMLHttpRequest
XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함).
developer.mozilla.org
www.tcpschool.com/xml/xml_dom_xmlHttpRequest
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
expressjs.com/ko/guide/routing.html
Express 라우팅
라우팅 라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다. 라우팅에 대한 소개는 기본 라우팅을 참조하십시오. 다음 코드는 매우 기본
expressjs.com
body-parser 모듈 (urlencoded, extended 옵션)
참조문서 : https://www.npmjs.com/package/body-parser post로 요청된 body를 쉽게 추출할 수 있는 모듈이다. 추출된 결과는 request객체(IncomingMessage 타입)에 body 속성으로 저장된다. API문서보면 다양한..
sjh836.tistory.com
www.npmjs.com/package/express-xml-bodyparser
express-xml-bodyparser
Simple XML body parser connect/express middleware
www.npmjs.com
kamang-it.tistory.com/entry/RESTfulajaxajax%EB%9E%80-XMLHttpRequest%EC%82%AC%EC%9A%A9%EB%B2%95-1
[RESTful][ajax]ajax란? XMLHttpRequest사용법 - (1)
Ajax를 사용하기 전의 웹이란? Ajax가 등장하기 전에는 웹 브라우저가 데이터를 요청하면 서버는 해당 정보를 "통째"로 보내주게 되었었다. 과거에는 사실 이게 큰 문제가 되지 않았는데 현재 사정
kamang-it.tistory.com
[Programming / WebApp] Form Data 전송
Express Framework에서 Form을 구성하고, Form Data를 전송하는 방법에 대해 간단하게 살펴보고자 한다. 우선 Form Data를 위해 필요한 Node Packages는 JSON 및 URL-encoded Data를 파싱(Parsing)하기 위해 필요..
cinema4dr12.tistory.com
unchae.tistory.com/entry/Multer-Nodejs%EB%A1%9C-Formdata-%EC%A0%84%EC%86%A1
[Nodejs] Multer - Formdata 전송
[ 주의 ] 삽질하면서 코딩한 경험을 바탕으로 작성한 것임으로 틀린것도 많으니 더 좋은 정보가 있으면 알려주세요! [ 잡담 ] 요즘들어 새로 시작한 프로젝트가 있어서 12시에 기상해서 새벽 4~6시
unchae.tistory.com
www.codeproject.com/Questions/1102984/How-to-convert-string-to-object-in-javascript
[Solved] How to convert string to object in javascript? - CodeProject
CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900
www.codeproject.com
정규표현식 (Regex) 정리
정규표현식은 아주 가끔 쓰기때문에 항상 다시 볼때마다 헥깔리곤 하는데.. 주요 사용예를 정리하여 보았다. 나중에 찾아보기 편하라고~ 정규 표현식의 용어들 정규 표현식에서 사용되는 기호
hamait.tistory.com
[자바스크립트][비동기통신] XMLHttpRequest 이용한 Ajax 실습해보기
[자바스크립트][비동기통신] XMLHttpRequest 이용한 Ajax 실습해보기 1. 간단한 개념 정리 Ajax란 비동기 JavaScript와 XML을 뜻한다. 간단히 말하면, 서버측 Scripts와 통신하기 위한 XMLHttpRequest 객체를 사용..
myeonguni.tistory.com
coding-factory.tistory.com/143
[Ajax] Ajax란 무엇인가?
▶ Ajax란? Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를..
coding-factory.tistory.com
untitledtblog.tistory.com/51?category=682814
XMLHttpRequest 객체와 Ajax
1. Ajax Ajax(Asynchronous JavaScript and XML, 에이젝스)는 이용자 반응형 웹 어플리케이션 제작을 위해 HTML, DOM, JavaScript, XMLHttpRequest 등으로 구성된 웹 개발 기법이다. 기존의 웹 어플리케이션은 웹..
untitledtblog.tistory.com
'javascript' 카테고리의 다른 글
| HTML 문서 렌더링 (0) | 2020.11.19 |
|---|---|
| fetch (0) | 2020.11.15 |
| Promise (0) | 2020.11.03 |
| 정리할 web api 목록 (0) | 2020.09.16 |
| ;(세미콜론)생략 (0) | 2020.09.10 |