[AJAX] AJAX 란? (get 방식 / post 방식)
by mini_min[AJAX] AJAX 란? (get 방식 / post 방식)
✔️ AJAX 란?
- 비동기 자바스크립트 XML 이다.
- HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용하던 여러 기술을 함께 사용하는 개발 기법이다.
- 빠르게 동작하는 동적인 웹 페이지 만들 때 사용
- 페이지 일부만 갱신해서 속도도 빠르다.
- JSON, XML, HTML 등 서버를 이용한다.
👩💻 장점
- 웹 페이지 일부만 갱신 가능하다. (서버에서 일부만 가져올 수 있다.)
- 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.
- 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업이 가능하다.
👩💻 한계
- 클라이언트가 서버에 데이터를 요청하는 클라이언트 폴링 방식을 사용한다. 서버 푸시 방식의 실시간 서비스는 불가하다.
- 바이너리 데이터를 보내거나 받을 수 없다. (지금은 가능하다고 함)
- Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없다.
클라이언트 폴링 방식 - 사용자가 직접 원하는 정보를 서버에 요청하는 방식
서버 푸시 방식 - 가만히 있는데 서버가 나한테 특정 정보를 제공하는 것을 의미한다.
✔️ 동작 원리
사전조건 : 이미 데이터를 불러온 상황
1. 자바스크립트 call 을 통해 서버에 요청 보냄
2. 서버에 요청 받은걸 가져옴
3. 해당 위치에 있는 부분만 갱신 가능
* 요청에 대한 응답이 돌아오지 않아도 대기 시간없이 다음 작업을 진행할 수 있으며, 요청 순서대로 응답되지 않는다.
👩💻 핵심 구성요소는
XMLHttpRequest 객체
👩💻 주요 메소드
open()
send()
setRequestHeader()
등등
✔️ get 방식일 때
1. XMLHttpRequest 객체를 생성해야 ajax 를 사용 가능하다.
2. query 와 url 을 만들어야한다.
3. ajax 객체를 생성
4. 서버에서 처리하고 결과를 전송할 자바스크립트 함수를 지정한다. (callback 이라는 함수로 지정)
5. open - AJAX 요청의 형식을 설정, 여기서는 get 방식이기 때문에 get 방식을 쓰고 true 로 비동기 설정한다.
6. send 로 호출한 callback 이 받게 함
function createXMLHttpRequest() {
let req = null;
//아래 객체를 생성해야 ajax 사용 가능!
try {
req = new XMLHttpRequest();
} catch (e) {
}
return req;
}
//전역변수
//전역변수로 잡아야 여러 함수들에서 사용 가능.
var httpReq = null;
//입력한 내용 모두 가져오기
//오퍼레이터는 encode 해줘야한다.
//쿼리 만들어서 url 만들기.
//실행되어도 get 방식인데 ex02_ok.jsp 보이진 않음
function sendOk() {
let n1 = document.querySelector("#num1").value;
let o = document.querySelector("#oper").value;
let n2 = document.querySelector("#num2").value;
let query = "num1="+n1+"&num2="+n2+"&oper="+encodeURIComponent(o);
let url = "ex02_ok.jsp?"+query;
//AJAX 객체 생성
httpReq = createXMLHttpRequest();
//서버에서 처리하고 결과를 전송할 자바스크립트 함수 지정
//onreadystatechange : 처리한 결과를 돌려줄 때, 호출되는 함수가 callback 이다.
httpReq.onreadystatechange = callback;
//open - AJAX 요청의 형식을 설정
//true : 비동기.
httpReq.open("GET", url, true);
//send
//서버로 ex02 로 가서 연산한 결과를 호출된 callback이 받음
httpReq.send(null);
}
function callback(){
if(httpReq.readyState === 4){ //요청상태 - 4:모든응답요청완료
if(httpReq.status === 200){//서버로부터 전달받은 상태코드 - 200:성공(ok)
printData();
}
}
}
function printData(){
//서버가 던진 문서를 받아 text 텍스트를 받아 result에 저장
let result = httpReq.responseText;
document.querySelector("#resultLayout").innerHTML = result;
}
</script>
</head>
<body>
<div>
<input type="text" id="num1">
<select id="oper">
<option value="+">더하기</option>
<option value="-">빼기</option>
<option value="*">곱하기</option>
<option value="/">나누기</option>
</select>
<input type="text" id="num2">
<button type="button" onclick="sendOk();"> = </button>
</div>
<hr>
<div id="resultLayout"></div>
</body>
</html>
✔️ post 방식일 때
post 방식일 때 다른점!
enctype 을 쓴다. 즉, 컨텐츠 타입을 설정해줘야한다.
httpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
send() 안에 null 이 아닌 파라미터 정보를 넘긴다 (query)
function createXMLHttpRequest() {
let req = null;
//아래 객체를 생성해야 ajax 사용 가능!
try {
req = new XMLHttpRequest();
} catch (e) {
}
return req;
}
//전역변수
//전역변수로 잡아야 여러 함수들에서 사용 가능.
var httpReq = null;
//입력한 내용 모두 가져오기
//오퍼레이터는 encode 해줘야한다.
//쿼리 만들어서 url 만들기.
//실행되어도 get 방식인데 ex02_ok.jsp 보이진 않음
function sendOk() {
let n1 = document.querySelector("#num1").value;
let o = document.querySelector("#oper").value;
let n2 = document.querySelector("#num2").value;
let query = "num1="+n1+"&num2="+n2+"&oper="+encodeURIComponent(o);
let url = "ex03_ok.jsp";
//AJAX 객체 생성
httpReq = createXMLHttpRequest();
//서버에서 처리하고 결과를 전송할 자바스크립트 함수 지정
//onreadystatechange : 처리한 결과를 돌려줄 때, 호출되는 함수가 callback 이다.
httpReq.onreadystatechange = callback;
//open - AJAX 요청의 형식을 설정
//true : 비동기
httpReq.open("POST", url, true);
//post 방식에서 필수인 endctype 을 쓴다.
//컨텐츠 타입을 설정해줘야한다.
httpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//post 는 send 한테 파라미터 정보를 넘긴다.
httpReq.send(query);
}
function callback(){
if(httpReq.readyState === 4){ //요청상태 - 4:모든응답요청완료
if(httpReq.status === 200){//서버로부터 전달받은 상태코드 - 200:성공(ok)
printData();
}
}
}
function printData(){
//서버가 던진 문서를 받아 text 텍스트를 받아 result에 저장
let result = httpReq.responseText;
document.querySelector("#resultLayout").innerHTML = result;
}
</script>
</head>
<body>
<h3> post 방식 </h3>
<div>
<input type="text" id="num1">
<select id="oper">
<option value="+">더하기</option>
<option value="-">빼기</option>
<option value="*">곱하기</option>
<option value="/">나누기</option>
</select>
<input type="text" id="num2">
<button type="button" onclick="sendOk();"> = </button>
</div>
<hr>
<div id="resultLayout"></div>
</body>
</html>
✔️ XML 이용
function createXMLHttpRequest() {
let req = null;
//아래 객체를 생성해야 ajax 사용 가능!
try {
req = new XMLHttpRequest();
} catch (e) {
}
return req;
}
var httpReq = null;
function sendOk(){
let name = document.querySelector("#name").value;
let content = document.querySelector("#content").value;
let query = "name="+name+"&content="+content;
let url = "ex04_ok.jsp";
//AJAX 객체 생성
httpReq = createXMLHttpRequest();
//서버에서 처리하고 결과를 전송할 자바스크립트 함수 지정
//onreadystatechange : 처리한 결과를 돌려줄 때, 호출되는 함수가 callback 이다.
httpReq.onreadystatechange = callback;
//open - AJAX 요청의 형식을 설정
//true : 비동기
httpReq.open("POST", url, true);
//post 방식에서 필수인 endctype 을 쓴다.
//컨텐츠 타입을 설정해줘야한다.
httpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//post 는 send 한테 파라미터 정보를 넘긴다.
httpReq.send(query);
}
function callback(){
if(httpReq.readyState === 4){ //요청상태 - 4:모든응답요청완료
if(httpReq.status === 200){//서버로부터 전달받은 상태코드 - 200:성공(ok)
printData();
}
}
}
function printData(){
//서버가 보낸 xml을 받아오는 것
let xmlDoc = httpReq.responseXML;
//console.log(xmlDoc);
let root = xmlDoc.getElementsByTagName("guest")[0];
let dataCount = xmlDoc.getElementsByTagName("dataCount")[0].firstChild.nodeValue;
let out = "<p>전체데이터개수 : " + dataCount + "</p>";
let records = root.getElementsByTagName("record");
for(let i=0; i<records.length; i++){
//안에 속성 가져오기 . item 으로
let item = records[i];
let num = item.getAttribute("num");
let name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
let content = item.getElementsByTagName("content")[0].firstChild.nodeValue;
out += "<p>번호:"+num+"<br>";
out += "이름:"+name+"<br>";
out += "내용:"+content+"</p><hr>";
}
document.querySelector("#resultLayout").innerHTML = out;
}
</script>
</head>
<body>
<h3> AJAX - POST XML 배우기!!!!! </h3>
<div>
<p>이름 : <input type="text" id="name"></p>
<p>내용 : <textarea rows="3" cols="50" id="content"></textarea>
<p>
<button type="button" onclick="sendOk();">보내기</button>
</p>
</div>
<hr>
<div id="resultLayout"></div>
</body>
</html>
'JSP' 카테고리의 다른 글
| [ajax] get 방식 / post 방식 (0) | 2022.10.23 |
|---|---|
| [jQuery] jQuery <input> 요소 선택자, 직렬화 (0) | 2022.10.19 |
| [jQuery] jQuery event 이벤트 (0) | 2022.10.19 |
| [jQuery] jQuery css , attr 추가, 프로퍼티 설정 (0) | 2022.10.19 |
| [jQuery] jQuery parent_closest , find, children (0) | 2022.10.19 |
블로그의 정보
개발자 미니민의 개발로그
mini_min