AJAX 첫 체험 의 상편
4367 단어 AJAX 첫 체험 의 상편
AJAX 는 최근 2 년 동안 매우 뜨 거 운 것 입 니 다.저도 구경 을 했 습 니 다.며칠 전에 교과 과정 을 찾 아 보 았 습 니 다.다음은 전체 처리 과정 에 따라 자신 이 배 운 것 을 쓰 겠 습 니 다.하지만 초학 이기 때문에 잘못 이 있 으 면 양해 해 주 십시오.지적 을 환영 합 니 다^^.
1.XML HttpRequest 대상 만 들 기
현재 브 라 우 저 는 여러 가지 가 있 습 니 다.XML HttpRequest 를 만 드 는 방법 도 다 르 기 때문에 다양한 브 라 우 저 를 호 환 하기 위해 서 는 XML HttpRequest 를 만 들 때 도 다양한 브 라 우 저의 상황 을 고려 해 야 합 니 다.현재 주류 브 라 우 저 는 Windows 아래 IE,Firefox 및 Opera 가 있 기 때문에 우리 가 쓴 코드 는 가능 한 한 이 몇 개의 브 라 우 저 를 호 환 해 야 합 니 다.몇 가지 자 료 를 참고 한 후에 나 는 아래 의 방법 으로 XML HttpRequest 대상 을 만 들 었 다.
CODE:
//변 수 를 먼저 정의 하고 초기 값 을 false 로 부여 하여 대상 이 성공 적 으로 var xmlObj=false 를 만 들 었 는 지 여 부 를 판단 하 는 데 편리 합 니 다./try 를 사용 하여 생 성 실 패 를 캡 처 하고 try{를 만 드 는 방법 을 바 꿉 니 다. // Mozilla 에서 XML HttpRequest 대상 을 만 드 는 방법 을 사용 합 니 다. xmlObj=new XMLHttpRequest;}catch(e) { try { // 만약 성공 하지 못 한다 면,비교적 새로운 IE 에서 의 방식 을 시도 해 보 세 요. xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); } catch(e2) { try { // 실패 하면 오래된 버 전의 IE 방식 을 사용 해 보 세 요. xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e3) { // 아니면 실패?그럼 만 드 는 데 실패 했다 고 생각 하고... xmlObj=false; } }}// XML HttpRequest 대상 을 만 드 는 데 실패 하면 방문 자 에 게 이 페이지 가 if(!xmlObj) { alert("XMLHttpRequest init Failed!");}
2.XML 문 서 를 XML HttpRequest 로 가 져 오기
XML 을 XML HttpRequest 로 가 져 오 려 면 이 문서 가 자신 과 같은 도 메 인 에 있어 야 합 니 다.제 이 해 는 같은 도 메 인 이름 아래 나 같은 디 렉 터 리 에 있 거나 그렇지 않 으 면'접근 거부'오류 가 발생 할 수 있 습 니 다.로 컬 높이 에서 도 웹 서버 를 실행 해 야 하 며 브 라 우 저 에서 이 웹 페이지 를 직접 열 수 없습니다.
CODE:
//open 방법 으로 요청 을 엽 니 다.이 방법 은 요청 방식,요청 파일 의 URL 및 동기 화 방식(?구체 적 으로 무엇 을 불 렀 는 지 잘 모 르 겠 습 니 다.)//요청 방식 은 GET,POST,HEAD 의 하나 일 수 있 습 니 다.파일 을 가 져 오 려 고 하기 때문에 GET//요청 파일 의 URL 로 상대 경 로 를 직접 사용 하면 됩 니 다.요청 이 보 낸 후에 응답 을 기다 리 는 것(false)은 다음 코드(true)를 계속 실행 하 는 것 입 니 다.즉,비동기 입 니 다.AJAX 의 첫 번 째 A 는 비동기 임 을 나타 내기 때문에 여 기 는 truexmlObj.open("GET","sample.xml",true)을 사용 합 니 다.//비동기 방식 을 사용 하기 때문에 XML HttpRequest 대상 의 상태 가 바 뀌 었 을 때 처리 해 야 합 니 다 xmlObj.onreadystatechange=function(){ // XML HttpRequest 상태 가 4 라면 ready 에서 왔 을 것 입 니 다.계속 처리 하 십시오. if(xmlObj.readyState==4) { // 반환 상태 가 200 OK 인지 판단 해 야 합 니 다.파일 이 존재 하지 않 으 면 404 로 되 돌아 가 는 경우 도 있 습 니 다. if(xmlObj.status==200) { // 모든 OK,호출 처리 과정 DoMyXML(); } }}// GET 이기 때문에 send 의 내용 은 nullxmlObj.send(null)입 니 다.
3.ASP 로 XML 문서 만 들 기
동적 디 스 플레이 의 수 요 를 위해 동적 웹 페이지 를 사용 해 야 합 니 다.저 는 ASP 를 사용 합 니 다.
CODE:
<%'수정 헤더 표 지 는 XML 문서 Response.ContentType="text/xml"...strXML="?xml versin=""1.0"" encoding=""utf-8""?>"' 데이터베이스 에 있 는 내용 을 XML 요구 에 따라 출력 합 니 다 strXML=strXML&"...................................................................
4.XML 문서 처리
XML 문 서 를 가 져 온 후에 필요 한 것 을 가 져 와 야 합 니 다.만약 에 제 가 서비스 에서 아래 의 XML 문 서 를 가 져 왔 다 면:
CODE:
제 가 원 하 는 것 은 title 과 content 의 내용 입 니 다.그러면 아래 와 같이 할 수 있 습 니 다.
CODE:
function DoMyXML() { var xmlDoc,items,title,content; // 먼저 XML HttpRequest 대상 에서 XML 문 서 를 가 져 옵 니 다. xmlDoc=xmlObj.responseXML; // 아 이 템 추가 items=xmlDoc.getElementsByTagName("item"); // 마지막 으로 TagName 에 따라 원 하 는 내용 을 가 져 옵 니 다. // XML 문서 에 여러 아 이 템 이 있 으 면 배열 의 아래 표 시 를 통 해 몇 번 째 아 이 템 을 표시 할 수 있 습 니 다. title=items[0].getElementsByTagName("title")[0].firstChild.data; content=items[0].getElementsByTagName("content")[0].firstChild.data;}
자,이제 내 가 원 하 는 것 을 얻 었 으 니 보 여줄 수 있 겠 군.
5.출력 처리 결과
출력 할 내용 을 표시 하기 위해 다음 과 같은 HTML 문서 가 있다 고 가정 합 니 다.
CODE:
출력 내용 을 표시 하기 위해 my display 라 는 ID 의 DIV 용 기 를 정의 합 니 다.자,JS 로 이동 합 니 다.
CODE:
//...DoMyXML 받 기;/content=items[0].....;var strHTML;// 표시 할 내용 을 먼저 구성 합 니 다 strHTML="Item title:"+title+"
Item content:"+content;/대상 용 기 를 가 져 오고 표시 할 내용 으로 innerHTML 을 설정 합 니 다 document.getElement ById("my display").innerHTML=strHTML;
자,이런 차 이 는 AJAX 프로그램 을 작성 하 는 기초 가 많 지 않 습 니 다.구체 적 으로 사용 하면 개인 이 발휘 하 는 것 에 달 려 있 습 니 다.물론 AJAX 는 이것 뿐만 아니 라 관련 자 료 를 참고 할 수 있 습 니 다.
좋은 웹페이지 즐겨찾기
