ajax 작업 원리 상세 설명

Ajax 의 원 리 는 자 바스 크 립 트 방식 을 통 해 프론트 데 이 터 를 xmlhttp 대상 을 통 해 백 엔 드 로 전달 하고 백 엔 드 는 요청 을 받 은 후에 필요 한 결 과 를 프론트 로 전송 하면 페이지 가 필요 없 는 리 턴 을 실현 할 수 있 습 니 다. 페이지 는 데이터 가 왕복 전달 되 고 페이지 에서 리 셋 되 지 않 습 니 다.       Ajax 의 원 리 는 쉽게 말 하면 XmlHttpRequest 대상 을 통 해 서버 에 비동기 요청 을 하고 서버 에서 데 이 터 를 얻 은 다음 javascript 으로 DOM 을 조작 하여 페이지 를 업데이트 하 는 것 입 니 다.  그 중 가장 중요 한 단 계 는 서버 에서 요청 데 이 터 를 얻 는 것 이다.이 과정 과 원 리 를 잘 알 기 위해 서 는 XML HttpRequest 에 대해 알 아야 합 니 다. 
     이 를 통 해 알 수 있 듯 이 XML HttpRequest 대상 은 서버 에 요청 하 는 데 사 용 됩 니 다. 그 역할 도 여기에 국한 되 어 있 습 니 다. 그러나 그 역할 은 전체 ajax 가 실현 하 는 관건 입 니 다. 우 리 는 서버 단 을 데이터 인터페이스 로 볼 수 있 습 니 다. 그것 은 순수한 텍스트 흐름 으로 돌아 갈 수 있 습 니 다. 물론 이 텍스트 흐름 은 XML 형식 일 수도 있 고 Html 일 수도 있 으 며 자바 script 코드 일 수도 있 습 니 다.문자열 일 수도 있 습 니 다.이때 XML HttpRequest 는 서버 측 에 이 페이지 를 요청 합 니 다. 서버 측 에서 텍스트 의 결 과 를 페이지 에 기록 합 니 다. 이것 은 일반적인 웹 개발 프로 세 스 와 같 습 니 다. 다른 것 은 클 라 이언 트 가 비동기 적 으로 이 결 과 를 가 져 온 후에 페이지 에 직접 표시 하 는 것 이 아니 라 자바 script 에서 처리 한 다음 에 페이지 에 표시 합 니 다.
XML HttpRequest 는 ajax 의 핵심 메커니즘 으로 IE5 에서 먼저 도 입 된 비동기 요청 을 지원 하 는 기술 입 니 다.쉽게 말 하면 자 바스 크 립 트 는 사용 자 를 막 지 않 고 서버 에 요청 과 처리 응답 을 할 수 있 습 니 다.리 셋 효과 가 없습니다.
그래서 우 리 는 먼저 XML HttpRequest 부터 그것 의 작업 원 리 를 살 펴 보 자.
  우선 XML HttpRequest 라 는 대상 의 속성 을 살 펴 보 겠 습 니 다.
  그것 의 속성 은:
  　　onreadystatechange  트리거 이벤트 의 이벤트 처리 프로그램 을 상태 가 바 뀔 때마다
  　　responseText     서버 프로 세 스에 서 데 이 터 를 되 돌려 주 는 문자열 형식 입 니 다.
  　　responseXML    서버 프로 세 스에 서 되 돌아 오 는 DOM 호 환 문서 데이터 대상 입 니 다.
  　　status           서버 에서 돌아 오 는 디지털 코드, 예 를 들 어 흔히 볼 수 있 는 404 (찾 을 수 없 음) 와 200 (준비 되 었 음)
  　　status Text       상태 코드 에 따 른 문자열 정보
  　　readyState       대상 상태 값
0 (초기 화 되 지 않 음) 대상 이 만 들 어 졌 지만 초기 화 되 지 않 았 습 니 다 (open 방법 이 호출 되 지 않 았 습 니 다)
1 (초기 화) 대상 이 생 성 되 었 습 니 다. send 방법 이 호출 되 지 않 았 습 니 다.
2 (데 이 터 를 보 내 는) send 방법 이 호출 되 었 으 나 현재 상태 및 http 헤드 는 알 수 없습니다.
3 (데이터 전송 중) 응답 및 http 헤더 가 불완전 하기 때문에 일부 데 이 터 를 받 았 습 니 다. 이 때 responseBody 와 responseText 를 통 해 일부 데 이 터 를 가 져 오 는 중 오류 가 발생 할 수 있 습 니 다.
4 (완성) 데이터 수신 이 완료 되 었 습 니 다. 이 때 responseXml 와 responseText 를 통 해 완전한 응답 데 이 터 를 얻 을 수 있 습 니 다.
단, 브 라 우 저 마다 차이 가 있 기 때문에 XML HttpRequest 대상 을 만 드 는 데 는 다른 방법 이 필요 할 수 있 습 니 다.이 차 이 는 주로 IE 와 다른 브 라 우 저 사이 에 나타난다.다음은 비교적 표준적 인 XML HttpRequest 대상 을 만 드 는 방법 입 니 다.

