Ajax 학습 노트 정리

Ajax:Asynchronous JavaScript and Xml,비동기 js 스 크 립 트 와 xml 는 페이지 부분 적 인 비동기 리 셋 을 실현 하 는 데 자주 사용 되 며 사용자 체험 을 향상 시 키 는 데 큰 도움 이 됩 니 다.Xml 는 다 중 언어 에서 우세 하지만 Ajax 기술 은 Xml 가 아 닌 JSon 대상 을 많이 사용 합 니 다.
Ajax 역사...이해 성 지식
Ajax 는 웹 전단 개발 기술 에 속 하 며 자 바스 크 립 트 와 매우 밀접 한 관 계 를 가진다.Ajax 는 비동기 통신 무 갱신 을 실현 하 는 기술 로 이 기술 은 여러 가지 실현 방식 이 있 을 수 있다.브 라 우 저의 원조 네트워크(NetScape)회 사 는 최초 로 라 이브 스 크 립 트 스 크 립 트 언어 를 발명 하여 웹 요소 의 표현 형식 을 풍부하게 하 였 다.웹 페이지 가 동태 적 인 효 과 를 나 타 낼 수 있 도록 하 였 습 니 다.그 후에 역대 개편 과 업그레이드 후에 자 바스 크 립 트 언어 가 탄생 하 였 습 니 다.같은 시기 에 마이크로소프트(Microsoft)회사 도 인터넷 의 전망 을 보고 인터넷 업계 에 진출 하여 JScript 언어 를 출시 하 였 습 니 다.안 타 깝 게 도 자 바스 크 립 트 가 성숙 하지 않 았 습 니 다.발전 이 지체 되 었 다.결국 마이크로소프트 의 인터넷 에 대한 결심 은 MS 가 NS 에 대한 긴 우여곡절 의 인수 과정 을 촉진 시 켰 다.
여기 서 동적 HTML 언어(Dynamic Hyper Text Markup Language)는 자 바스 크 립 트 를 Dom 트 리 의 요소 노드 에 놓 고 요소 에 동적 전시 행 위 를 제공 하 는 것 입 니 다.
Ajax 코드 사고방식
요청 대상 만 들 기
요청 대상 을 설정 하고 서버 에 보 내기
서버 응답 요청 대상
(1)서버 와 통신 할 대상 으로 요청 대상 을 만 듭 니 다.

function createRequest(){
try{
var request=new XMLHttpRequest();
}catch(tryMS){
try{
request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(otherMS){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request=null;
}
}
}
return request;
}

주:ActiveXObject 는 Microsoft 의 특정한 프로 그래 밍 대상 으로 서로 다른 버 전 은 서로 다른 브 라 우 저 에서 각각 지원 합 니 다.XML HTTP 는 자바 script 등 스 크 립 트 언어 에서 http 프로 토 콜 을 통 해 XML 및 기타 데 이 터 를 전송 하거나 받 을 수 있 는 API 입 니 다.
요청 대상 request 를 획득 하면 다음 과 같은 속성 이 있 습 니 다:

onreadystatechange,ready State,response Text,status 를 자주 사용 합 니 다.

(2)요청 대상 을 설정 하여 서버 에 보 내기:

var request=createRequest();
request.open("GET",url,true);
request.onreadystatechange=showResponse;
request.send(null);

open,send 방법 은 모두 request 대상 의 원형 XML HttpRequest 에서 왔 습 니 다.열기proto__:XML HttpRequest 에서 볼 수 있 습 니 다:

