Ajax 원리 실현 과정 에 대해 이야기 하 다.

1.AJAX 란 무엇 인가?
AJAX 는'Asynchronous JavaScript and XML'(비동기 JavaScript 와 XML)이 라 고 불 리 며 인 터 랙 티 브 웹 애플 리 케 이 션 을 만 드 는 웹 개발 기술 이다.사용:
XHTML+CSS 를 사용 하여 표준화 표시 하기;
XML 과 XSLT 를 사용 하여 데이터 교환 및 관련 작업 을 진행 합 니 다.
XML HttpRequest 대상 을 사용 하여 웹 서버 와 비동기 데이터 통신 하기;
자 바스 크 립 트 로 Document Object 모델 을 조작 하여 동적 디 스 플레이 와 상호작용 하기;
자 바스 크 립 트 를 사용 하여 모든 데 이 터 를 연결 하고 처리 합 니 다.
2.AJAX 의 작업 원리
Ajax 의 작업 원 리 는 사용자 와 서버 사이 에 중간 층(AJAX 엔진)을 추가 하여 사용자 작업 과 서버 응답 을 비동기 화 하 는 것 과 같다.모든 사용자 요청 이 서버 에 제출 되 는 것 은 아 닙 니 다.예 를 들 어 데이터 검증 과 데이터 처리 등 은 Ajax 엔진 에 직접 맡 기 고 서버 에서 새로운 데 이 터 를 읽 어야 하 는 지 확인 할 때 만 Ajax 엔진 이 서버 에 대신 요청 합 니 다.
 Ajax:Asynchronous javascript and xml 은 클 라 이언 트 와 서버 가 데이터 교류 과정 을 실현 합 니 다.기술 을 사용 하 는 장점 은 페이지 리 셋 을 하지 않 고 페이지 에서 데 이 터 를 전송 하 기 를 기다 리 는 동시에 다른 조작 을 할 수 있다 는 것 이다.
이것 이 바로 비동기 호출 의 좋 은 표현 이다.우선 비동기 와 동기 화의 개념 이 무엇 인지 알 아야 한다.
   예 를 들 어,예 를 들 어 네가 도서관 에 가서 어떤 책 을 빌 렸 는데,애석 하 게 도 도서관 이라는 책 이 다 빌 렸 다.이 때 는 두 가지 방법 을 채택 할 수 있다.
첫 번 째 방법:도서관 에서 누군가가 책 을 돌려 줄 때 까지 기 다 렸 다가 밥 을 먹고 잔다.
두 번 째 방법:도서관 관리자 에 게 직접 약속 하고 책 을 돌려 주 는 사람 이 있 으 면 직접 알려 드 리 겠 습 니 다.뭐 공부 해요?그때 알려 줄 게.
첫 번 째 방법 은 동기 화 된 표현 으로 다른 사람 이 책 을 돌려 줄 때 까지 기 다 려 야 다른 일 을 하고 죽 을 때 까지 기 다 려 야 한 다 는 것 이다.
두 번 째 방법 은 비동기 적 인 표현 으로 시간 을 지체 하지 않 고 시간 을 합 리 적 으로 이용 하여 효율 적 으로 일 하 는 것 이다.
이런 상황 에 직면 하면 당신 은 그런 방법 을 채택 할 수 있 습 니까?
첫 번 째 를 선택 하 라.하하,너무 집착 한 다 는 뜻 이다.두 번 째 를 선택 하 는 것 은 유연 하고 융통성 이 있 으 며 자신의 인생 을 합 리 적 으로 안배 하 는 것 을 의미한다.니 가 알 아서 해.
  그럼 Ajax 는 어떻게 브 라 우 저 에서 Http 요청 을 서버 로 보 냅 니까?
  중요 한 대상 XMLHttpRequest 를 사용 해 야 합 니 다.
  그럼 우선 XML HttpRequest 대상 의 속성 과 방법 을 알 아 보 세 요.
  주요 속성:
ready State 속성 은 다섯 개의 상태 값 이 있 습 니 다.
0:uninitialized 입 니 다.초기 화 되 지 않 았 습 니 다.XML HttpRequest 대상 을 만 들 었 지만 초기 화 되 지 않 았 습 니 다.
1:loading 입 니 다.send for request but not called.보 낼 준비 가 되 어 있 습 니 다.
2:loaded,send called,headers and status are available.보 냈 지만 아직 응답 을 받 지 못 했 습 니 다.
3:interactive,downloading response,but responseText only partial set 입 니 다.응답 을 받 고 있 지만 아직 완전 하지 않 습 니 다.
4:completed,finish downloading 입 니 다.응답 을 받 았 습 니 다.
responseText:서버 가 되 돌려 주 는 응답 텍스트 입 니 다.ready State>=3 일 때 만 값 이 있 습 니 다.ready State 의 상태 값 에 따라 ready State=3 일 때 돌아 오 는 응답 텍스트 가 완전 하지 않 습 니 다.ready State=4 만 완전히 돌아 와 야 모든 응답 텍스트 를 받 아들 일 수 있 습 니 다.
responseXML：response  as Dom Document object。응답 정 보 는 xml 로 Dom 대상 으로 해석 할 수 있 습 니 다.
status:서버 의 Http 상태 코드 가 200 이면 OK,404 로 찾 을 수 없 음 을 나 타 냅 니 다.
status Text:서버 http 상태 코드 의 텍스트 입 니 다.예 를 들 면 OK,Not Found.
  주요 한 방법:
