Notice
반응형
Recent Posts
250x250
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- Oracle
- googleChart
- TSX
- 응용SW
- react
- input
- BREW
- CSS
- jsp
- 이클립스
- SQL
- npm
- script
- SCIPRT
- 붙여넣기방지
- node
- googleCharts
- IntelliJ
- 병행프로세스와 상호배제
- java
- Eclipse
- 이미지용량제한
- txs
- 정처산기
- 이론
- createBro
- js
- php version
- 책추천
- html
Archives
- Today
- Total
개발하자
[JS] AJAX 호출 본문
728x90
비동기 데이터 보내고 호출 하기
나는 프로젝트 특성상 모든 구현을 jsp에서 했다.
1번 jsp : ajax 호출 및 표출할 jsp
2번 jsp : ajax 호출을 위해 구현되어 있는 jsp (1번에서 작성하는 url)
3번 jsp : 쿼리 함수가 있는 jsp
동작하는 순서는 1번 -> 2번 -> 3번 -> 2번 -> 1번 순이 된다.
구현할 때는 편한 순서로 하면 좋지만 나는 항상 쿼리를 먼저 만든다
[ 1번 jsp : script/HTML ]
<script>
function selectStatusAjax() {
// 호출한 데이터 표출할 id
cateS = document.getElementById("categoryCodeData3View");
$.ajax({
type: "GET",
url: '/data/url', // ajax 호출 url
contentType: "application/json",
data: {
dataSid : dataSid // ajax 호출을 위한 데이터 보내기
},
// Cache-Control 헤더를 설정하여 캐싱 비활성화
// 뒤로가기 시 문제 없도록 캐싱 남기지 않게 추가
beforeSend: function(xhr) {
xhr.setRequestHeader('Cache-Control', 'no-cache');
},
success: function(rVal) {
var jObj=JSON.parse(rVal);
if(jObj != null && jObj !== undefined){
if(jObj.length != 0&&jObj != null&&jObj != ''){
for(var i=0;i<jObj.length;i++){
// 원하는 형태로 표출
htmlCateS += '<p style="text-align: center;width: 20%;float: left;">'+jObj[i].CODE_STATUS+'<br/>'+jObj[i].REGISTER_DATE+'<br/></p>';
cateS.innerHTML=htmlCateS;
}
}
}
},
error:
function(request,status,error){
alert('errorStatus=' +request, status, error);
}
});
}
</script>
<body>
<p id="categoryCodeData3View" class="categoryCodeData3View" >
<!-- 진행상태 ajax 표출될 자리 -->
</p>
</body>
호출할 url 에 필요한 data 들을 넣어서 호출 후 원하는 html 자리에 호출한 데이터 표출해 준다.
[ 2번 jsp : ajax 구현 ]
<%@include file="3번.jsp"%>
<%
// 1번에서 가져온 데이터
String dataSid = parseNull( request.getParameter("dataSid"));
List<Map<String,Object>> sqlVal = null;
try{
// cropQuestionStatusSelect() 함수에 SELECT 쿼리
// 3번 jsp의 쿼리를 가져온다
sqlVal = jdbcTemplate.query(cropQuestionStatusSelect(), new Db(), dataSid);
JSONArray jsonArray = convertListToJson( sqlVal );
out.print(jsonArray); // json으로 내보낸다
}catch(NullPointerException e){
out.print("ERROR");
}
%>
1번에서 가져온 데이터를 필요에 따라 사용! 나는 3번 jsp에서 쿼리 조회할때 필요하기에 가져왔다 :)
2번에서 할일은 쿼리 조회를 해 html에 표출할 데이터를 가져와서 1번에 뿌려준다
[ 3번 jsp : 쿼리 ]
<%!
public String StatusSelect(){
String StatusSelect = "";
StatusSelect += "SELECT CODE_SID, CODE_BOARD_SID, CODE_STATUS, REGISTER_DATE ";
StatusSelect += "FROM table WHERE CODE_BOARD_SID = ? ORDER BY CODE_SID ASC ";
return StatusSelect;
}
%>
비동기는 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하게 되고
비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을때 마냥 기다릴 수 없을때 사용하게 된다
결론은 비동기로 호출한 데이터가 어떠한 것에 의해 변경되면 기다리지 않고 바로 눈앞에서 변경되는걸 볼 수 있다!
공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.
고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.
행복한 하루 보내세요 (❁´◡`❁)
728x90
반응형
'TECH STACKS > JSP︲HTML ︲CSS ︲SCRIPT' 카테고리의 다른 글
[JAVA] jsp에서 DB 쿼리 호출 (0) | 2023.11.29 |
---|---|
[JS] 스크립트 form submit (onclick) (0) | 2023.11.29 |
[HTML] a 태그로 알림창 생성 (0) | 2023.11.07 |
[JS] 버튼으로 테이블 행 추가 하기 (0) | 2023.09.12 |
[JS] checkbox 체크 시 Y, 체크 해제 시 N (0) | 2023.09.12 |