一个简单的ajax无刷新翻页的程序
index.php
<script type="text/javascript" src="ajax.js"></script>
<a href="#" onclick="funphp100('o')">o</a>
<a href="#" onclick="funphp100('t')">t</a>
<a href="#" onclick="funphp100('x')">x</a>
<div id="php100"></div>
for.php
<?
if($id=$_GET[id]){
for($i=1;$i<10;$i++){
echo $id;
}
exit();
}
?>
ajax.php
var xmlHttp;
function $_xmlhttprequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function funphp100(url){
$_xmlhttprequest();
xmlHttp.open("GET","for.php?id="+url,true);
xmlHttp.onreadystatechange=byphp;
xmlHttp.send(null);
}
function byphp(){
var byphp100=xmlHttp.responseText;
document.getElementById('php100').innerHTML=byphp100;
}
下面是制作等待进度条效果的程序,就是利用函数判断不同的数据传输状态
function byphp(){
if(xmlHttp.readyState==1){
document.getElementById('php100').innerHTML = "loading.....";
}
if(xmlHttp.readyState==4){
//在客户端检测传送的内容是否全部传完,下面语句在360急速浏览器中不支持
// if(xmlHttp.Status==200){
var byphp100=xmlHttp.responseText;
document.getElementById('php100').innerHTML=byphp100;
// }
}
}
方法XHR.readyState五种状态
XHR.readyState == 状态(0,1,2,3,4)
0:请求未初始化,还没有调用 open()。
1:请求已经建立,但是还没有发送,还没有调用 send()。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
4:响应已完成;您可以获取并使用服务器的响应了。
方法XHR.status常见的几种状态
XHR.status == 200,300,404 等
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误