자바 웹 개발자가 될거야/JSP

[Ajax] ajax 사용하기, ajax 요청응답 타입

whitz 2022. 1. 3. 16:15

< AJax >

 

- Asyschronous JavaScript And XML

- 비동기방식의 자바스크립트와 XML

 

- 동기 방식 : 페이지 이동이 필요하다 / 화면 전환이 있음

  · 사용자 → 웹서버 (WAS) → 사용자

- 비동기 방식 : 페이지 이동없이 사용 / 화면 전환이 없음

  · 사용자 ↔ 웹서버 (WAS)

 

- $.ajax();

  · 비동기방식으로 페이지 이동이 일어남

 

 

① ajax 사용하기

 

$.ajax({
  url:"전송페이지(액션페이지)",
  type:"전송방식(get,post)",
  data:"전송할 데이터",
  dataType:"요청한 데이터타입(html, xml, json, text)",
  success:function(성공시 가져오는 데이터){
    전송 성공시 처리할 문장들
  }
  error:function(실패시 가져오는 데이터){
    전송 실패시 처리할 문장들
  }
});

 

 

② 연습

 

-.html 실행해서 jsp페이지 갔다오기

<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	location.href="string1.jsp";
	$(document).ready(function(){
		$.ajax('string2.jsp');
		
	});
</script>
<body>
<h1>WebContent/jq2/string2.jsp</h1>
<%
	System.out.println("string2.jsp 페이지 호출");
%>

</body>

 

 

- 값을 들고오기

$(document).ready(function(){
		$.ajax('string2.jsp',{
			data:{name:'홍길동'}
		});
});
<%
	System.out.println("string2.jsp 페이지 호출");
	
	// html 페이지에서 전달한 데이터 받아서 출력
	String name = request.getParameter("name");
	System.out.println(name);
%>

위 결과 : jsp에서 실행 / 아래 : html에서 실행

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

	$(document).ready(function(){
		$.ajax('string2.jsp',{
			data:{name:'홍길동',age:20},
			success:function(data){
				$('body').append(data);
			},
			error:function(data){
				
			}
		});
		
	});
</script>
</head>
<body>
 <h1>WebContent/jq2/ajaxString2.html</h1>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!-- <h1>WebContent/jq2/string2.jsp</h1> -->
<%
	System.out.println("string2.jsp 페이지 호출");
	
	// html 페이지에서 전달한 데이터 받아서 출력
	String name = request.getParameter("name");
	System.out.println(name);
	int age = Integer.parseInt(request.getParameter("age"));
	System.out.println(age);
%>
<h2>------string2.jsp에서 처리된 결과-------</h2>
	<h2>이름 : <%=name %></h2>
	<h2>나이 : <%=age %></h2>
<h2>------string2.jsp에서 처리된 결과-------</h2>

 

 

③ Ajax의 요청응답 타입

 

- HTML

- XML

  · html과 태그를 사용해서 데이터를 표현한다는 점에서 유사함

  · 장점 : 복잡한 구조의 데이터 표현가능

                 다른 프로그램과의 데이터 교환가능(사용빈도 높음)

                 DOM-html 문법 사용가능

  · 단점 : 데이터값 제외한 나머지 데이터 많음 (전송량이 많다 → 처리속도 느리다)

                 요청이 반드시 동일 페이지(같은 도메인에서 실행)

- JSON

  · (JavaScript Object Notation)

  · 자바스크립트 객체 표현식

  · 자바스크립트 문법을 따름

  · 장점 : 다른 도메인에서 페이지 요청 처리 가능

                 html/xml 코드보다 훨씬 간결

                 자바스크립트와 같이 사용 (웹 애플리케이션에서 사용)

  · 단점 : 문법에 예민함 (따옴표, 콤마, 콜론, 세미콜론 사용에 주의)

                 자바스크립트 기반의 데이터이기 때문에 악의적인 데이터 생성이 얼마든지 가능

 

 

 

 

 

 

https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings

 

jQuery.ajax() | jQuery API Documentation

Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available

api.jquery.com