티스토리 뷰
반응형
- 클라이언트 측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax 기능을 사용한다.
- Ajax란 (Asynchronous Javascript(비동기 자바스크립트) + XML)의 의미로 자바스크립트를 사용한 비동기 통신,
즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고 받는 기술을 의미한다.
- Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다.
jQuery Ajax 사용
- JQuery에서 Ajax를 사용하려면 $기호 다음에 ajax라고 명명한 후 속성에 대한 값을 설정해야 한다.
$.ajax({
type: "post 또는 get",
async: "true 또는 false",
url: "요청할 URL",
data : {서버로 전송할 데이터 },
dataType: "서버에서 전송받을 데이터 형식",
success: {
// 정상 요청, 응답 시 처리
},
error: {
// 오류 발생 시 처리
},
complete: function (data, textStatus){
// 작업 완료 후 처리
}
});
jQuery Ajax 기능 관련 속성
| 속성 | 설명 |
| type | 통신 타입을 설정한다(post 또는 get 방식) |
| url | 요청할 url을 설정한다. |
| async | 비동기식으로 처리할지의 여부를 설정한다.(false인 경우 동기식으로 처리) |
| data | 서버에 요청할 때 보낼 매개변수를 설정 |
| dataType | 응답 받을 데이터 타입을 설정한다(XML, TEXT, HTML,JSON 등). |
| success | 요청 및 응답에 성공했을 때 처리구문을 설정한다. |
| error | 요청 및 응답에 실패했을 때 처리 구문을 설정한다. |
| complete | 모든 작업을 마친 후 처리 구문을 설정한다. |
Ajax 사용 예
- Jquery Ajax를 사용해 서블릿과 비동기 방식으로 데이터를 송수신한다.
* AjaxTest.java
package servlet;
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 AjaxTest
*/
@WebServlet("/ajaxTest1")
public class AjaxTest extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doHandle(request, response);
}
protected void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// getParameter() 메서드를 이용해 ajax로 전송된 매개변수를 가져온다.
String param = (String)request.getParameter("param");
System.out.println("param = " + param);
PrintWriter out = response.getWriter();
out.print("안녕하세요, 서버입니다!");
}
}
* ajax1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax 테스트</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function fn_process(){
$.ajax({
type:"get", // get 방식으로 전송한다.
dataType:"text", // 응답 데이터를 텍스트로 지정한다.
async: false, // false인 경우 동기식으로 처리한다.
url:"http://localhost:8080/JSP/ajaxTest1", // 전송할 서블릿을 지정한다.
data: {param:"Hello, jQuery!"}, // 서버로 보낼 매개변수와 값을 설정한다.
success: function (data, textStatus){ // 전송과 응답이 성공했을 경우의 작업을 정의한다.
$('#message').append(data); // 서버 응답 메시지를 <div> 엘리먼트에 표시한다.
},
error:function(data,textStatus){ // 작업 중 오류가 발생했을 경우에 수행할 작업을 설정한다.
alert("에러가 발생했습니다.");
},
complete: function(){ // 완료 시 수행할 작업을 설정한다.
alert("작업을 완료했습니다!");
}
});
}
</script>
</head>
<body>
<input type="button" value="전송하기" onClick="fn_process()" /><br><br>
<div id="message"></div>
</body>
</html>
- 코드 작성 후 /ajax1.html 에 접속하여 [전송하기] 버튼을 누르면 다음 메세지가 나타난다.
JSON(Javascript Obejct Notation)
- PC 브라우저와 서버 그리고 Ajax를 연동할 때는 XML 형식으로 데이터를 주고 받는다.
- 모바일에서도 서버와 Ajax로 연동해 작업을 많이 한다. 그런데 XML로 연동할 경우 내부적으로 여러 단계의 처리과정을 거치게 되므로 자원이 열악한 모바일 환경은 속도 면에서 불리하다.
- 따라서 모바일에서는 대부분 XML보다 형식이 단순한 JSON으로 데이터를 주고 받는다.
- JSON(Javascript Obejct Notation)은 name/value 쌍으로이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는
텍스트를 사용하는 개방형 표준 데이터 형식이다.
- 비동기 브라우저/서버 통신(Ajax)을 위해 XML을 대체하는 데이터 전송 형식 중 하나이다.
- 근본은 JS에서 파생된 것이므로 JS 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이어서 쉽게
사용할 수 있다.
JSON의 여러 가지 자료형
| 자료형 | 종류 | 예 |
| 수(Number) |
정수 | 76, 197,750,-11,-234 등 |
| 실수(고정소수점) | 3.14, -2.717, 45.78 등 | |
| 실수(부동소수점) | 1e4, 2.5e34, 5.67e-9, 7.66E-3 등 | |
| 문자열 |
문자열 | "1234" "true" "apple-num" "사람" "\"JSP\"" 등 |
| 제어 문자 | \b(백스페이스) \f(폼 피드) \n(개행) \t(탭) \"(따옴표) \/(슬래시) \\(역슬래시) 등 |
|
| 배열 | 배열은 대괄호[]로 나타낸다. 배열의 각 요소는기본 자료형이거나 배열, 객체다. 각 요소들은 쉼표(,)로 구분한다. |
"name" : ["홍길동","이순신","임꺽정"] //대괄호 안에 배열 요소를 콤마(,)로 구분해서 나열한다. |
| 객체 | JSON 객체는 중괄호 { } 로 둘러싸서 표현한다. 쉼표(,)를 사용해 여러 프로퍼티를 포함할 수 있다. |
{ "name" : "홍길동", "age" : 16, "weight" : 67 } // 중괄호 안에 name/value 쌍을 콤마,로 구분해서 나열한다. |
반응형
'JQuery' 카테고리의 다른 글
| [jQuery]jQuery란 무엇인가 (0) | 2024.08.16 |
|---|
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 네트워크
- 스프링
- 서블릿
- HTML
- 미들웨어
- Redux
- JSP
- Cookie
- Network
- Session
- Java Server Page
- nodejs
- Servlet
- 서브넷팅
- react
- CSS
- el
- html css
- Spring
- CSS 속성
- 내장객체
- FMT
- a 태그
- script element
- 제이쿼리
- Binding
- httpServletRequest
- 리액트
- javaserverpage
- 세션
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함