ajax : Asynchronous JavaScript and XML
- xml형식의 데이터 비동기 처리(작업의 요청 순서와 상관없이 처리되는 방식)
- json(JavaScript Object Notation)
: 배열이나 객체형식으로 작성되어지는 데이터
: 문자형식의 데이터를 효율적으로 주고 받는 구조
<json 형태 데이터 형식으로 구성된 값(문자형 데이터)>
{}:객체 (key ,value형태)
{
"name":"리미","age":28, "address":"서울"
}
//접근 방식 ; object.name / object["name"][]:배열
[
"html","java","javascript"
]
//접근방식 : object[indexNumber]
중첩구조
[{}] 배열안에 객체
[
{"city":"서울","hotpalce":"홍대"},
{"city":"부산","hotpalce":"해운대"},
{"city":"제주도","hotpalce":"성산일출봉"}
]
//접근방식 : object[indexNumber].city / object[indexNumber]["city"]{[]} 객체 안에 배열
{
"firstName":"김",
"lastName":"유림",
"books":["java","html","jsp"]
}
//접근방식 : object.book[indexNumber]
기본형태
$.ajax({
type:'post', //타입 (get,post,put 등등)
url:'/test', //요청할 서버url
async : true, //비동기화 여부 (default:true)
headers:{//http header
"Content-Type":"application/json",
"X-HTTP-Method-Override" : "POST"
},
dataType:'text', //데이터 타입 (html,xml,json,text)등등
data:JSON.stringfy({//보낼 데이터(Object, String, Array)
"no":no,
"name":name,
"nick":nick
}),
success :function(result) {//결과 성공 콜백함수
console.log(result);
},
error : fucntion(request,status,error){//결과 에러 콜백 함수
console.log(error)
}
})
비동기 통신 방식으로 순차 처리가 아니기 때문에 버튼 클릭 전 <p> 태그가 보인다
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#buttonSubmit").on("click",function(){
$.ajax({
url:'./ajaxServer.jsp',
type:'post',
data:{nickName:'리미'},//여기까지 서버 쪽으로 보낼 때 필요한 데이터
dataType:'json', //여기부터는 받을 때 필요한 데이터
success:function(data){ //data={"nickName":"리미"} (data:json형태로 넘어온 정보를 서버가 보내는 정보를 받을 매개변수)
console.log(data);
console.log("요청성공");
$("#nickname").text(data.nickName)
}
});
});
});
</script>
</head>
<body>
<input id="buttonSubmit" type="button" value="제출">
<h1 id="nickname"></h1>
<p>ajax 통신성공 </p>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
String nickName = request.getParameter("nickName");
%>
<!-- 서버페이지는 요청을받아서 데이터를 보내주기만 하기 때문에 태그정보 필요없다. -->
{
"nickName":"<%=nickName %>" <!-- "nickName":"리미" -->
}'jquery' 카테고리의 다른 글
| JQuery_객체조작 (0) | 2022.11.21 |
|---|---|
| JQuery_속성 탐색 선택자 (0) | 2022.11.21 |
| JQuery_배열 관련 메서드 (0) | 2022.11.21 |
| JQuery_효과 메서드 (0) | 2022.11.18 |
| JQuery_탐색 선택자 (0) | 2022.11.17 |