首先创建XMLHttpRequest对象,利用此对象发送请求
主页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Ajax</title> <script type="text/javascript">
function vote(){
//XmlHttpRequest对象,一个专门的HTTP请求工具
/*
实现Ajax要考虑的内容:
1,用什么请求方式
2,请求哪个资源(url)
3,同步还是异步
*/
var xhr=new XMLHttpRequest();
// document.write(xhr); // alert(xhr);
// console.log(xhr);//在IE10以下版本console未定义 //单向请求
xhr.open('GET','./01.php',true);//打开连接
//请求方法,请求地址,同步还是异步 xhr.send(null);//发送请求,不发送数据 alert(xhr.responseText);
alert("hello"); }
</script>
</head>
<body>
<form action="" method="post">
<p>用户名:<input type="text" name="username"/></p>
<p>密码:<input type="password" name="pwd"/></p>
<p><input type="submit" value="注册" onclick="vote()"/></p>
</form>
</body>
</html>
返回值为01.php中echo的内容
同步与异步的理解 等待send()执行完毕之后,再执行后面的语句为同步 false
不等带send()的是否执行,直接执行后面的语句为异步 true
xhr对象在请求和响应过程中,状态会不断变化,1-4逐步变化,到4时,表示成功
可以绑定一个函数,来监听状态的改变,最终实现接收最后响应信息
添加以下代码,用异步传输
//状态变化的回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert("请求成功了");
alert(xhr.responseText);//弹出返回信息,responseText是属性不是方法
}
}