ajax 를 더욱 우호 적 으로 실현 하 는 방법(배경 처리 진 도 를 실시 간 으로 표시 합 니 다.)
<%
// Content-Type:application/x-javascript Webkit (chrome,safari)
response.setHeader("Content-Type","application/x-javascript");
int count = 6; // 6
for(int i=0;i<count;i++){
// ，
out.println(i+1);
out.flush();
// 1
Thread.currentThread().sleep(1000);
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#divProgress{width:300px;height:24px;position:relative;}
#divProgress div{position:absolute;left:0;top:0;height:24px;}
#progressBg{background-color:#B9F8F9;z-index:10;}
#progressText{z-index:15;text-align:center;width:100%;}
</style>
</head>
<body>
<div id="divProgress">
<div id="progressBg"></div>
<div id="progressText"></div>
</div>
<br />
<button onclick="send()"> </button>
<script>
var t = document.getElementById("progressText");
var bg = document.getElementById("progressBg");
function send(){
t.innerHTML = "loading...";
bg.style.width = "0px";
var xhr = new window.XMLHttpRequest();
if(!window.XMLHttpRequest){
try {
xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {}
}
xhr.open("post","http://localhost:801/ChunkTest/chunk.jsp?count=6");
var oldSize=0;
xhr.onreadystatechange = function(){
if(xhr.readyState > 2){
var tmpText = xhr.responseText.substring(oldSize);
oldSize = xhr.responseText.length;
if(tmpText.length > 0 ){
//
t.innerHTML = tmpText + "/6";
//
var width = parseInt(tmpText)/6*300;
bg.style.width = width+"px";
}
}
if(xhr.readyState == 4){
//
t.innerHTML = " ";
bg.style.width = "300px";
}
}
xhr.send(null);
}
</script>
</body>
</html>
단점:여 기 를 보면 꿈 틀 거 릴 지도 모 르 니 직접 해 보고 싶 어 요.하지만 위의 방법 이 좋 지만 브 라 우 저의 지원 문제 라 는 단점 도 있다.현재 IE 의 모든 버 전의 브 라 우 저 는 xhr.ready State==3 상 태 를 지원 하지 않 습 니 다.IE 브 라 우 저 는 response 응답 이 끝나 기 전에 responseText 속성 을 읽 는 것 을 지원 하지 않 습 니 다.구체 적 으로 MSDN:XML HttpRequest Object 는 Webkit 기반 브 라 우 저 지원 이 좋 지 않 습 니 다.Content-type:application/x-javascript 을 설정 해 야 합 니 다.단점 을 본 후에 당신 의 적극성 에 타격 을 주 었 습 니까?사실은 IE 에 대해 우 리 는 너무 많은 처 리 를 할 필요 가 없습니다.IE 가 지원 하지 않 으 면 진 도 를 표시 하지 않 고 전통 적 인 ajax 요청 과 마찬가지 로 요청 이 끝 날 때 까지 1 개의 loading 을 표시 합 니 다.저 희 는 간단 한 판단 을 하나 더 해 야 합 니 다.만약 에 ie 라면 xhr.ready State>2 의 코드 를 실행 하지 않 을 것 이 라 고 판단 합 니 다.판단 을 하지 않 으 면 IE 에서 JS 오 류 를 보고 할 것 입 니 다.DEMO:demo 서버 가 좋 지 않 고 외국 에 서 는 언제든지 클릭 하지 못 할 수도 있 습 니 다.그리고 가끔 운행 효과 가 좋 지 않 습 니 다.코드 copy 를 로 컬 로 테스트 하 는 것 이 좋 습 니 다.fireforx 나 chrome 을 사용 하여 demo 를 보 세 요.ie 가 보 는 효 과 는 일반적인 ajax 와 다 르 지 않 습 니 다.http://213.186.44.204:8080/ChunkTest/index.html 전재 출처 를 밝 혀 주 십시오:http://www.cnblogs.com/BearsTaR/。 상용 금지!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript Ajax에 대한 간단한 연습저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
