Ajax 학습 (3) - XML HttpRequest 대상 의 5 단계 사용법
6687 단어 [B / S 개발]
1. XMLHttpRequest 。IE 브 라 우 저 는 XML HttpRequest 를 ActiveX 대상 으로 구현 합 니 다. Firefox, Opera, Netscape 등 다른 브 라 우 저 는 로 컬 javascript 대상 으로 구현 합 니 다. IE 7.0 및 이상 버 전 은 두 가지 생 성 방식 을 모두 지원 합 니 다.
// XMLHttpRequest
var xmlHttp = null;
// XMLHttpRequest
function creatXMLHTTP()
{
// ActiveX ， IE6
if (window.ActiveXObject)
{
// ActiveXObject
var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
// XMLHttpRequest
for (var i=0;i // XMLHttpRequest ，
creatXMLHTTP();
if (xmlHttp!=null)
{
// XMLHttpRequest
// http
// http
}
else
{
alert(" XMLHTTP");
}2. 。 // XMLHttpRequest
xmlHttp.onreadystatechange = httpStateChange; ，XMLHttpRequest ， 。0： ， XMLHttpRequest ；1： ， XMLHttpRequest 、 ；2： ，XMLHttpRequest ；3： ， XMLHttpRequest ， ；4： ： XMLHttpRequest 。使用XMLHttpRequest对象的onreadystatechange属性，可以设置响应XMLHttpRequest对象状态变化的函数。
设置回调函数时，不要在函数名后而加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。
3. open 。// http xmlHttp.open("get","userName.txt", true);
XML HttpRequest 의 open (method, URL, flag, name, password) 방법 은 대상 을 초기 화 하 는 데 사용 되 며, 다음 세 개의 인 자 는 선택 할 수 있 습 니 다.
method: 서버 에 http 요청 을 어떤 방식 으로 보 낼 지 지정 합 니 다. 매개 변수 값 은 get, post, head, put, delete 다섯 가지 일 수 있 습 니 다.
URL: 서버 의 URL, 즉 사용자 가 데 이 터 를 처리 하고 되 돌려 주 는 프로그램의 URL 을 지정 합 니 다.이 URL 은 절대 주소 일 수도 있 고 상대 주소 일 수도 있 습 니 다.
flag: http 요청 을 제출 하 는 방식 을 지정 합 니 다. true 는 비동기 방식 을 기본 값 으로 합 니 다.false 는 동기 화 방식 을 가리킨다.
name 과 password: 서버 가 인증 이 필요 하 다 면 이 두 매개 변 수 는 사용자 이름과 비밀 번 호 를 제출 하 는 데 사 용 됩 니 다.
4. 보 낸 데 이 터 를 설정 하고 서버 와 상호작용 을 시작 합 니 다.// http xmlHttp.send(null);
http 요청 을 보 내 면 XML HttpRequest 의 send (data) 방법 을 사용 합 니 다. data 매개 변 수 는 open () 방법 에서 URL 매개 변수 가 지정 한 파일 에 전달 하 는 매개 변수 입 니 다.만약 에 여러 개의 파 라 메 터 를 전달 하려 면 '&' 로 구분 하고 파 라 메 터 를 전달 하여 'null' 을 쓸 필요 가 없습니다.
5. 리 턴 함수 에서 상호작용 이 끝 났 는 지, 응답 이 정확 한 지 판단 하고 필요 에 따라 서버 에서 돌아 온 데 이 터 를 가 져 와 페이지 내용 을 업데이트 합 니 다.
1) 비동기 호출 성공 여 부 를 판단 합 니 다.if (xmlHttp.readyState==4)// { if (xmlHttp.status==200 || xmlHttp.status==0)// || { } }
ready State 속성 값 은 4 로 비동기 호출 이 완료 되 었 음 을 설명 하지만 비동기 호출 이 성공 한 것 은 아 닙 니 다.XML HttpRequest 의 status 속성 은 서버 에서 되 돌아 오 는 상태 코드 를 얻 을 수 있 습 니 다.0 은 이해 할 수 없 는 http 상 태 를 의미 합 니 다. 보통 로 컬 컴퓨터 에서 파일 을 열 때 만 돌아 갑 니 다.자주 사용 하 는 http 상태 코드 는 다음 과 같은 세 가지 가 있 습 니 다.
200: 서버 가 웹 페이지 로 성공 적 으로 돌 아 왔 습 니 다.
404: 클 라 이언 트 가 요청 한 웹 페이지 가 존재 하지 않 습 니 다.
503: 서버 응답 시간 초과.
2) 서버 에서 되 돌아 오 는 데이터 획득:var userNames = xmlHttp.responseText;
비동기 호출 의 최종 목적 은 서버 에서 돌아 온 데 이 터 를 받 고 이 데이터 에 따라 클 라 이언 트 웹 페이지 에 어떻게 표시 할 지 결정 하 는 것 입 니 다.비동기 호출 에 성공 하면 XML HttpRequest 대상 은 다음 4 개의 속성 을 사용 하여 서버 가 되 돌아 오 는 데 이 터 를 얻 습 니 다.
responseText: 서버 가 되 돌려 준 데 이 터 를 문자열 로 되 돌려 줍 니 다.
responseXML: XML 로 되 돌아 가 는 것 을 의미 합 니 다.
response Body: unsigned byte 배열 로 되 돌아 오 는 것 을 의미 합 니 다.
responseStream: ISTream 대상 으로 되 돌아 가 는 것 을 의미 합 니 다.
3) 부분 업데이트:// var node = document.getElementById("myDiv"); // node.firstChild.nodeValue = text;
서버 에서 돌아 온 데 이 터 를 가 져 오 면 표시 합 니 다.Ajax 는 DOM 을 통 해 부분 업데이트 데 이 터 를 완성 합 니 다.
Ajax 프로 그래 밍 에서 XML HttpRequest 대상 에 대한 사용 을 떠 날 수 없습니다. 매번 사용 할 때마다 이 다섯 가지 작업 을 합 니 다.반복 되 는 일 에 직면 하면 우 리 는 방법 을 생각해 야 한다.이 프로 그래 밍 절 차 는 비교적 고정 되 어 있 기 때문에 현재 이미 봉인 되 어 코드 를 다시 사용 하고 프로 그래 밍 을 간소화 합 니 다.하지만 훌륭 한 프로그래머 가 되 려 면 이 다섯 가지 절 차 를 알 아야 한다.
좋은 웹페이지 즐겨찾기
