Ajax 검색 예제 - Ajax geomsaeg yeje

Question

목차 Show

Development
[JQuery] Ajax 구현하기 / 장단점 / 구조 / 예제
AJAX의 주요 특징
AJAX의 장단점

Development

WEB

[JQuery] Ajax 구현하기 / 장단점 / 구조 / 예제

yo~og 2021. 11. 30. 21:07

Ajax는 Asynchronous JavaScript and XML(비동기식 자바스크립트와 xml)의 약자입니다.

자바스크립트를 통해 서버에 데이터를 비동기 방식으로 요청하는 것입니다.

비동기 방식이란,

웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 방식입니다.

Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포합니다.

비동식 방식을 이용할 경우 페이지 리로드를 하지 않아 전체 리소스를 불러올 필요가 없기 때문에 리소스 낭비를 불필요하게 하지 않습니다.

AJAX의 주요 특징

페이지 새로고침 없이 웹 페이지의 일부분만을 갱신
웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음
웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음
백그라운드 영역에서 서버로 데이터 전송 가능

AJAX의 장단점

[AJAX의 장점]

웹 페이지 속도 향상
서버의 처리가 완료될 때까지 기다리지 않고 처리 가능

[AJAX의 단점]

히스토리 관리가 되지 않음
페이지 이동없는 통신으로 보안상의 문제가 있음
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
바이너리 데이터를 보내거나 받을 수 없음
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없음

구조

$.ajax({
    url : 주소,
    method : "get" or "post",
    data : data,
    error : function(error) {
        alert("Error!");
    },
    success : function(data) {
        alert("success!");
    },
    complete : function() {
        alert("complete!");    
    }
});

data : ajax 요청하면서 파라미터를 전달하고 싶으면 query 문자열을 구성을해서 data라는 방에 전달 (파라미터명=값&파라미터명2=값2...)

success : ajax 통신에서 성공한 값을 가져온다.

error : 에러를 통해 예외처리가능

complete : 자바의 try-catch 구문의 finally 처럼 success,error 가 발생한 뒤 마지막에 수행

예제

Step06_ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step06_ajax.jsp</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
   
   <input type="text" id="inputMsg" placeholder="전송할 메세지 입력..."/>
   <button id="sendBtn">ajax 전송</button>
   
   <script>

      $("#sendBtn").on("click", function(){
         //입력한 문자열 읽어오기
         let msg=$("#inputMsg").val();
         //send.jsp 페이지에 post 방식으로 ajax 전송하기
         $.ajax({
            url:"send.jsp",
            method:"post",
            data:"msg="+msg,
            success:function(responseData){
               console.log(responseData);
            }
         });
      });
   </script>
</body>
</html>

send.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	String msg=request.getParameter("msg");
	System.out.println(msg);
%>
okay~

참고자료

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

http://tcpschool.com/ajax/ajax_intro_basic

#Jquery #AJAX #JAVASCRIPT

지금까지는 javascript를 이용하여 함수를 생성하고

비동기 통신을 하는 방식을 하였는데, 코드가 길고 좀 복잡한 경향이 있었습니다.

이번엔 깔끔하게 JQUERY를 이용하여 해보도록 하게습니다.

핵심 코드

$.ajax({

1. url : 자원 (XX.do, json, xml, jsp, html)

2. dataType : 넘겨오는 데이터 형태 ex) json, xml, html, text

3. type : 어떤 방식으로 데이터를 가져오느냐? post, get

4. success(){data} : 연결해서 성공적으로 데이터를 가져왔을 때, 처리 내용 들어온 데이터 내용이 data라는 값

5. error(){} : 에러가 나서 실패했을 때, 처리할 내용 기술

});

[ a21_jsonLoad.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    import="springWeb.z01_vo.*,java.util.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="path" value="${pageContext.request.contextPath }"/>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/a00_comm/com.css"/>
<script type="text/javascript" src="${path}/a00_comm/jquery-1.10.2.js"></script>
 
<script>
    $(document).ready(function(){
        
        $("h3").click(function(){
           
            $.ajax({
                
                url : "a12_data.jsp",
                dataType : "json",
                success : function(data){
                    
                    $("table").html("<tr><th>번호</th><th>이름</th><th>나이</th><th>사는곳</th></tr>");
                    var show = "";
                    
                    $.each(data,function(index, item){
                   
                        show += "<tr><td>"+(index+1)+"</td>";
                        show += "<td>"+item.name+"</td>";
                        show += "<td>"+item.age+"</td>";
                        show += "<td>"+item.loc+"</td></tr>";
                                             
                    });
                    $("table").append(show);
                }
            });
        }); 
    });
 
</script>
 
</head>
<body>
<center>
<h3>로드 json</h3>
 
<table>
 
</table>
 
</center>
 
</body>
</html>

[ a12_data.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 
 
[
{"name":"안녕맨","age":"27","loc":"서울"}, 
{"name":"하이맨","age":"25","loc":"인천"},
{"name":"하이요","age":"26","loc":"경기"}
]

결과 창 입니다.

로드 json을 클릭하였을때, 아래의 json 데이터들이 ajax를 통하여 전달 된 모습입니다.

javascript로 하는것 보다는 jquery로 하는게 좀더 간편한것 같습니다.

출처 : m.blog.naver.com/PostView.nhn?blogId=duddnddl9&logNo=220568856214&proxyReferer=https:%2F%2Fwww.google.com%2F

jsp ajax 검색기능 Ajax 예제 사이트 JSP ajax 예제 Ajax 예제 소스 JS ajax 예제

Ajax 검색 예제 - Ajax geomsaeg yeje

Development

[JQuery] Ajax 구현하기 / 장단점 / 구조 / 예제

AJAX의 주요 특징

AJAX의 장단점

구조

예제

관련 게시물

Js 게시판 검색 기능 - Js gesipan geomsaeg gineung

스프링 부트 게시판 페이징 - seupeuling buteu gesipan peijing

Jquery 모달창 띄우기 - jquery modalchang ttuiugi

윈도우 검색 설정 - windou geomsaeg seoljeong

JQuery 동적 div 추가 삭제 - jQuery dongjeog div chuga sagje

마이페이지 css - maipeiji css

디스코드 유저 검색 - diseukodeu yujeo geomsaeg

광고하는

최근 소식

주민등록번호 로 휴대폰 번호 찾기 - jumindeunglogbeonho lo hyudaepon beonho chajgi

아기는 몇살까지? - agineun myeochsalkkaji?

섬머 포켓 스위치 - seommeo pokes seuwichi

사진 수염 제거 어플 - sajin suyeom jegeo eopeul

복면가 왕 인디언 인형 누구야? - bogmyeonga wang indieon inhyeong nuguya?

마법천자문 전투력 순위 - mabeobcheonjamun jeontulyeog sun-wi

롤20 브금 매크로 - lol20 beugeum maekeulo

아동학대예방교육 가정통신문 - adonghagdaeyebang-gyoyug gajeongtongsinmun

Ezpdf 여백 없이 인쇄 - Ezpdf yeobaeg eobs-i inswae

온 세상 창조주 ppt - on sesang changjoju ppt

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의