2023. 6. 20. 22:44ㆍFront/JS
0. Ajax란?
- Asynchronous Javascript And XML
- 자바스크립트와 XML을 이용한 비동기 방식의 연동 방법론
- 용도
클라이언트 화면에서 javascript 또는 jQuery 로 서버에 자료를 요청하면 현재 페이지의 화면 전환 없이 서버에서
XML 또는 JSON 데이터 자료를 전송한다.
- Ajax 이전의 동기방식
Ajax를 사용하기 전에는 전통적인 웹 페이지 기술인 동기 방식(syncronous) 이었다.
syncronous 란 순서대로 처리를 한다는 뜻이다.
화면A에서 서버B로 데이터 요청 후 다시 화면A로 돌아오는 작업이 '순차적' 으로 이루어진다.
클라이언트가 서버에 자료를 요청할 시에 페이지가 서버 페이지로 갱신되어 화면이 깜박거리고
그동안에 사용자는 어떠한 작업도 할 수 없었다. (최근에는 컴퓨터가 매우 빨라져 느껴지진 않는다.)
- Ajax의 비동기 방식
AJax는 비동기(Asynchronous) 방식이다.
화면A에서 서버B로 데이터를 요청하면 서버에서 처리작업이 동시에 이루어져 화면A는 계속 유지된다.
ex) 구글의 suggestion 기능
전체 화면에서 부분만 떼어서 사용하는 것 (웹페이지의 광고창처럼)
- 원리
클라이언트 화면에서 XML 또는 JSON 을 파싱해서 화면에 출력한다.
(파싱 : 사용하고자 하는 부분만 발췌하는 것)
서버에서는 DB테이블을 조회해서 xml 또는 json 형식으로 화면에 출력하면 클라이언트로 전송됨.
[출처]
[Ajax] 개요
AJax (Asynchronous Javascript And XML) 자바스크립트와 XML을 이용한 비동기 방식의 연동 방...
blog.naver.com
1. 요청시 필요한 항목
1) URL
2) Method : POST, GET
3) option : parameter
2. Jquery Ajax
1) GET 방식 : $.get("URL주소?para이름=값&..", callBack function)
2) POST 방식 : $.post("URL주소", {para이름=값, ..}. callBack function)
3) GET + POST : $.ajax(속성명:값, ...})
- 파라미터로 배열을 전송할 때 traditional: true 추가
3. JavaScript Ajax