ajax工作原理、同步与异步

其实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>