- 전체
- 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 (마이크로프론트앤드)
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 [과일가게 개발자]
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.