日期:2014-05-16  浏览次数:20548 次

Ajax+PHP打造等待进度条效果(二)【49讲】

今天要得到的效果图如下:

【注,这个图可以在百度搜loading.gif就有一大堆了】

这个是根据:php100视频之Ajax+PHP快速上手及应用(一)【第48讲】这里面的代码来改的

index.php不用改,要的的代码是ajax.js中的代码,更改代码如下:

// JavaScript Document
var xmlHttp;
function S_xmlhttprequest(){
		if(window.ActiveXObject){
				xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
			}else if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest();	
			}
	}
	
function funphp100(url){
		S_xmlhttprequest();
		xmlHttp.open("GET","for.php?id="+url,true);
		xmlHttp.onreadystatechange = byphp;
		xmlHttp.send(null);
	}
	
function byphp(){
		if(xmlHttp.readyState == 1){
				document.getElementById('php100').innerHTML = "<img src = loading.gif>";
			}
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				var byphp100 = xmlHttp.responseText;
				document.getElementById('php100').innerHTML = byphp100;
			}
		}
	}

for.php里的代码添加一个sleep()函数,如下:

<?php 
if($id = $_GET[id]){
		for($i = 1; $i < 20; $i++)
			echo $id."<br>";
			sleep(1);
	}
?>


理论知识有:

XHR.readyState == 状态(0,1,2,3,4)的状态有5种:
0:请求未初始化,还没有调用 open()。
1:请求已经建立,但是还没有发送,还没有调用 send()。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
4:响应已完成;您可以获取并使用服务器的响应了。




XHR.status == 200,300,404 等:
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功 【这个是我们常用的】
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误