Ajax 초기 데이터 편 읽 기 구현 코드

네,그렇습니다.오늘 우리 가 실현 하고 자 하 는 효 과 는 웹 페이지 를 새로 고치 지 않 은 상태 에서 서버 의 데 이 터 를 읽 고 표시 하 는 것 입 니 다.우리 가 지난번 에 준비 한 것 을 꺼 내 십시오.1:XML HTTPRequest 대상 의 함수.2:Asp 출력 xml 형식의 파일 입 니 다.이 파일 의 내용 을 보 려 면 클릭 하 십시오

 
<% 
'  ：http://Www.Web666.Net 
'  ：   
'              
'      ，   xml   
dim xml 
xml = "<?xml version='1.0' encoding='gb2312'?><body>" 
xml = xml&"<msg>     Asp  xml   ，      ajax     ，                  </msg>" 
xml=xml&"</body>" 
Response.Clear 
Response.ContentType="text/xml" 
Response.CharSet="gb2312" 
Response.Write xml 
Response.End 
%>

열 면 우리 가 Asp 기술 을 사용 하여 동적 으로 xml 형식 을 출력 하 는 것 을 발견 할 수 있 습 니 다.데이터.만약 당신 이 이 기술 에 대해 아직 모른다 면,읽 기 를 되 돌려 주 십시오:ajax 시작 편 은 이 출력 된 데이터 에 msg 태그 가 있 습 니 다.태그 에 텍스트 내용 이 포함 되 어 있 습 니 다.오늘 우 리 는 이 msg 라벨 을 읽 고 텍스트 내용 을 웹 페이지 에 표시 합 니 다.먼저 아래 코드 를 보 세 요.효과 설명 을 첨부 합 니 다

 
<html> 
<head> 
<title>       xmlhttpreuqest  </title> 
</head> 
<body> 
<div id="str"></div><!--            div --> 
<input type="button" value="    " onclick="Post()" /> 
<script type="text/javascript"> 
function ajax_xmlhttp(){ 
// IE   xmlhttpRequest,   IE5.0       
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"); 
for(var i=0; i<msXmlhttp.length; i++){ 
try 
{ 
_xmlhttp=new ActiveXObject(msXmlhttp[i]); 
} 
catch(e) 
{ 
_xmlhttp=null; 
} 
} //      IE    xmlhttp.   
//   IE   ，     FireFox     xmlhttpRequest 
if(!_xmlhttp && typeof XMLHttpRequest != "undefined") 
{ 
_xmlhttp=new XMLHttpRequest(); 
} 
return _xmlhttp; 
} 

//       
function Post(){ 
var ajax = ajax_xmlhttp(); // xmlhttprequest         ． 
ajax.open("post","web_ajax.asp",true);//      ，    ，     
ajax.onreadystatechange = function(){//                    
if(ajax.readyState==4){//       
if(ajax.status==200){//http       ok 
var xmlData = ajax.responseXML; 
var msg = xmlData.getElementsByTagName("msg");//     msg   
var data = msg[0].firstChild.nodeValue; 
document.getElementById("str").innerHTML = data; 
} 
} 
} 
ajax.send(null); 
} 
</script> 
</body> 
</html>

