Ajax 튜 토리 얼 인 스 턴 스 상세 설명

AJAX 가 뭐야?
AJAX=Asynchronous JavaScript and XML(비동기 JavaScript 와 XML).
AJAX 는 새로운 프로 그래 밍 언어 가 아니 라 기 존 표준 을 사용 하 는 새로운 방법 이다.
AJAX 는 서버 와 데 이 터 를 교환 하고 일부 웹 페이지 를 업데이트 하 는 아 트 로,전체 페이지 를 다시 불 러 오지 않 는 한(AJAX 는 빠 른 동적 웹 페이지 를 만 드 는 데 사용 되 는 기술)이다.
배경 에서 서버 와 소량의 데이터 교환 을 통 해 AJAX 는 웹 페이지 를 비동기 로 업데이트 할 수 있다.웹 페이지 전 체 를 다시 불 러 오지 않 고 웹 페이지 의 일부분 을 업데이트 할 수 있다 는 뜻 이다.
전통 적 인 웹 페이지(AJAX 를 사용 하지 않 음)는 콘 텐 츠 를 업데이트 하려 면 전체 웹 페이지 를 다시 불 러 와 야 한다.
XML HttpRequest 대상
Ajax 의 핵심 은 JavaScript 대상 XmlHttpRequest 입 니 다.

<script type="text/javascript">
function createXHR(){
var xhr = null;
try {
// Firefox, Opera .+, Safari，IE+
xhr = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer 
try {
xhr = new ActiveXObject("Msxml.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xhr = null;
}
}
}
return xhr;
}
</script> 

XML HttpRequest 대상 용법
XML HttpRequest 대상 은 두 가지 중요 한 방법 이 있 습 니 다.open 과 send.

XML HttpRequest 대상 을 사용 할 때 호출 할 첫 번 째 방법 은 open 방법 입 니 다.호출 방식:XML HttpRequest.open("get","default.aspx",true);이 코드 는 default.aspx 페이지 에 get 요청 을 보 냅 니 다.이 코드 에 대해 서 는 세 가지 주의 가 필요 합 니 다.
1.URL 은 현재 페이지 의 경로 에 비해 절대 경 로 를 사용 할 수 있 습 니 다.
2.open 방법 을 호출 하면 실제 요청 을 보 내지 않 고 요청 을 초기 화 하여 보 낼 준 비 를 합 니 다.
3.같은 도 메 인 에서 같은 프로 토 콜 과 포트 의 URL 로 만 요청 을 보 낼 수 있 습 니 다.그렇지 않 으 면 보안 상의 이유 로 오류 가 발생 할 수 있 습 니 다.
서버 에 요청 을 보 내 려 면 send 방법 을 호출 해 야 합 니 다.send 방법 은 하나의 인 자 를 받 아들 여야 합 니 다.인 자 는 요청 주체 가 보 낼 데이터 입 니 다.데 이 터 를 보 내지 않 으 면 null 에 전 송 됩 니 다.send 방법 을 호출 한 후에 서버 에 보 내 기 를 요청 합 니 다.다음 과 같 습 니 다.
xhr.send(null);
서버 에 전송 을 요청 합 니 다.서버 는 요청 에 따라 응답(Response)을 생 성하 여 XHR 대상 에 게 전송 합 니 다.응답 을 받 은 후 해당 데 이 터 는 XHR 대상 의 속성 으로 채 워 집 니 다.네 개의 관련 속성 이 채 워 집 니 다.
1.responseText:응답 주체 로 되 돌아 오 는 텍스트
2.responseXML:응답 내용 의 형식 이"text/xml"또는"application/xml"이면 해당 데 이 터 를 포함 하 는 XML 문 서 를 저장 합 니 다.
3.status:응답 하 는 HTTP 상태(200,404,500 등)
4.status 텍스트:HTTP 상태 설명
onreadystatechange 이벤트
서버 에 요청 이 전송 되 었 을 때 응답 기반 작업 을 수행 해 야 합 니 다.
ready State 가 바 뀔 때마다 onready statechange 이벤트 가 발생 합 니 다.
ready State 속성 에는 XML HttpRequest 의 상태 정보 가 저 장 됩 니 다.
다음은 XML HttpRequest 대상 의 세 가지 중요 한 속성 입 니 다.

onready statechange 이벤트 에서 저 희 는 서버 응답 이 처 리 될 준비 가 되 어 있 을 때 수행 하 는 작업 을 규정 합 니 다.
ready State 가 4 와 상태 가 200 일 때 응답 이 완료 되 었 음 을 표시 합 니 다.

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState== && xmlhttp.status==)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
} 

응답 을 받 아들 이기 전에 abort 방법 으로 비동기 요청 을 취소 할 수 있 습 니 다:XML HttpRequest.abort();
주의:
XML HttpRequest 대상 의 send()방법 을 사용 할 때 get 요청 이나 데 이 터 를 보 낼 필요 가 없 는 post 요청 을 사용 할 때 send(null)를 사용 해 야 합 니 다.
데이터 데 이 터 를 보 내 려 면 post 요청 을 사용 하고 setRequestHeader()를 사용 하여 HTTP 헤드 를 추가 해 야 합 니 다.그리고 send()방법 에 보 내 고 싶 은 데 이 터 를 규정 합 니 다.

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

이상 의 내용 은 소 편 이 여러분 에 게 소개 한 Ajax 튜 토리 얼 인 스 턴 스 상세 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!