Ajax : 비동기 방식의 Javascript와 XML
reload 없이 data를 주고받는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var request = $.ajax({
url: "script.php", //통신 할 url
method: "POST", // 통신할 메서드 타입
data: { id : '' }, //전송할 데이터
dataType: "html" //전송받은 데이터를 변화시킬 컨텐츠 타입
/*
tataType
html(text/html), sjon (application/jason),xml (text/xml), text (text/palin)
*/
});
//정상적으로 통신이 완료되었을 경우 실행되는 메서드
//인수값인 함수를 실행시켜준다 (콜백함수)
request.done(function( data ) {
consolo.log.( data );
});
//에러 발생시 실행되는 메서드
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
/*
웹(브라우저)에서 표현할 수 있는 콘텐츠 타입
1) text/html
html을 표현하는 타입
2) text/xml
xml을 표현하는 타입
(외부 자원 관리 데이터로 저장 혹은 외부와 통신하기 위한 타입)
3) text/plain
텍스트를 표기하는 타입
4) application/json
json을 표현하는 타입
포맷터 : {"키" : "값"} 형태로 이루어진 문자열
*/
</script>
<title>콘텐츠 삽입</title>
</head>
<body>
</body>
</html>Ajax Html Call
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#ajaxCall').click(function() {
var num = $('#num').val()
var request = $.ajax({
url: "ajaxHtmlCall.jsp", //통신 할 url
method: "POST", // 통신할 메서드 타입
data: { len : num }, //전송할 데이터
dataType: "html" //전송받은 데이터를 변화시킬 컨텐츠 타입
});
request.done(function(data) {
console.log(data);
if(data != undefined && data != ''){
$('#ajaxResult').html(data);
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
})
</script>
<title>Insert title here</title>
</head>
<body>
<input type="number" id="num" placeholder="출력갯수">
<button type="button" id="ajaxCall">호출</button>
<div id="ajaxResult">호출 버튼을 클릭하세요</div>
</body>
</html>ajaxHtmlCall.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%
//len 키 값으로 ajax02.html 에서 값 전송하여 받기
String len = request.getParameter("len");
int num = 0;
//len 값이 null과 공백이 아니라면
if(len != null && !"".equals(len.trim())){ // nullPointException을 피하기 위해 변수를 메서드 안에서 쓰기
num = Integer.parseInt(len);
}
%>
<!DOCTYPE html>
<style>
td{border : 1px solid #000;}
</style>
<table>
<tbody>
<%
for(int i = 0 ; i < num ; i ++){
%>
<tr>
<td>안녕하세요 <%= i %></td>
</tr>
<%
}
%>
</tbody>
</table>Ajax Json Call
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
{"name":"홍길동", "age": 25, "array" : ["전주","익산"]}브라우저에서만 이렇게 보일 뿐 통신에서는 문제 없다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('#ajaxCall').click(function() {
var request = $.ajax({
url: "ajaxJsonCall.jsp", //통신 할 url
method: "POST", // 통신할 메서드 타입
// data: { len : num }, //전송할 데이터
dataType: "json" //전송받은 데이터를 변화시킬 컨텐츠 타입
});
request.done(function(data) {
if(data != undefined && data != ''){
console.log(data);
$('#ajaxResult').val(data.name)
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
})
</script>
<title>Insert title here</title>
</head>
<body>
<button type="button" id="ajaxCall">호출</button>
<input type="text" id="ajaxResult" readonly="readonly" placeholder="회원명">
</body>
</html>ajaxJsonCall.jsp
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
{"name":"홍길동", "age": 25, "array" : ["전주","익산"]}
자바스크립트의 보안 정책
자바스크립트에서 ajax() 메서드로는 서로 다른 도메인의 데이터를 전송할 수 없고 교차 도메인을 허용하지 않는다.
gson
json구조를 띄는 직렬화된 데이터를 JAVA의 객체로 역직렬화, 직렬화 해주는 자바 라이브러리
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import ="com.google.gson.Gson" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%
//Gson 인스턴스화(객체화)
Gson gson = new Gson();
//Map 객채화
Map map = new HashMap();
//put 메서드를 활용하여 값을 저장할 수 있다.
map.put("name","홍길동");
map.put("age",25);
map.put("array",new String[]{"전주","익산"});
//toJson 메서드를 활용하여 키와 값이 있는 객체를 json 방식으로 출력
String json = gson.toJson(map);
out.println(json);
%>
ajaxJsonCall 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax를 활용하여 아이디 중복검사</title>
<style type="text/css">
.err{border: 1px solid #ff0000;}
.ek{border: 1px solid #000000;}
</style>
<script type="text/javascript" src="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/*
tlftmq3. #idCheckBtn 클릭시 #memberId 값을 가지고
ajaxIdCheck.jsp에 ajax를 활용하여 통신하고 아이디 중복 검사를 하여라.
아이디가 이미 존재한다면 #memberId의 클래스를 .err로 변경하고
존재하지 않는다면 .ok로 변경하여라.
*/
$(function() {
$('#idCheckBtn').click(function() {
var wId = $('#memberId').val()
var request = $.ajax({
url: "ajaxIdCheck.jsp", //통신 할 url
method: "POST", // 통신할 메서드 타입
data: { id : wId }, //전송할 데이터
dataType: "json" //전송받은 데이터를 변화시킬 컨텐츠 타입
});
request.done(function(data) {
if(data != undefined && data !='')}
if(data.result == "Y"){
$('#memberId').attr("class","err")
}else if(data.result == "N"){
$('#memberId').attr("class","ok")
}else if(data.result == "A"){
$('#memberId').attr("class","err")
alert('아이디를 입력해주세요.');
}
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
})
</script>
</head>
<body>
<input type="text" id="memberId" class="ok">
<button type="button" id="idCheckBtn">아이디 중복 확인</button>
</body>
</html><%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import ="com.google.gson.Gson" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%
/*
데이타베이스에서 조회한다는 가정하에 아래 데이터나열
(나열된 데이터는 이미 존재하는 아이디 id001, id002, id003)
*/
//Gson 인스턴스화(객체화)
Gson gson = new Gson();
//Map 객채화
Map map = new HashMap();
String id = request.getParameter("id");
if(!"".equals(id)){
if("id001".equals(id)){
map.put("result","Y");
}else if("id002".equals(id)){
map.put("result","Y");
}else if("id003".equals(id)){
map.put("result","Y");
}else{
map.put("result","N");
}
}else if("".equals(id) || id == null){
map.put("result","A");
}
String result = gson.toJson(map);
out.print(result);
%>
'JavaScript' 카테고리의 다른 글
| [JQuery] 유효성 검사 + ajax 아이디 중복 검사 (0) | 2020.04.08 |
|---|---|
| [JQuery] ajax 실습 (0) | 2020.04.07 |
| [JQuery] 객체 편집 메서드 실습 (0) | 2020.03.31 |
| [JQuery] 속성 조작 메서드 / 객체 편집 메서드 / 동적바인딩 (0) | 2020.03.30 |