ajax 기술 및 원리 분석

ajax 에 포 함 된 기술 은 ajax 가 새로운 기술 이 아니 라 몇 가지 기 존 기술 의 결합 체 라 는 것 을 잘 알 고 있 습 니 다.그것 은 아래 의 기술 을 조합 하여 만 든 것 이다.1.CSS 와 XHTML 로 표시 합 니 다.2.DOM 모델 을 사용 하여 상호작용 과 동적 디 스 플레이 를 한다.3.서버 와 비동기 통신 을 위해 XML HttpRequest 를 사용 합 니 다.4.자바 script 을 사용 하여 연결 하고 호출 합 니 다.위의 몇 가지 기술 중에서 XmlHttpRequest 대상 을 제외 하고 다른 모든 기술 은 웹 표준 을 바탕 으로 광범 위 하 게 사용 되 었 습 니 다.XMLHttpRequest 는 아직 W3C 에 의 해 채택 되 지 않 았 지만 이미 하나의 사실 적 인 기준 입 니 다.현재 거의 모든 주류 브 라 우 저가 지원 하고 있 기 때 문 입 니 다.ajax 원리 와 XmlHttpRequest 대상 Ajax 의 원 리 는 쉽게 말 하면 XmlHttpRequest 대상 을 통 해 서버 에 비동기 요청 을 하고 서버 에서 데 이 터 를 얻 은 다음 javascript 으로 DOM 을 조작 하여 페이지 를 업데이트 합 니 다.그 중 가장 중요 한 단 계 는 서버 에서 요청 데 이 터 를 얻 는 것 이다.이 과정 과 원 리 를 잘 알 기 위해 서 는 XML HttpRequest 에 대해 알 아야 합 니 다.XML HttpRequest 는 ajax 의 핵심 메커니즘 으로 IE5 에서 먼저 도 입 된 비동기 요청 을 지원 하 는 기술 입 니 다.쉽게 말 하면 자 바스 크 립 트 는 사용 자 를 막 지 않 고 서버 에 요청 과 처리 응답 을 할 수 있 습 니 다.리 셋 효과 가 없습니다.그래서 우 리 는 먼저 XML HttpRequest 부터 그것 의 작업 원 리 를 살 펴 보 자.우선 XML HttpRequest 라 는 대상 의 속성 을 살 펴 보 겠 습 니 다.이 속성 은 onreadystatechange 가 트리거 이벤트 의 이벤트 처리 프로그램 을 상태 변경 할 때마다 있 습 니 다.responseText 가 서버 프로 세 스에 서 데 이 터 를 되 돌려 주 는 문자열 형식 입 니 다.responseXML 이 서버 프로 세 스에 서 되 돌아 오 는 DOM 호 환 문서 데이터 대상 입 니 다.status 가 서버 에서 돌아 오 는 디지털 코드,예 를 들 어 흔히 볼 수 있 는 404(찾 을 수 없 음)와 200(준비 되 었 음)status Text 에 따 른 상태 코드 의 문자열 정보 ready State 대상 상태 값 0(초기 화 되 지 않 음)대상 이 만 들 어 졌 으 나 초기 화 되 지 않 았 습 니 다(open 방법 이 호출 되 지 않 았 음)대상 이 만 들 어 졌 습 니 다.send 방법 2(데이터 보 내기)send 방법 이 호출 되 지 않 았 습 니 다.그러나 현재 상태 및 http 헤드 미 지 의 3(데이터 전송 중)은 일부 데 이 터 를 받 았 습 니 다.응답 및 http 헤드 가 완전 하지 않 기 때문에 responseBody 와 responseText 를 통 해 일부 데 이 터 를 가 져 오 는 데 오류 가 발생 할 수 있 습 니 다.4(완료)데 이 터 를 받 았 습 니 다.이 때 responseXml 와 responseText 를 통 해 완전한 응답 데 이 터 를 가 져 올 수 있 습 니 다.ajax 의 장점 인 Ajax 가 우리 에 게 가 져 다 준 좋 은 점 은 모두 가 깊이 깨 달 았 습 니 다.여기 서 저 는 간단하게 몇 가지 만 말씀 드 리 겠 습 니 다.1.가장 큰 점 은 페이지 가 새로 고침 되 지 않 고 페이지 에서 서버 와 통신 하여 사용자 에 게 주 는 체험 이 매우 좋 습 니 다.2.비동기 방식 으로 서버 와 통신 할 때 사용자 의 조작 을 중단 하지 않 아 도 더욱 빠 른 응답 능력 을 가진다.3.예전 에 일부 서버 가 부담 한 업 무 를 클 라 이언 트 에 게 전가 하고 클 라 이언 트 의 유 휴 능력 으로 처리 하여 서버 와 대역 폭 의 부담 을 줄 이 고 공간 과 광대 역 임대 비용 을 절약 할 수 있다.또한 서버 의 부담 을 줄 이 는 것 이 원칙 입 니 다.ajax 의 원칙 은'필요 에 따라 데 이 터 를 가 져 옵 니 다'로 불필요 한 요청 과 응답 이 서버 에 미 치 는 부담 을 최대한 줄 일 수 있 습 니 다.4.표준화 되 고 광범 위 하 게 지원 되 는 기술 을 바탕 으로 플러그 인 이나 애플 릿 을 다운로드 할 필요 가 없습니다.ajax 의 단점 은 다음 과 같 습 니 다.ajax 의 결함 을 다시 한 번 말씀 드 리 겠 습 니 다.평소에 우리 가 주의 하 는 것 은 ajax 가 우리 에 게 가 져 온 장점,예 를 들 어 사용자 체험 의 향상 등 입 니 다.ajax 가 가 져 온 결함 에 대해 서 는 무시 합 니 다.아래 에 논술 한 ajax 의 결함 은 모두 선천적으로 발생 한 것 이다.1.ajax 는 백 단 추 를 제거 하 였 습 니 다.즉,브 라 우 저 후퇴 메커니즘 에 대한 파괴 입 니 다.후퇴 단 추 는 표준 웹 사이트 의 중요 한 기능 이지 만 js 와 잘 합작 할 수 없습니다.이것 은 ajax 가 가 져 온 비교적 심각 한 문제 입 니 다.사용자 들 은 종종 후퇴 를 통 해 이전 작업 을 취소 하 기 를 원 하기 때 문 입 니 다.그렇다면 이 문제 에 대해 서 는 방법 이 있 을 까?답 은 긍정 적 입 니 다.Gmail 을 사용 한 적 이 있 습 니 다.Gmail 아래 에서 사용 하 는 ajax 기술 로 이 문 제 를 해결 하 였 습 니 다.Gmail 아래 에서 뒤로 물 러 설 수 있 습 니 다.그러나 ajax 의 체 제 를 바 꿀 수 없습니다.이것 은 비교적 멍청 하지만 효과 적 인 방법 일 뿐 입 니 다.즉,사용자 가 뒤로 물 러 나 기 단 추 를 누 르 면 역사 기록 에 접근 할 때...페이지 의 변경 사항 을 숨 긴 IFRAME 를 만 들 거나 사용 합 니 다.(예 를 들 어 사용자 가 Google Maps 에서 후퇴 를 누 르 면 숨겨 진 IFRAME 에서 검색 한 다음 검색 결 과 를 Ajax 요소 에 반영 하여 프로그램 상 태 를 당시 상태 로 복원 합 니 다.)그러나 이 문 제 는 해결 할 수 있다 고 말 하지만 그 가 가 져 온 개발 원 가 는 매우 높 고 ajax 프레임 워 크 가 요구 하 는 빠 른 개발 과 배치 된다.이것 은 ajax 가 가 져 온 매우 심각 한 문제 입 니 다.2.안전 문제 기술 은 IT 기업 에 새로운 안전 위협 을 가 져 왔 다.ajax 기술 은 마치 기업 데이터 에 직접적인 통 로 를 구축 한 것 과 같다.이 때문에 개발 자 들 은 무심코 이전 보다 더 많은 데이터 와 서버 논 리 를 노출 할 수 있 습 니 다.ajax 의 논 리 는 클 라 이언 트 의 안전 스 캔 기술 을 숨 기 고 해커 가 원 격 서버 에서 새로운 공격 을 할 수 있 도록 합 니 다.그리고 ajax 도 이미 알 고 있 는 안전 약점 을 피하 기 어렵 습 니 다.예 를 들 어 크로스 사이트 걸음 공격,SQL 주입 공격 과 credentials 기반 보안 구멍 등 입 니 다.3.검색엔진 에 대한 지원 이 약 합 니 다.4.프로그램의 이상 메커니즘 을 파괴 했다.적어도 현재 로 서 는 ajax.dll,ajax pro.dll 같은 ajax 프레임 워 크 는 프로그램의 이상 체 제 를 파괴 할 수 있 습 니 다.이 문제 에 대해 저 는 개발 과정 에서 만난 적 이 있 지만 인터넷 에서 관련 소 개 를 거의 하지 않 았 습 니 다.나중에 저 는 스스로 테스트 를 했 습 니 다.각각 ajax 와 전통 적 인 form 제출 모델 로 데 이 터 를 삭제 하 는 것 은 우리 의 디 버 깅 에 큰 어려움 을 가 져 왔 습 니 다.5.또한 다른 문제 와 같이 url 과 자원 포 지 셔 닝 의 취지 에 어 긋 난다.예 를 들 어 제 가 url 주 소 를 드 리 겠 습 니 다.ajax 기술 을 사용 하면 이 url 주소 아래 에서 본 것 과 제 가 이 url 주소 에서 본 내용 이 다 를 수 있 습 니 다.이것 은 자원 포 지 셔 닝 의 취지 와 서로 어 긋 난다.6.일부 핸드 메 이 드 기기(예 를 들 어 핸드폰,PDA 등)는 아직 ajax 를 잘 지원 하지 못 합 니 다.예 를 들 어 우리 가 핸드폰 브 라 우 저 에서 ajax 기술 을 사용 한 사 이 트 를 열 때 현재 지원 하지 않 습 니 다.물론 이 문 제 는 우리 와 그다지 관계 가 없습니다.