Ajax 사용 코드 분석

Ajax 소개
Ajax 는(Asynchronous(비동기)JavaScript And Xml 의 줄 임 말)로 여 겨 집 니 다.현재 페이지 를 새로 고치 지 않 고 브 라 우 저 와 서버 의 통신 을 허용 하 는 기술 은 모두 Ajax 라 고 합 니 다.
동기 화 란 발송 자가 데 이 터 를 보 낸 후에 수신 자가 메 시 지 를 보 낸 후에 야 다음 패 킷 을 보 내 는 통신 방식 을 말한다. 
비동기 란 발송 자가 데 이 터 를 보 낸 후에 수신 자가 응답 을 보 내지 않 고 다음 패 킷 을 보 내 는 통신 방식 을 말한다.
일반적으로 웹 페이지 를 새로 고치 지 않 고 서버 와 통신 하 는 방법:
플래시 프레임 워 크

Frameset:한 프레임 워 크 를 사용 하여 웹 페이지 를 구성 하면 그 중의 한 프레임 워 크 만 업데이트 할 수 있 고 전체 페이지 를 놀 라 게 하지 않 아 도 됩 니 다

XML HttpRequest:이 대상 은 자바 스 크 립 트 의 확장 으로 웹 페이지 와 서버 를 통신 할 수 있 습 니 다.Ajax 애플 리 케 이 션 을 만 드 는 가장 좋 은 선택 입 니 다.실제로 Ajax 를 XMLHttpRequest(XHR)대상 의 대명사 로 여 긴 다

ajax 기본 사용
ajax 는 우리 의 개발 에 있어 서 반드시 사용 해 야 할 기술 입 니 다.ajax 는 비동기 적 인 자바 script 과 xml 입 니 다.그러나 지금 우 리 는 보통 json 을 사용 하여 데이터 의 상호작용 을 완성 합 니 다.ajax 의 직책 은 매우 단일 한 것 이 데이터 의 상호작용 입 니 다.데 이 터 를 보 내 고 데 이 터 를 받 는 것 이 그의 핵심 기능 이자 유일한 기능 입 니 다.
ajax 의 실현 은 XML HttpRequest 에 의존 합 니 다.기본 적 인 사용 은 다음 과 같 습 니 다.

var xhr;
window.XMLHttpRequest?xhr = new XMLHttpRequest():xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","demo!register.action?name=zt&age=23",true);
xhr.send(null);
xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){
 　　alert(JSON.parse(xhr.responseText));
　　}
}

ajax 의 직책 은 데 이 터 를 보 내 고 받 는 것 입 니 다.기본 적 인 사용 절 차 는 다음 과 같 습 니 다.
1.XML HttpRequest 대상 가 져 오기
2.데이터 보 내기
3.처리 서버 에서 되 돌아 오 는 데 이 터 를 수신
위의 절차 에 따라 비동기 요청 데 이 터 를 실현 하 는 과정 에서 먼저 xhr 대상 을 가 져 옵 니 다.현대 브 라 우 저 에서 우 리 는 직접 실례 화 를 통 해 xhr 대상 을 가 져 올 수 있 습 니 다:var xhr=new XML HttpRequest().IE5,IE6 에서 xhr 대상 을 가 져 오 려 면 ActiveXObject 를 사용 해 야 합 니 다:var xhr=new ActiveXObject("Microsoft.XML HTTP").
이때 우 리 는 xhr 대상 을 얻 었 고 그 다음은 데 이 터 를 보 내 는 것 입 니 다.xhr.open()방법 으로 데 이 터 를 보 내 는 방식 을 실 행 했 습 니 다.xhr.open()은 5 개의 인 자 를 받 을 수 있 습 니 다.우 리 는 항상 앞의 세 개 를 사용 합 니 다.

xhr.open(arg1,arg2,arg3)