function CreateXmlHttp() {
   

    // IE     XmlHttpRequest  
    if (window.XmlHttpRequest) {
   
        xmlhttp = new XmlHttpRequest();
    }

    //IE     XmlHttpRequest  
    if (window.ActiveXObject) {
   
        try {
   
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
   
            try {
   
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }
}

function Ustbwuyi() {
   

    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
   
        alert("  xmlhttp    ！");
        return false;
    }

    xmlhttp.open("POST", url, false);

    xmlhttp.onreadystatechange = function () {
   
        if (xmlhttp.readyState == 4) {
   
            document.getElementById("user1").innerHTML = "      ...";
            if (xmlhttp.status == 200) {
   
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

위 에서 보 듯 이 함 수 는 먼저 XML HttpRequest 의 전체 상 태 를 검사 하고 데이터 가 전송 되 었 음 을 보증 합 니 다 (ready Status = 4).그리고 서버 설정 에 따라 요청 상 태 를 물 어보 고 모든 것 이 준비 되 었 다 면 다음 작업 을 수행 하 십시오.
XmlHttpRequest 의 두 가지 방법, open 과 send 에 대해 open 방법 이 지정 되 었 습 니 다.
a. 서버 에 데 이 터 를 제출 하 는 형식, 즉 post 또는 get 입 니 다.
b. 요청 한 url 주소 와 전달 하 는 매개 변수 입 니 다.
      c. 전송 방식, false 는 동기 화, true 는 비동기 입 니 다.기본 값 은 true 입 니 다.비동기 통신 방식 (true) 이 라면 클 라 이언 트 는 서버 의 응답 을 기다 리 지 않 습 니 다.동기 화 방식 (false) 이 라면 클 라 이언 트 는 서버 가 메 시 지 를 되 돌려 준 후에 야 다른 작업 을 수행 해 야 합 니 다.실제 수요 에 따라 동기 화 방식 을 지정 해 야 합 니 다. 일부 페이지 에 서 는 여러 개의 요청 을 할 수 있 습 니 다. 심지어 조직 적 으로 대형 대규모 강도 높 은 request 가 있 을 수 있 습 니 다. 그 다음 하 나 는 앞의 것 을 덮어 쓸 수 있 습 니 다. 이 럴 때 동기 화 방식 을 지정 해 야 합 니 다.
    Send 방법 은 요청 을 보 내 는 데 사 용 됩 니 다.
 
XMLHttpRequest 의 작업 절 차 를 알 게 되 었 습 니 다. XMLHttpRequest 는 서버 에 요청 을 보 내 는 데 사 용 됩 니 다. 그 역할 도 이에 국한 되 지만 전체 ajax 가 실현 하 는 관건 입 니 다. ajax 는 두 가지 과정 이 아니 라 요청 과 응답 요청 을 보 내 는 것 이기 때 문 입 니 다.그리고 이것 은 완전히 클 라 이언 트 의 기술 이다.XML HttpRequest 는 서버 와 클 라 이언 트 의 통신 문 제 를 처리 하기 때문에 이렇게 중요 합 니 다.
이제 우 리 는 ajax 의 원리 에 대해 대충 알 수 있 을 것 이다.우 리 는 서버 쪽 을 데이터 인터페이스 로 볼 수 있 습 니 다. 그것 은 순수한 텍스트 흐름 을 되 돌려 줍 니 다. 물론 이 텍스트 흐름 은 XML 형식 일 수도 있 고 Html 일 수도 있 으 며 자바 script 코드 일 수도 있 고 문자열 일 수도 있 습 니 다.이때 XML HttpRequest 는 서버 측 에 이 페이지 를 요청 합 니 다. 서버 측 에서 텍스트 의 결 과 를 페이지 에 기록 합 니 다. 이것 은 일반적인 웹 개발 프로 세 스 와 같 습 니 다. 다른 것 은 클 라 이언 트 가 비동기 적 으로 이 결 과 를 가 져 온 후에 페이지 에 직접 표시 하 는 것 이 아니 라 자바 script 에서 처리 한 다음 에 페이지 에 표시 합 니 다.현재 유행 하 는 많은 ajax 컨트롤, 예 를 들 어 magicajax 등 은 DataSet 등 다른 데이터 형식 으로 돌아 갈 수 있 습 니 다. 다만 이 과정 을 봉 인 했 을 뿐 본질 적 으로 큰 차이 가 없습니다.
장점:
Ajax 가 우리 에 게 가 져 다 준 좋 은 점 은 모두 가 깊이 깨 달 았 습 니 다. 여기 서 저 는 간단하게 몇 가지 만 말씀 드 리 겠 습 니 다.
    1. 가장 큰 점 은 페이지 가 새로 고침 되 지 않 고 페이지 에서 서버 와 통신 하여 사용자 에 게 주 는 체험 이 매우 좋다 는 것 입 니 다.
　  2. 비동기 방식 으로 서버 와 통신 할 때 사용자 의 조작 을 중단 하지 않 아 도 더욱 빠 른 응답 능력 을 가진다.
　  3. 예전 에 일부 서버 가 부담 한 업 무 를 클 라 이언 트 에 게 전가 하고 클 라 이언 트 의 유 휴 능력 으로 처리 하여 서버 와 대역 폭 의 부담 을 줄 이 고 공간 과 광대 역 임대 비용 을 절약 할 수 있다.또한 서버 의 부담 을 줄 이 는 것 이 원칙 입 니 다. ajax 의 원칙 은 '필요 에 따라 데 이 터 를 가 져 옵 니 다' 로 불필요 한 요청 과 응답 이 서버 에 미 치 는 부담 을 최대한 줄 일 수 있 습 니 다.
    4. 표준화 되 고 광범 위 하 게 지원 되 는 기술 을 바탕 으로 플러그 인 이나 애플 릿 을 다운로드 할 필요 가 없습니다.단점:
    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 기술 을 사용 한 사 이 트 를 열 때 현재 지원 하지 않 습 니 다. 물론 이 문 제 는 우리 와 그다지 관계 가 없습니다.