Ajax

Ajax = Asynchronous JavaScript and XML

"JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고 받는 기술"

- 비동기 (asynchronous) v.s 동기 (synchronous)
	- 동기: 요청과 결과가 동시에 일어난다!
    	- 간단하고 직관적인 설계 **But,** 결과가 주어질 때까지 대기해야 함!
    - 비동기: 요청과 결과가 동시에 일어나지 않는다!
    	- 효율적인 자원 사용(결과가 주어질 동안 다른 작업 가능) **But,** 설계가 복잡!
        

Why Ajax?

• 기본적인 HTTP 프로토콜의 단계:
  1) 클라이언트 --> request --> 서버
  2) 클라이언트 <-- response <-- 서버
  3) 연결 끊김
  • 화면의 내용 갱신하기 위해서 1)~3)을 매번 반복
  • 일부분 갱신을 위해서는 자원과 시간 낭비!

--> Ajax: json/xml형태로(XMLHttpRequest 객체로) 필요한 데이터만 받아 갱신

장점

1. 웹 페이지 속도 향상 (페이지 이동없이 화면 전환 가능)
2. 서버에서 response가 올 때까지 다른 처리 가능
3. 전체적인 코딩 양 줄어듦
4. 다양한 UI를 가능케 함 (플러그인 없이 interactive한 웹페이지 구현)

단점

1. 히스토리 관리가 잘 되지 않아 보안에 유의해야 함
2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있음
3. 지원하는 Charset이 한정되어 있다.
4. 스크립트로 작성되므로 디버깅이 어렵다.
5. 동일-출처 정책으로 인해 다른 도메이과는 통신이 불가능하다.
6. XMLHttpRequest 로 통신할 경우 사용자에게 진행 정보가 제공되지 않아 요청 완료 전 페이지를 떠나거나 오작동할 수 있음

jQuery + Ajax : Cross Browsing의 문제 해결

크로스 브라우징: 웹 페이지 제작 시 모든 브라우저에서 호환되게 하는 작업

• 필요성: 브라우저마다 랜더링 엔진이 다르기 때문 (ex: Trident, Gecko, Webkit, Presto, Blink, 듀얼 엔진)
• jQuery에서 제공하는 Ajax관련 API 중 $.ajax

(------------------------$.ajax() 관련 내용 추가 예정 ---------------------)
https://api.jquery.com/jQuery.ajax/

-참고-
https://coding-factory.tistory.com/143
https://private.tistory.com/24