arg 1 요청 데 이 터 를 표시 하 는 방식 은 일반적으로 get 또는 post 입 니 다.
arg 2 요청 한 서버 주소 표시
arg 3 는 이번 요청 이 동기 화 인지 비동기 인지 표시 합 니 다.ajax 의 두 드 러 진 특징 은 비동기 입 니 다.그래서 저 희 는 보통 비동기 방식 으로 세 번 째 매개 변 수 를 true 로 설정 합 니 다.(true 는 비동기 요청 false 를 표시 하여 동기 화 요청 을 합 니 다)
xhr.open()방법 은 요청 을 준비 할 뿐 open 을 호출 한 후에 서버 와 통신 하지 않 고 send()함 수 를 호출 한 후에 야 서버 와 통신 을 시작 합 니 다.send()함수 의 인 자 는 요청 체 로 서버 에 보 냅 니 다.만약 에 저희 가 open()함수 에서 요청 하 는 방식 을 get 으로 지정 하면 보통 send()를 xhr.send(null)로 설정 합 니 다.요청 체 를 통 해 데 이 터 를 보 내 려 면 open()함수 의 요청 방식 을 post 로 설정 하고 저희 가 보 내야 할 데 이 터 를 send()함수 의 인자 로 설정 해 야 합 니 다.xhr.send(param)는 send()함 수 를 호출 한 후에 서버 와 의 통신 이 시 작 됩 니 다.
xhr 에 대한 모든 설정 은 send()함수 전에 설정 해 야 합 니 다.

 xhr.open(...);
 xhr.setRequestHeader(...);
 xhr.overrideMimeType(...);
 xhr.onreadystatechange = function(){...};
 xhr.send(...);

 그러나 xhr.onreadystatechange 는 하나의 이벤트 이기 때문에 send()다음 에 놓 아 도 실행 할 수 있 습 니 다.가 독성 때문에 저 희 는 보통 xhr 에 대한 설정 을 send()함수 앞 에 놓 습 니 다.
send()이후 xhr.ready State 와 xhr.status 를 통 해 이번 요청 의 상 태 를 모니터링 할 수 있 습 니 다.xhr.ready State==4&&xhr.status==200 을 만족 시 키 면 이번 요청 이 성공 합 니 다.
요청 이 성공 할 때 서버 가 되 돌아 오 는 데 이 터 를 xhr.responseText 를 통 해 가 져 올 수 있 습 니 다.xhr.responseText 는 문자열 입 니 다.

ajax 상용 API
위의 요청 과정 은 가장 기본 적 인 요청 과정 입 니 다.xhr 대상 은 xhr.abort(),xhr.setRequestHeader(),xhr.overrideMime Type()을 자주 사용 합 니 다.
xhr.abort():요청 을 종료 하고 직접 호출 하면 파 라 메 터 를 설정 하지 않 아 도 됩 니 다.

xhr.abort()

xhr.setRequestHeader():보 낸 요청 헤더 설정:

xhr.setRequestHeader("Content-Type","application/json; charset=utf-8")

첫 번 째 매개 변 수 는 설정 할 header 를 표시 하고 두 번 째 매개 변 수 는 설정 할 header 의 값 을 표시 합 니 다.xhr.setRequestHeader()는 xhr.open()과 xhr.send()사이 에 있어 야 합 니 다.그렇지 않 으 면 이상 을 던 질 수 있 습 니 다.또한 xhr.setRequestHeader()의 첫 번 째 매개 변 수 는 대소 문자 에 민감 하지 않 습 니 다.알파벳 이 맞 으 면 설정 할 수 있 습 니 다.그러나 가 독성 때문에 정확 한 형식 으로 설정 해 야 합 니 다.
xhr.overrideMimeType():응답 헤드 를 다시 쓰 는 Content-Type:

xhr.overrideMimeType('text/plain; charset=utf-8')

 xhr.overrideMime Type()역시 xhr.send()이전에 설정 해 야 합 니 다.