open(method,url,boolean):XML HttpRequest 대상 을 엽 니 다.그 중에서 method 방법 은 get,post,delete,put 가 있 습 니 다.데 이 터 를 찾 으 면 서버 에서 일정한 데 이 터 를 얻 으 면 get 을 사용 합 니 다.서버 에 직접 제출 하고 일정한 데 이 터 를 업데이트 하면 post 를 사용 합 니 다.url 은 자원 을 요청 하 는 주소 입 니 다.세 번 째 매개 변 수 는 비동기 사용 여 부 를 표시 합 니 다.기본 적 인 상황 은 true 입 니 다.Ajax 의 특징 은 비동기 전송 이기 때 문 입 니 다.동기 화 를 사용 하면 false.비동기 와 동기 화 는 이미 예 를 들 었 다.
send(body):Ajax 엔진 을 보 내 Ajax 엔진 을 작 동 하도록 요청 합 니 다.그 중에서 보 낸 내용 은 필요 한 매개 변수 일 수 있 습 니 다.매개 변수 가 없 으 면 직접 send(null)
  그럼 Ajax 기술 은 어떻게 사용 합 니까?
우선,클 라 이언 트 이벤트 가 Ajax 이 벤트 를 촉발 합 니 다.
그리고 xmlHttpRequest 대상 을 만 듭 니 다.브 라 우 저 에 따라 만 든 xmlHttpRequest 대상 이 다 릅 니 다.open 호출,send 로 Ajax 엔진 에 요청 을 보 냅 니 다.
마지막 으로 실행 이 끝 난 후에 결 과 를 클 라 이언 트 에 게 되 돌려 줍 니 다.
  실행 절 차 는 다음 과 같 습 니 다:\
 
테스트 코드 는 다음 과 같 습 니 다:
     xmlHttpRequest 대상 만 들 기:

function createXMLHttpRequest() {
//         ie, ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
 }
         ：  
   function validate(field){
   if(trim(field.value).length!=0)
   {
 //  XMLHttpRequest
 createXMLHttpRequest() ;
 var url="user_validate.jsp?userId=" + trim(field.value)+"&timestampt="+new Date().getTime();
 // alert(url);
 xmlHttp.open("GET", url, true);
 //    。         ，  。
 xmlHttp.onreadystatechange=callback ;
 xmlHttp.send(null);//      Ajax  
 } else{ document.getElementById("userIdSpan").innerHTML = ""; }  
 }

결과 반환 작업:

function callback(){
 {  
 alert(xmlHttp.readyState);
 if(xmlHttp.readyState==4){ //Ajax     
 if(xmlHttp.status==200){ //http    
 //alert(xmlHttp.responseText);
 document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
 }else
   {
    alert("    ，   ="+xmlHttp.status);
   }    
 }
 }

주의:
      onready State Change 이벤트,ready State 상태 값 이 바 뀌 면 이 이 벤트 를 촉발 합 니 다.
      그 중에서 xmlHttpRequest 가 http 요청 을 제출 하 는 과정 에서 ready State 는 다섯 개의 상태 값(0,1,2,3,4)을 거 쳤 기 때문에 callback 함수 중의 alert(xmlHttp.ready State)는 1,2,3,4 를 계속 출력 합 니 다.이 중 0 상 태 는 출력 되 지 않 습 니 다.0 상태 일 때 이 사건 을 실행 하지 않 기 때 문 입 니 다.
PS:당시 eclipse 기본 웹 브 라 우 저 에서 출력 된 ready State 상태 순 서 는 1,3,4,2 였 습 니 다.당시 에는 상태 치 의 미 를 분석 한 결과 1,2,3,4 로 나 타 났 다.나중에 한참 을 고생 한 후에 야 브 라 우 저의 문제 라 는 것 을 알 게 되 었 다.브 라 우 저 마다 실행 결과 가 다 릅 니 다.IE 브 라 우 저 를 사용 하여 테스트 한 결과 1,2,3,4 가 나 왔 습 니 다.하하,정말 생각 지도 못 한 것 만 있 고,찾 지 못 한 것 은 없다.