본문 바로가기
반응형

💻 1. 웹개발_Front end/1-7 Ajax21

[Ajax] 06. GET 방식과 POST방식 1. GET 방식 조회 삭제 2. POST 방식 조회 삭제 3. Ajax - GET 방식 조회 삭제 4. Ajax - POST 방식 등록 삭제 2021. 10. 6.
[Ajax] 05. Ajax 기본형과 설정 값들 1. Ajax 기본형 $.ajax({ settings : 설정 값들 (서버에 요청할 url, 메소드 방식, 비동기 여부 등등) }); - Ajax 호출 후 리턴 값은 jqXHR(jquery XMLHTTPRequest) 객체 2. Ajax 설정 값들 $.ajax({ /*설정 값들 영역*/ url : 요청할 서비스 url('/list.do'), type : 메소드 타입 지정('POST', 'GET', 'PUT', 'DELETE', 기본 값 : 'GET'), async : 비동기 방식/동기 방식 지정(true : 비동기 방식, false : 동기 방식), data : 서버로 전달할 데이터를 입력. 문자열, 배열, 객체 형식 지원 문자열인 경우 직접 url 인코딩을 해야됨(한글/특수문자 유니코드로 변경) ex).. 2021. 10. 6.
[Ajax] 04. Ajax XMLHttpRequest(XHR) 객체 2. XMLHttpRequest(XHR) 객체 1. XMLHttpRequest(XHR) 객체 - 서버와 상호작용하기 위해 사용 - 서버와 데이터를 주고 받기 위해 사용하는 객체 - 전체 페이지의 새로고침없이 데이터를 받아올수 있음 - 데이터 단위로 서버에 요청을 하기 때문에 화면의 일부분만 새로고침 가능 2. Ajax - XHR 객체를 기본적으로 사용 - 브라우저 -> Ajax -> XHR 객체 -> 서버와 통신 3. XHR 객체 직접사용 - 소스코드가 복잡하고 어려움 (단점) - 많이 사용되지 않음 4. Ajax를 통한 XHR 객체 사용 - Ajax를 통해 XHR 객체로 접근하는 방식을 주로 사용 - Ajax -> XHR 객체 -> 서버와 통신 - XHR 객체를 직접 사용하는 것보다 소스코드 구성이 간.. 2021. 10. 6.
[Ajax] 03. 동기방식과 비동기방식 동기(Synchronous)와 비동기(Asynchronous) 의미 ① Synchronous(동기) - 앞의 일이 끝나야 뒤의 일을 시작 - 앞의 일의 끝 시점과 뒤의 일의 시작 시점이 일치 ② Asynchronous(비동기) - 앞의 일의 끝 시점과 뒤의 일의 시작 시점이 불일치 - 뒤의 일이 앞의 일보다 먼저 종료될 수 있음 * 음식 주문 비유 - 손님 A, B, C가 있다고 가정하자 - 동기 : 손님 A에게 주문을 받으면 A의 서빙이 끝날때까지 손님 B의 주문을 받을 수 없음 - 비동기 : 손님 A, B, C에게 주문을 받고 먼저 음식이 나온 순서대로 서빙을 해준다. (먼저 처리된 요청을 먼저 응답해준다.) 동기 방식과 비동기 방식의 특징 ① Synchronous(동기) - 요청과 응답이 순차적으로.. 2021. 10. 6.
[Ajax] 02. Ajax 의미 AJAX ( Asynchronous Javascript And XML ) 1. Ajax 란? - Ajax는 자바스크립트를 이용해 서버와 비동기 방식으로 데이터를 주고 받을 수 있는 통신 기능 - 서버에 요청을 보낼 때 데이터 단위로 보내기 때문에 화면 전체를 새로고침할 필요없이 원하는 부분만 새로고침이 가능(XMLHTTPRequest 객체 사용) - 전통적인 웹 어플리케이션(JSP/Servlet)에서는 페이지 단위로 서버에 요청에 보내기때문에 화면 전체가 새로고침 - A(Asychronous) : 비동기 방식을 사용하겠다는 의미 - jax(Javacript And XML) : 자바스크립트와 XMLHTTPRequest객체를 이용해 화면을 동적으로 구성하겠다는 의미 2. Javascript And XML의 .. 2021. 9. 27.
[Ajax] 01. 전통적인 웹 어플리케이션 전통적인 웹 어플리케이션 1. 전통적인 웹 어플리케이션의 동작 ① 요청 단위가 페이지 단위 ② 서버에서 클라인어트가 요청한 페이지를 생성하여 응답함. - 페이지 단위의 요청과 응답의 문제점은 화면의 원하는 부분만 갱신하고 싶어도 페이지 전체를 HTTP 서버로부터 다시 받아와야 한다는 것 - HTTP 서버는 브라우저의 요청에 따라 페이지 전체를 재생성 후 전송 2. 전통적인 웹 어플리케이션(JSP/Servlet) 1. JSP(Java Server Page) - 웹 페이지를 동적으로 생성하기 위한 서버 프로그램 - HTML소스에 JAVA소스를 추가하는 방식 - JSP소스에는 HTML 태그들을 사용할 수 있기 때문에 화면구성이 편하고 용이 - 화면구성 소스에 적합. 2. Servlet - 웹 페이지를 동적으로.. 2021. 9. 27.
반응형