JSON.parse()와 JSON.stringify()사용
JSON.parse()는 대상 을 문자열 로 변환 하고 JSON.stringify()는 문자열 을 대상 으로 변환 합 니 다.ajax 를 이용 하여 데이터 인 터 랙 션 을 하 는 과정 에서 되 돌아 오 는 데 이 터 는 대부분 JSON 형식의 문자열 입 니 다.서버 가 데 이 터 를 되 돌려 주면 JSON.parse()를 이용 하여 되 돌아 오 는 데 이 터 를 분석 해 야 합 니 다(xhr.responseText 는 서버 에 되 돌아 오 는 데이터 입 니 다).

xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){
 var data = JSON.parse(xhr.responseText);
　　}
}

 post 방식 으로 데 이 터 를 보 내 는 과정 에서 파일 업로드 가 아 닌 일반적인 경우 에 도 JSON 데 이 터 를 전송 합 니 다.배경 으로 성공 적 으로 보 내 려 면 JSON.stringify()를 사용 하여 JSON 대상 을 문자열 로 변환 해 야 합 니 다.또한 Content-type 은 application/json 으로 설정 해 야 합 니 다.

var sendData = {name:"zt",age:23};
...
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
xhr.send(JSON.stringify(sendData));

또한 JSON.parse()와 JSON.stringify()를 이용 하여 한 대상 의 깊 은 복사 기능 을 실현 할 수 있 습 니 다.

var sendData = {name:"zt",age:23};
var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax 기본 사용
 JQ 를 편리 하 게 사용 하기 위해 ajax 를 봉 하여 우리 의 사용 을 편리 하 게 해 주 었 습 니 다.

$.ajax({
 type:"post",//    
 url:"url",//    
 data:"...",//         
 contentType:"...",//           data   json         application/json
 success:function(data){...},//         data            
 error:function(){...}//         
 });

또는:

$.ajax({
 type:"post",
 url:"url",
 data:"...",
 contentType:"...",
 })
 .done(function(data){...})
 .fail(function(){...});

리 셋 함수 의 data 는 서버 가 되 돌려 주 는 데이터 의 프 록 시 입 니 다.직접 사용 하면 됩 니 다.
우리 의 개발 JQ 를 간소화 하기 위해$.ajaxSetup(),$.()ajaxStart(),$().ajaxstop(),$().ajaxComplete(),$().ajaxError(),$().ajaxSuccess(),$().ajaxSend()를 포함 한 전역 설정 함 수 를 제공 합 니 다.
$.ajaxsetup()은 기본 인 자 를 설정 하 는 데 사 용 됩 니 다.예 를 들 어:

$.ajaxSetup({
 type:"post",
 contentType:"application/json; charset=utf-8"
 });

우 리 는$.ajax 를 사용 할 때 직접 이렇게 설정 할 수 있 습 니 다.

 $.ajax({
 url:"",
 success:function(){...},
 error:function(){...}
 })

최종 등가:

 $.ajax({
 type:"post",
 contentType:"application/json; charset=utf-8",
 url:"",
 success:function(){...},
 error:function(){...}
 })

$().ajaxStart(),$().ajaxStop(),$().ajaxComplete(),$().ajaxError(),$().ajaxSuccess(),$().ajaxSend()는 전역 리 셋 함 수 를 설정 하 는 데 사 용 됩 니 다.예 를 들 어 우 리 는 데 이 터 를 제출 할 때 여러 번 제출 하 는 것 을 방지 하기 위해 서 요청 을 보 낼 때 loading 마스크 가 데이터 전송 이 끝 난 후에 마스크 를 취소 해 야 합 니 다.만약 에 ajax 요청 이 있 을 때마다 우 리 는 한 번 설정 하 는 것 이 번 거 로 울 것 입 니 다.이때 우 리 는 전역 리 셋 함수 로 우리 의 작업 을 간소화 할 수 있 습 니 다.
전역 이 벤트 를 이용 하여 요청 이 시 작 될 때 마스크 를 만 듭 니 다.요청 이 완료 되 었 을 때 마스크 를 취소 합 니 다.

$(document).ajaxStart(function(){
 loadingMask.show();
 });
 $(document).ajaxComplete(function(){
 loadingMask.hide();
 });

위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Ajax 의 사용 코드 해석 입 니 다.여러분 께 도움 이 되 셨 으 면 합 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!