반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

bro's coding

Ajax 본문

[IT]/AJAX

Ajax

givemebro 2021. 6. 8. 16:23
반응형

Ajax(Asynchronus Javascript And Xml) 비동기 웹통신, 웹통신 기법

> 전체 페이지 로딩 없이 필요한 데이터만 통신

XMLHttpRequest: Ajax통신을 위한 자바스크립트 객체

JSON or XML > AJAX 통신에서 구조화된 데이터를 송수신할 때 사용

웹플그래밍에 있어 비동기 Ajax 통신이란
필요한 데이터만 응답받는 방식이다.

사용자는 페이지 변경없이 필요한 데이터만 응답받음으로
응답여부와 관계 없이 작업을 지속할 수 있다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>step2-asyn</title>
<script type="text/javascript">
	let xhr;
	function startAjax(){
		xhr=new XMLHttpRequest();
		
		// ready state 속성이 변경될 때 마다 동작
		xhr.onreadystatechange=function(){
			
			if(xhr.readyState==4&&xhr.status==200){// readyState 4(서버로부터 응답 완료된 상태), status 200 (정상 수행)
				document.getElementById("result").innerHTML=  xhr.responseText;
			}
		};// 함수 등록(익명함수)
		
		
		// 서버로 요청하기위해서 채널 오픈
		xhr.open("get","AsynServlet");
		xhr.send(null);//post일때 데이터를 전달
		
	}

</script>
</head>
<body>
	<form>
		<input type="text" name="userInfo"> 
		<input type="button" onclick="startAjax()" value="Ajax 비동기적 방식테스트">
		<span id="result"></span>
	</form>
	<hr>
	<form >
	<textarea rows="100" cols="100"></textarea>
	</form>
</body>
</html>
package step2;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AsynServlet
 */
@WebServlet("/AsynServlet")
public class AsynServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * 비동기 통신의 예(ajax 방식) , step2-asyn.jsp와 연동 ajax 방식의 응답은 페이지 응답이 아니라 필요한 데이터만
	 * 응답한다
	 */
	int count;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 서버의 작업처리 시간이 많이 소요된다고 가정
		try {
			Thread.sleep(3000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		// ajax 비동기 통신 응답이므로 필요한 데이터만 응답한다
		out.println("ajax 응답" + count++);
		out.close();
	}
}
반응형
저작자표시

'[IT] > AJAX' 카테고리의 다른 글

AJAX.XML/JSON  (0) 2021.06.09
AJAX.post  (0) 2021.06.09
JSON.INFO  (0) 2021.05.08
AJAX.예제  (0) 2021.05.06
AJAX/JSON  (0) 2021.05.06
'[IT]/AJAX' Related Articles more
Comments