Ajax详解

ajax的介绍

全称 Asynchronous Javascript And XML（ 异步的js和xml）
ajax就是在不刷新页面的情况下发送http请求，将服务器返回的数据加载出来，应用于局部刷新，表单验证等等，ajax可同步可异步

同步：一个代码执行的时候，阻塞其他代码执行（先吃饭再上厕所）
异步：一个代码执行的时候，不影响其他代码执行（边吃饭边看电视）
数据加载方案：先执行同步，异步先挂起，所有同步执行完了再执行异步

ajax的特点

1.提高运行效率
2.提高用户体验，让多个事件同时发生
3.局部刷新，不刷新整个页面
应用场景：弹幕、表单验证、局部刷新模块
缺点：不能后退的，对于搜索引擎的支持不太友好，爬虫爬不到
总结：ajax为前后端数据交互的桥梁

发送ajax请求

运行原理：
相当于创建一个请求代理
通过代理去完成与服务器的交互
交互的过程中，客户不需要等待
还可以进行其他的工作，交互完成以后
代理再将结果返回客户端页面

执行流程：
1.创建ajax对象 - 浏览器提供了一个对象用来发送ajax请求

var xhr = new XMLHttpRequest();

2.建立一个ajax连接：xhr.open(请求方式,请求的url,是否异步);

xhr.open("get","3-demo.php",true);
xhr.open("get","3-demo.php",false);
xhr.open("get","3-demo.php"); // 第三个参数可省略，默认情况下是异步操作

3.发送这个请求：xhr.send(传送请求主体)

xhr.send();

4.监听ajax的状态：xhr.onreadystatechange=function(){}

xhr.onreadystatechange=function(){
        // 在这里可以获取到ajax的所有的状态：xhr.readyState
        // ajax请求完成，是状态为4的时候 - 需要判断
        // http响应成功的状态码是200到299 - xhr.status
        if(xhr.readyState==4 && xhr.status==200){
            // 获取到响应主体：xhr.responseText
            var res = xhr.responseText;
            console.log(res);
        }
    }

判断也可以这样写：

if(xhr.readyState==4){
	if(xhr.status>=200 && xhr.status<300){
	
	}
}

这里列出一些状态码
ajax状态码：
xhr.readyState==4
0 未初始化，尚未调用open方法
1 调用open方法 send方法，数据发送
2 接收到响应
3 正在解析响应内容
4 解析完成 响应成功

http状态码：
xhr.status==200
100 必须发送请求
200 数据请求成功
300 重定向
400 客户端错误
500 服务端错误

如果是post请求需要先设置数据格式 - 请求头 - 模拟表单提交

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

get请求发送的数据拼接在地址后面

xhr.open("get","3-demo.php?a=1&b=2");

post请求发送的数据放在send方法里

var data="a=1&b=2";
xhr.send(data);

如果是同步请求，就必须将send方法放到监听状态的后面，因为同步就是按顺序执行，先发送请求，当监听到状态的时候，已经发送成功了，所以监听里面的代码并没有执行 - 建议在写ajax的时候，先监听状态，再发送请求

一个完整的post请求

var xhr = new XMLHttpRequest();
xhr.open("post","3-demo.php");
 xhr.onreadystatechange = function(){
     if(xhr.readyState === 4){
         var res = xhr.responseText;
         console.log(res);
     }
 }
 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
 xhr.send();