顺序执行，等待前面结束后面才执行是同步(false)；否则是异步（true）

最新推荐文章于 2024-08-01 09:51:45 发布

原创最新推荐文章于 2024-08-01 09:51:45 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

本文展示了如何利用Ajax技术实现一个简单的投票功能，包括创建XMLHttpRequest对象、发送GET请求到PHP文件以及处理返回的数据。代码示例中包含了HTML、JavaScript和PHP的整合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是2.html的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>Ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="自学IT http://www.zixue.it" />

<script type='text/javascript'>
function createXHR()
{
var xhr = null;
if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

return xhr;
}

function vote()
{
//制造xhr
var xhr = createXHR();
//打开链接
xhr.open('GET','./1.php',true);
//发送请求
xhr.send(null);
//绑定状态变化的回调函数
xhr.onreadystatechange = function()
{
//var pg = document.getElementById('progress');
//pg.innerHTML = pg.innerHTML + '状态现在已经变成' + this.readyState + '<br />';
if (this.readyState==4)
{
if (this.responseText==1)
{
document.getElementById('progress').innerHTML = '投票成功';
}
else if (this.responseText==0)
{
document.getElementById('progress').innerHTML = '投票失败';
}
else
{
document.getElementById('progress').innerHTML = this.responseText;
}
};
}
alert("异步时候现出现该alert，执行完再回头儿执行回调函数");
}
</script>
</head>
<body>
<div>
<p><img src="./1.jpg" alt="" /></p>
<p><input type="button" value="投票方法" onclick="vote()" /></p>
</div>
<div id="progress"></div>
</body>

</html>

下面是上面用到的1.PHP的代码

<?php
/****
投票页面
****/
if(rand(1,10)<4)
{
echo "0";
}
else
{
$cnt = file_get_contents('./1.txt');
$cnt++;
file_put_contents('./1.txt', $cnt);
echo "1";
}
//header('HTTP/1.1 204 No Content');

?>