다음은 이 인 스 턴 스 가 어떻게 실현 되 었 는 지 천천히 분석 하 겠 습 니 다.위의 코드 에 있 습 니 다.어제 우리 가 만 든 XML HTTPRequest 함 수 를 제외 하고 맨 위 에 str 이라는 div 속성 이 추가 되 었 습 니 다.이 div 의 역할 은 우리 가 요청 한 데 이 터 를 표시 하 는 것 입 니 다.그리고 우 리 는 Post 라 는 함 수 를 새로 썼 습 니 다.이 함수 의 역할 은 데 이 터 를 읽 기 위해 누 르 는 것 입 니 다.요청 을 보 내 고 데 이 터 를 전송 하 는 것 입 니 다.데 이 터 를 표시 합 니 다.먼저 Post 함수 의 첫 줄 을 보 겠 습 니 다:var ajax=ajaxxmlhttp();이 줄 은 XML HTTPRequest 대상 을 가 진 함 수 를 ajax 라 는 변수 에 할당 한 다 는 뜻 입 니 다.이때 ajax 변수의 자 체 는 XML HTTPRequest 대상 과 같 습 니 다.이 변 수 를 사용 하여 XML HTTPRequest 대상 의 각 방법 과 속성 을 참조 할 수 있 습 니 다.두 번 째 줄:ajax.open("post","웹ajax.asp",true);요청 을 지정 합 니 다.요청 방식 은 post 이 고 요청 한 서버 웹 페이지 는 웹 입 니 다.ajax.asp,true 는 비동기 요청 입 니 다.참고 하 실 수 있 습 니 다:open 방법 세 번 째 줄:ajax.onreadystatechange=function(){},사용자 정의 프로그램 을 지정 하 였 습 니 다.function 의 내용 을 보 겠 습 니 다.ready State 상태 가 4 일 때 ready State 는 4 즉 요청 한 데 이 터 를 성공 적 으로 되 돌려 주 었 습 니 다!또한 status 는 200 을 되 돌려 줍 니 다.status 는 http 요청 상태 코드 를 대표 하고 200 대표 ok 을 되 돌려 줍 니 다.이 동시에 responseXML 을 사용 하여 서버 에서 전 송 된 모든 데 이 터 를 받 습 니 다.responseXML 대 표 는 xml 형식 으로 데 이 터 를 받 습 니 다.서버 에서 돌아 온 모든 xml 데 이 터 를 xml Data 의 변수 에 할당 합 니 다.xml Data.getElement sByTagName("msg").즉,되 돌아 오 는 xml 데이터 의 이름 이 msg 인 모든 탭 을 가 져 오 는 것 을 의미 합 니 다.참고 할 수 있 습 니 다.getElement sByTagName 설명 과 인 스 턴 스 msg[0]는 첫 번 째 msg 탭 을 참조 합 니 다.사실 우리 데이터 에 도 msg 가 하나 밖 에 존재 하지 않 습 니 다.이 탭 의 첫 번 째 키 요 소 를 되 돌려 주 는 텍스트 내용.msg 의 첫 번 째 키 요 소 는 바로 그 텍스트 입 니 다.nodeValue 는 이 텍스트 를 가 져 오 는 것 을 의미 합 니 다.시험:firstChild 방법 과 nodeValue 가 되 돌아 오 는 데 이 터 를 성공 적 으로 분석 하여 페이지 내 id 가 str 인 div 를 찾 아 innerHTML 을 사용 하여 웹 페이지 에 데 이 터 를 표시 합 니 다.Post 함수 의 마지막 줄:ajax.send(null);이것 은 모두 가 한 번 보면 알 수 있 습 니 다.요청 을 보 냅 니 다.null 대 표 는 빈 요청 을 보 냅 니 다.제출 할 데이터 가 없습니다.마지막 으로 onready state change 라 는 속성 에 중점 을 두 고 이야기 하 겠 습 니 다.그 는 속성 이 라 고 합 니 다.그러나 그 는 이벤트 메커니즘 을 가지 고 있 습 니 다.즉,당신 은 그 에 게 함 수 를 지정 할 수 있 습 니 다.onreadystatechange 의 작업 원 리 는 ready State 의 상태 가 바 뀔 때마다 onreadystatechange 가 지정 한 그 함 수 를 실행 합 니 다.사실은 ajax.send(null)가 실행 되 기 전에.onreadystatechange 는 적어도 한 번 실행 되 었 습 니 다.open 방법 을 호출 한 후에,readystate 의 상태 가 변 합 니 다.따라서 onreadystatechange 의 함 수 를 촉발 합 니 다.이것 은 재 귀 체제 와 유사 합 니 다.readystate 의 상태 가 변 하여 onreadystatechange 의 함 수 를 실행 합 니 다.그리고 우 리 는 함수 에서 readysate 상태 값 을 판단 합 니 다.사실은 완전한 요청 과정 에서...ready State 는 최소 4 번 의 변화 가 발생 합 니 다.브 라 우 저 에 따라 다 를 수 있 습 니 다.ready state 가 4 일 때 만 데 이 터 를 받 고 해석 하기 시 작 했 습 니 다.아직 잘 모 르 시 면,onready state 속성 ready State 방법 과 status 가 좋 습 니 다.이번'ajax 초기 데이터 편 읽 기'는 여기까지 입 니 다.만약 당신 이 아직 모 르 는 것 이 있다 면,연습 을 해서 천천히 추측 하 세 요.얻 을 수 있 을 것 이 라 고 믿 습 니 다.다음 편 은"ajax 에서 데 이 터 를 표 로 읽 습 니 다"라 고 말 합 니 다.

Ajax 초기 데이터 편 읽 기 구현 코드

좋은 웹페이지 즐겨찾기