其实ajax可以笼统的分为三步
- 创建 XMLHttpRequest 对象
- 在onreadystatechange 事件中,获取异步调用返回的数据,使用JavaScript和DOM实现局部刷新
- 调用对象的方法规定请求的类型、URL 以及是否异步处理请求,并向服务器发送请求
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
考虑到浏览器版本兼容性,创建对象时建议这么写:
if(window.XMLHttpRequest){
city=new XMLHttpRequest();
}else{
city=new ActiveXObject('microsoft');
}
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
注意点:readyState对应city对象当前状态。不能手工赋值,可以取值,其值会随着(请求-响应)过程进行自动改变
readyState 的5种状态分别为:
上面有讲过我们会在onreadystatechange事件中进行页面刷新,这些都是基于 readyState 等于 4 且状态为 200 时,表示响应已就绪而进行的JS或DOM操作。
注意点:不论你是同步还是异步,程序都执行onreadystatechange,只不过在写同步时你可以省略不写,直接发送请求,执行相应的函数
以下仅仅是JS操作
这时获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
向服务器发送请求
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
方法 | open(method,url,async ) |
---|---|
意义 | 打开到服务器连接 |
method | 请求方式 GET POST |
url | 请求url地址(程序地址) |
async | 请求方式是异步(true)/同步(false) |
方法 | send(data) |
---|---|
意义 | 把请求消息发送web服务器 |
data | 请求消息主体内容 |
get传送 | data为null |
post传送 | data为请求的数据 |
同步与异步
JS 异步
//创造变量
var ls=new XMLHttpRequest();
var sj="username="+nameValue+"&pwd="+pwdValue;
//准备发送请求
ls.open("post","ajaxpost.php",true);
//设置发送请求的头部
ls.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
ls.send(sj);
//回调函数
ls.onreadystatechange=function(){
//判断请求状态
if(ls.readyState == 4 && ls.status == 200){
var num=JSON.parse(ls.responseText);
if(num.code == 1){
timi.innerHTML="登陆成功";
}else{
alert("登陆失败");
}
}
}
==注意点:==如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
JS 同步
//创造ajax对象
var ls=new XMLHttpRequest();
//准备发送请求
ls.open("get","get.php?username="+nameValue+"&pwd="+pwdValue,true);
//发送请求
ls.send(null);
//回调函数
ls.onreadystatechange=function(){
//判断服务器相应是否成功
if(ls.readyState == 4 && ls.status == 200){
//将php的返回值赋值给变量
var num=JSON.parse(ls.responseText);
if(num.code == 1){
timi.innerHTML="登陆成功"
}else{
alert("登陆失败")
}
}
}
同步:当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,等待服务器返回数据,页面出现假死状态,当接收到sever端数据完毕后才会继续运行其他代码页面假死状态解除。
异步:当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行相应操作
以异步为例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label for="username">账号:</label>
<input type="text" name="username" id="zhanghao"><br>
<label for="pwd">密码:</label>
<input type="password" name="pwd" id="pwd"><br>
<input type="button" value="提交" id="sub"><br>
<span id="timi"></span>
</form>
</body>
<script>
var zhanghao=document.getElementById("zhanghao");
var pwd=document.getElementById("pwd");
var sub=document.getElementById("sub");
var timi=document.getElementById("timi");
sub.onclick=function(){
var nameValue=zhanghao.value;
var pwdValue=pwd.value;
//创造变量
var ls=new XMLHttpRequest();
var sj="username="+nameValue+"&pwd="+pwdValue;
//准备发送请求
ls.open("post","ajaxpost.php",true);
//设置发送请求的头部
ls.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
ls.send(sj);
//回调函数
ls.onreadystatechange=function(){
//判断请求状态
if(ls.readyState == 4 && ls.status == 200){
var num=JSON.parse(ls.responseText);
if(num.code == 1){
timi.innerHTML="登陆成功";
}else{
alert("登陆失败");
}
}
}
}
</script>
</html>