open()방법 은 세 가지 매개 변수 가 있 습 니 다.첫 번 째 는 요청 을 보 내 는 방법(GET 또는 POST,구별 후 정리)입 니 다.두 번 째 는 서버 엔 드 스 크 립 트 를 규정 하 는 url(이 파일 은 모든 종류의 파일 일 수 있 습 니 다)입 니 다.세 번 째 매개 변 수 는 비동기 처리 여 부 를 규정 합 니 다(기본 트 루 비동기).
send()방법 은 서버 로 요청 합 니 다.
여기 서 request.onreadystatechange=showResponse 를 알 수 있 습 니 다.이 코드 가 있 는 위치 가 다 르 면 콘 솔 출력 에 대한 응답 내용 이 다 릅 니 다.생각해 보 니 리 턴 함수 가 작업 대기 열 에 가입 하 는 시기 에 따라 출력 이 다 를 것 입 니 다.예 를 들 어 지금 이 위치,
request.onreadystatechange=showResponse;open 후 send 전에 코드 가 request.onreadystatechange=show Response 로 분 석 됩 니 다.이때 ready States=1(요청 이 서버 와 연결 되 었 습 니 다)이후 ready States 가 1 에서 2 로 바 뀌 었 을 때 리 셋 함수 showResponse 가 작업 대기 열 에 가입 하여 실 행 될 때 까지 기 다 렸 습 니 다.ready State 는 2 에서 3 으로 바 뀌 었 고 리 셋 함수 showResponse 는 두 번 째 로 작업 대기 열 에 가입 하 였 습 니 다.ready State 는 3 에서 4 로 바 뀌 었 습 니 다.리 셋 함수 가 다시 대기 열 에 가입 하 였 습 니 다.따라서 메 인 코드 가 실 행 된 후에 콘 솔 은'요청 이 발송 되 었 고 서버 가 받 았 으 며 send 이후','요청 이 처리 되 고 있 습 니 다','요청 이 완료 되 었 습 니 다'를 출력 할 것 이 라 고 추측 합 니 다.확실히 이렇다.

(3)서버 응답 요청 대상,js 는 응답 내용 을 처리 할 수 있 습 니 다.

function showResponse(){
if(request.readyState==0){
console.log('      ，  open  ');
}else if(request.readyState==1){
console.log('     ，        ，open  send  ');
}else if(request.readyState==2){
console.log('     ，      ，send  ');
}else if(request.readyState==3){
console.log('      ');
}else if(request.readyState==4){
console.log('     ');
if(request.status==200){
//  request.responseText;
}
}
}

위의 코드 는 ready State 변 화 를 추적 하기 위 한 것 일 뿐 실제 프로젝트 코드 는 이렇게 많 지 않다.다음은 실제 주요 코드 입 니 다.

function showResponse(){
if(request.readyState==4){
if(request.status==200){
//  request.responseText;
}
}
}

ps:Ajax 무슨 문제 해결
클 라 이언 트 가 서버 에 페이지 를 요청 할 때 서버 는 먼저 동적 으로 페이지 를 계산 하고 생 성 한 다음 에 클 라 이언 트 에 게 보 냅 니 다.클 라 이언 트 브 라 우 저 순서 로 페이지 를 컴 파일 하고 보 여 줍 니 다.
Ajax 가 없 을 때:페이지 에 사용자 인증 컨트롤 이 있다 면 클 라 이언 트 브 라 우 저 에서 사용자 인증 컨트롤 을 표시 할 때 서버 의 검증 결 과 를 기다 리 고 결 과 를 받 은 후에 야 페이지 요 소 를 계속 표시 할 수 있 습 니 다.이 검증 과정 은 데이터 베 이 스 를 읽 는 등 작업 을 해 야 합 니 다.이것 이 바로 동기 화 방식 입 니 다.이런 방식 은 웹 페이지 가 보 여 주 는 가사 상 태 를 초래 할 수 있 습 니 다.
Ajax 를 사용 한 후:같은 인증 컨트롤 입 니 다.클 라 이언 트 가 인증 요청 을 제출 한 후에 다른 요 소 를 계속 보 여 줍 니 다.검증 결 과 를 얻 은 후에 자바 script 은 클 라 이언 트 가 메모리 에 있 는 DOM 대상 을 수정 한 후에 사용자 에 게 보 냅 니 다(주의:여 기 는 메모리 에 있 는 DOM 대상 일 뿐 클 라 이언 트 가 받 은 페이지 파일 은 수정 되 지 않 았 습 니 다).이렇게 비동기 방식 을 사용 합 니 다.가사 상태 가 나타 나 지 않 을 뿐만 아니 라 클 라 이언 트 도 서버 가 결 과 를 되 돌려 주 기 를 기다 리 는 시간 을 절약 했다.