- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JQuery [jQuery] Ajax 기본 사용법
2018.08.03 14:50
[jQuery] Ajax 기본 사용법
Ajax를 이용하면 웹 어플리케이션과 비동기적으로 데이터를 주고 받은후 클라이언트에서 해당 데이터에 대한 처리를 할 수 있다. 쉽게 이야기하면 Ajax를 이용할 경우 별도의 웹 페이지를 호출하지 않더라도, 클라이언트 화면을 유지한채 다른 페이지를 호출할 수 있다.
Ajax에 대한 설명은 위키백과를 참고하기 바란다. - http://ko.wikipedia.org/wiki/Ajax
이러한 Ajax를 jQuery를 이용하면 정말 손쉽게 사용할 수 있는데, 기본적인 설정값만 넣어주면 바로 사용이 가능하다.
다음 예제는 웹페이지가 로딩된 후 ajax를 이용하여 ajaxData.jsp를 호출하는 예제이다.
ajaxData.jsp는 텍스트 형식의 값을 리턴하며 리턴된 값을 alert창과 div에 출력한다.
=========================================================
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!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>Ajax 간단 테스트</title><script type="text/javascript" language="javascript"> $(document).ready(function(){ $.ajax({ type : "GET", url : "ajaxData.jsp?type=1", dataType : "text", error : function(){ alert('통신실패!!'); }, success : function(data){ alert("통신데이터 값 : " + data) ; $("#dataArea").html(data) ; } }); });</script></head><body> <div id="dataArea"></div></body></html>위의 예제는 ajax 통신을 할때 가장 기본이 되는 항목만 사용하였다. 적어도 위의 설정값 정도는 최소한으로 넣어주는게 좋다.
|
속성 |
설명 |
|
type |
http 전송 method를 지정한다. GET, POST |
|
url |
호출 URL. GET 방식일경우 URL 뒤에 파라미터를 붙여서 사용해도 된다. |
|
dataType |
Ajax를 통해 호출한 페이지의 Return 형식이다. 형식에 따라 xml, json, html, text 등을 사용하면 된다. |
|
error |
에러났을때의 처리 부분이다. |
|
success |
성공했을때의 처리 부분이다. 보통 해당 부분에서 데이터 핸들링을 하면 된다. |
출처: http://fruitdev.tistory.com/172 [과일가게 개발자]
[jQuery] Ajax 기본 사용법
Ajax를 이용하면 웹 어플리케이션과 비동기적으로 데이터를 주고 받은후 클라이언트에서 해당 데이터에 대한 처리를 할 수 있다. 쉽게 이야기하면 Ajax를 이용할 경우 별도의 웹 페이지를 호출하지 않더라도, 클라이언트 화면을 유지한채 다른 페이지를 호출할 수 있다.
Ajax에 대한 설명은 위키백과를 참고하기 바란다. - http://ko.wikipedia.org/wiki/Ajax
이러한 Ajax를 jQuery를 이용하면 정말 손쉽게 사용할 수 있는데, 기본적인 설정값만 넣어주면 바로 사용이 가능하다.
다음 예제는 웹페이지가 로딩된 후 ajax를 이용하여 ajaxData.jsp를 호출하는 예제이다.
ajaxData.jsp는 텍스트 형식의 값을 리턴하며 리턴된 값을 alert창과 div에 출력한다.
=========================================================
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!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>Ajax 간단 테스트</title><script type="text/javascript" language="javascript"> $(document).ready(function(){ $.ajax({ type : "GET", url : "ajaxData.jsp?type=1", dataType : "text", error : function(){ alert('통신실패!!'); }, success : function(data){ alert("통신데이터 값 : " + data) ; $("#dataArea").html(data) ; } }); });</script></head><body> <div id="dataArea"></div></body></html>위의 예제는 ajax 통신을 할때 가장 기본이 되는 항목만 사용하였다. 적어도 위의 설정값 정도는 최소한으로 넣어주는게 좋다.
|
속성 |
설명 |
|
type |
http 전송 method를 지정한다. GET, POST |
|
url |
호출 URL. GET 방식일경우 URL 뒤에 파라미터를 붙여서 사용해도 된다. |
|
dataType |
Ajax를 통해 호출한 페이지의 Return 형식이다. 형식에 따라 xml, json, html, text 등을 사용하면 된다. |
|
error |
에러났을때의 처리 부분이다. |
|
success |
성공했을때의 처리 부분이다. 보통 해당 부분에서 데이터 핸들링을 하면 된다. |
출처: http://fruitdev.tistory.com/172 [과일가게 개발자]
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 4 |
[HTML/CSS] 4. 카드형 리스트
 | 졸리운_곰 | 2018.08.22 | 1120 |
| 3 | HTML DIV tag : 영역 밖과 안쪽에 여백주기 - 마진과 패딩 Margin / Padding | 졸리운_곰 | 2018.07.12 | 538 |
| 2 |
HTML DIV tag: 테두리 너비 지정하는 방법 - WIDTH : 픽셀(px) 또는 퍼센트(%)
| 가을의곰 | 2017.06.10 | 827 |
| 1 |
SVG by HTML5
| 졸리운_곰 | 2015.11.12 | 463 |