Notice
Recent Posts
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 | 31 |
Tags
- 재귀
- 자바 재귀 조합
- 순열 재귀
- 후위표기
- 자바입출력
- 상속
- 알고리즘 그래프
- 순열코드
- parseInt()
- jquery 속성선택자
- 조합 재귀
- 재귀함수
- Java
- 서로소
- 자바
- char to str
- jquery dom 계층 선택자
- 자바 순열 코드
- java lambda
- 알고리즘
- str to char array
- java Collections.sort()
- 자바스크립트 이벤트중지
- java 내부 클래스
- 자바 조합 재귀
- inner class
- jquery 필터선택자
- 자바스크립트 이벤트처리
- Interface
- jquery 이벤트 처리
Archives
- Today
- Total
유블로그
[Ajax] Ajax에 대하여 본문
- Ajax(Asynchronous JavaScript and XML)
- 언어나 프레임워크가 아닌 구현하는 방식을 의미한다.
- 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리한다.
- 자바스크립트의 XMLHttpRequest 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회한다.
- 동적으로 DOM 을 구성해야하므로 구현이 복잡하다.
- 클라이언트 중심의 개발 방식이다.
- ajax 요청에 대한 응답
- ajax 적용하면 event 발생시 서버에서 요청을 처리한 후 text, xml, json 중 하나로 응답한다.
- client(브라우저)에서는 이 응답 데이터를 이용하여 화면 전환 없이 현재 페이지에서 동적으로 화면을 재구성한다.
- javascript ajax
- XMLHttpRequest 는 자바스크립트가 ajax 방식으로 통신할 때 사용하는 객체이다.
- 전송방식, 경로 등 전송정보를 포함한다.
- 정확한 값을 받기 위해서 httpRequest.readyState == 4 인지 확인하여 데이터를 전부 받은 상태인지 확인 후, httpRequest.status == 200 을 확인하여 요청에 성공했는지 확인이 되면 해야할 일을 수행하는 방식으로 한다.
function getTime() {
sendRequest("1-03currenttime.jsp", null, viewTime, "GET");
}
function viewTime() {
if(httpRequest.readyState == 4) {
if(httpRequest.status == 200) {
var time = httpRequest.responseText;
var div = document.getElementById("curtime");
div.setAttribute("class", "viewtime");
div.innerHTML = time;
}
}
}
window.onload = function() {
setInterval("getTime()", 1000);
}
- jquery ajax
- 옵션
- url : 대상 url
- data : 요청 매개변수
- type : get 또는 post
- success : 성공했을때 수행할 함수
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval("viewTime()", 1000);
});
function viewTime() {
$.ajax({
url:"1-03currenttime.jsp",
type:"GET",
success:function(response) {
$("#curtime").addClass("viewtime").empty().append(response);
},
error:function(xhr,status,msg){
console.log("상태값 : " + status + " Http에러메시지 : "+msg);
}
});
}
</script>
'기타' 카테고리의 다른 글
[eclipse] 여러 프로젝트 동시에 보기/하나의 워크스페이스 여러 창으로 보기 (0) | 2020.10.10 |
---|---|
[eclipse] 자동으로 인터페이스 추출하기 (0) | 2020.10.07 |
[Bootstrap] 부트스트랩에 대하여 (0) | 2020.09.20 |
파라미터 전송 방식: GET vs POST (0) | 2020.09.20 |
이클립스 디버깅 키 (0) | 2020.08.06 |