Ajax 표 의 구현 코드 로 데 이 터 를 읽 습 니 다.

4662 단어 데이터표.
또한 자바 스 크 립 트 와 Dom 인 터 페 이 스 를 사용 하여 웹 페이지 에 표를 만 드 는 방법 도 보 여 줍 니 다.ajax 가 요청 한 데 이 터 를 이 표 에 표시 합 니 다.이번 ajax 인 스 턴 스 효과 에서 요청 한 서버 웹 페이지 는 여전히 웹 입 니 다.ajax.Asp 이 웹 페이지 는 Asp 출력 xml 기술 을 사 용 했 습 니 다.Asp 출력 xml 를 어떻게 사용 하 는 지 모 르 면 되 돌려 주 십시오:"ajax 시작 준비 편"알림:모든 ajax 튜 토리 얼 의 인 스 턴 스 가 시작 되 기 전에 당일 웹 을 봐 야 합 니 다.ajax.asp 파일 의 데이터 구조 입 니 다.인 스 턴 스 에서 읽 을 태그 와 내용 이 다 르 기 때 문 입 니 다.클릭:웹 보기ajax.Asp 에서 마지막 으로 읽 은 것 은 msg 탭 입 니 다.오늘 xml 에 추 가 된 read 탭 을 읽 으 려 고 합 니 다.우리 가 실현 하고 자 하 는 효 과 는 read 탭 에 있 는 Html,Css,Dom,JavaScript 입 니 다.Ajax 이 텍스트 내용 들 은 우리 웹 페이지 의 표 에 표 시 됩 니 다.아래 코드 를 먼저 보 세 요.인 스 턴 스 프 리 젠 테 이 션
 
<html>
<head>
<title>ajax </title>
</head>
<body>
<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;// xml
var read = xmlData.getElementsByTagName("read");// read
if(read.length!=0){
var t = document.createElement("table");//
t.setAttribute("border","1");
document.body.appendChild(t);// doby
for(var i=0;i<read[0].childNodes.length;i++){
var tr = t.insertRow(t.rows.length);//
var td = tr.insertCell(0);//
td.innerHTML = read[0].childNodes[i].firstChild.nodeValue;//
}
}
}
}
}
ajax.send(null);
}
</script>
</body>
</html>

오늘 우 리 는 어제 반복 한 내용 을 더 이상 말 하지 않 습 니 다.같은 Post 함수 에 몇 줄 의 코드 가 더 있 습 니 다."ajax 초기 읽 기 데이터 편"을 따라 비교 할 수 있 습 니 다.오늘 추 가 된 코드 의 역할 을 말씀 드 리 겠 습 니 다.if read.length!=0:read 태그 가 성공 적 으로 가 져 왔 는 지 판단 하 는 것 입 니 다.legth 속성 이 0 과 같 지 않 으 면 read 가 이미 존재 한 다 는 뜻 입 니 다.데 이 터 를 분석 하기 시 작 했 지만 웹 페이지 에 데 이 터 를 표시 하 는 요소 가 존재 하지 않 습 니 다.따라서 표:var t=document.createElement("table")를 만 듭 니 다.참고:createElement t.setAttribute("border","1");표 에 테두리 속성 을 추가 합 니 다.참고:setAttribute document.body.append Child(t);만 든 표를 웹 페이지 body 요소 에 추가 합 니 다.참고:appendChild 표 추가 완료.read 탭 에 있 는 모든 하위 요 소 를 옮 겨 다 니 기 시작 합 니 다.즉,html,css,dom,javascript,ajax 등 내용 입 니 다.순환 을 시작 합 니 다.read[0].childNodes.length 는 read 탭 에 있 는 모든 하위 요소 의 개 수 를 가 져 옵 니 다.여기 서 5.i=0 을 되 돌려 줍 니 다.i<5 조건 ok!반복 할 때마다 i 변 수 는 자동 으로+1 이 됩 니 다.표 는 한 줄 을 추가 하고 이 줄 에 열 을 추가 합 니 다.동시에 이 열 에 read 제 i 키 요소 의 텍스트 내용 을 기록 합 니 다.i=5 까지 i 는 read 하위 요소 의 개수 보다 작 지 않 습 니 다.조건 이 만족 하지 않 습 니 다.순환 이 중단 되 었 습 니 다.이때 데이터 가 마침 표 시 됩 니 다!모든 독자 들 이 깊이 이해 할 수 있 도록 이 인 스 턴 스 효과 의 실현 절 차 를 다시 한 번 말씀 드 리 겠 습 니 다.'데이터 표시'를 눌 렀 을 때 Post 함수 가 활성화 되 었 습 니 다.함수 내 에 ajax 라 는 변 수 는 XML HTTPRequest 대상 에 의 해 인용 되 었 습 니 다.그리고 open 방법 을 열 었 습 니 다.send 방법 으로 서버 에 요청 합 니 다.open 이 든 send 방법 이 든.ready State 방법의 상태 값 에 변 화 를 일 으 킬 수 있 습 니 다.ready State 가 변 하면 onready statechange 속성 이 실 행 됩 니 다.onready statechange 속성 이 지정 한 프로그램 이 실 행 됩 니 다.그리고 프로그램 에서 ready State 의 상태 값 이 4 인지 다시 판단 합 니 다.이 경우 전체 전송 요청 과 서버 에서 데 이 터 를 되 돌려 주 는 데 성 공 했 음 을 증명 합 니 다.또한 status 등 200 여 부 를 판단 합 니 다.이 경우 http 요청 상태 코드 도 ok!이 때 안심 하고 100%데 이 터 를 받 을 수 있 습 니 다.그래서 저 희 는 responseXML 속성 을 사용 하여 되 돌아 오 는 데 이 터 를 받 습 니 다.이 속성 은 xml 형식의 데이터 만 받 습 니 다.저 는 xml 형식의 데 이 터 를 요청 과 반전 의 중개 로 삼 습 니 다.ajax 의 가장 표준적 인 사용 방법 이 라 고 생각 합 니 다!오늘 ajax 인 스 턴 스 튜 토리 얼-"ajax 의 읽 기 데 이 터 를 표 로"는 일 단락 되 었 습 니 다.독자 여러분 이 해결 할 수 있 도록 문 제 를 남 겨 야 하지 않 겠 습 니까?여러분 은 인 스 턴 스 프 리 젠 테 이 션 에서'데이터 표시'를 반복 해서 누 르 면 표 가 중복 되 어 생 성 됩 니 다.데이터 도 중복 되 어 읽 힙 니 다.저 는 독자 여러분 이 이 문 제 를 해결 할 수 있 기 를 바 랍 니 다.다음 에 저희 가 말 하 겠 습 니 다.'ajax 추가 데이터 실시 간 읽 기 편'은 다음 과 같 습 니 다.http://Www.Web666.Net 저자:강동

좋은 웹페이지 즐겨찾기