Ajax(Asynchronous Javascript and XML)
2022. 12. 19. 21:46ㆍJSP
Ajax(Asynchronous Javascript and XML)
synchronous는 멀티 스레드에서 블록킹을 하는것이다. 하나씩 들어오게끔 한다. 근데 앞에 A가 붙어 Asynchronous는
요청을 하나만 처리하지않고 기존요청+알파 로 처리한다.
빠르게 동작하는 동적인 웹 페이지를 만들기위한 개발 기법이다.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지 일부분만을 갱신할 수 있다.
백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
이 때 아래와 같은 데이터를 주고 받을 수 있다.(페이지 이동없이도 처리할 수 있다는 것이다. JAVA의 연산이든 뭐든 현재 페이지가 이동되지 않는다. 굳이 JAVA까지 안끌고가도 된다는 것이다.)
-JSON
-XML
-HTML
-텍스트파일
Ajax의 장점
1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있다.
3. 다양한 UI(동적 페이지) 구현이 가능해진다. 데이타베이스에서 호출된 결괏값을 다양하게 자바스크립트로 꽂을 수 있다.
Ajax의 단점
1. 페이지 이동이 없기 때문에 히스토리 관리가 안된다.
2. 반복적인 데이터를 요청하면 느려지거나 작동하지 않게 된다.
3. 페이지의 이동이 없다는 것은 보안상의 문제도 발생할 수 있다는 것이다.
Ajax의 구성 요소
-웹 페이지의 표현을 위한 HTML과 CSS
-데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델
-데이터 교환을 위한 JSON이나 XML
-Ajax도 서버이다. 웹 서버와의 비동기 통신을 위한 XMLHttpReqeust객체(비동기통신을할수있게된다.이 객체가 자바스트립트에서 팔요하다)
-위에서 언급한 모든 기술을 결합하여 사용자가 작업 흐름을 제어하는 데 사용되는 자바스크립트
XMLHttpReqeust객체(핵심객체)
전송할수있고전송된데이타를통해서연산결과까지가지고올수있따
var 객체명 = new XMLHttpRequest();
Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다.
이거 없으면 전송자체가 안된다.
Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.
웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문이다.
Ajax라는걸구현하기위해서는 이객체가 자바스크립트에서 필요하다.SPA 페이지는 하나이고 DB에서 계속 동적
으로 계산을 한다.
서버에 요청하기
Ajax에서는 XMLHttpRequest객체를 사용하여 서버와 데이터를 교환한다.
따라서 서버에 요청을 보내기 위해서는 객체를 생성해야 하고, 객체의 open()메소드와
send()메소드를 사용하여 요청을 보낼 수 있다. 통신할수있는환경,세션을 열고 그
세션에서 어떤 경로로보낼건지를 send에다가 전달하는것이다.
open()
서버로 보낼 Ajax 요청 형식을 설정한다. 겟방식?유알엘?로 할지를... 준비하는 것. 이렇게 보내겠다.
무슨방식?겟방식,어디로?URL,본체 URL(파라미터말고), 동기여부 처리가능. 비동기는 여러개 동시에 처리된다.
여러개 연산같이하면 연산을건너뛴다너무속도가빨라서연산이스킵이된다.AJAX쓰다가 안되면 동기식으로 바꿔보기
open(전달방식, URL, 동기 여부);
전달방식:GET,POST 등 요청 방식 작성
URL : 요청을 처리할 서버의 파일 주소 전달
동기 여부 : 요청을 동기식으로 전달할 지, 비동기식으로 전달할 지를 선택
send()
작성된 Ajax 요청을 서버로 전달.
전달방식에 따라서 인수를 가질 수도 또는 가지지 않을 수도 있다.
send()를 하면 겟방식이나 안에 파라미터를 적으면 포스트방식으로 헤더에 숨겨전달된다.
GET방식 : send()
어차피 겟방식에서는 URL 뒤에 퀴리 스트링 붙여서 보낸다.
POST방식 : send(전송할 데이터의 전달 방식에 맞추어 작성)
'JSP' 카테고리의 다른 글
암호화 와 복호화 (0) | 2022.12.20 |
---|---|
setRequestHeader() (0) | 2022.12.19 |
GET 과 POST (0) | 2022.12.19 |
내장 객체 (0) | 2022.12.19 |
Java beans (action tag) (0) | 2022.12.19 |