Ajax详解_ajax 收到的数据是发送过去的数据-CSDN博客

本文链接：https://blog.csdn.net/weixin_42444564/article/details/88839858

1.客户端向服务端发送请求的几种情况

地址栏输入地址，回车，刷新页面
特定元素的href或者src属性
表单提交

这些方案都是我们无法通过或者很难通过代码的方式进行编程，对服务端发出请求并且接收服务端返回的响应

如果我们可以通过Javascript直接发送网络请求，那么Web的可能就会更多，随之能实现的功能也会更多，至少不再在是单机游戏了

说白了，Ajax就是浏览器提供的一套API，可以通过Javascript调用，从而实现通过代码控制请求与响应，从而实现网络编程

能力不够，API来凑

2.状态码readyState

var xhr=new XMLHttpRequest();//readyState=0 表示请求代理对象 即初始化
xhr.open('GET',url);//readyState=1 表示open方法已经调用，建立一个与服务器端口的连接
xhr.send();
xhr.onreadystatechange=function(){//当状态码变化时触发该事件
    switch(this.readyState){
        case 2:
            //表示已经接收到了响应的响应头,并且可以通过getResponseHeader或者getAllResponseHeader获取响应头中的信息
        case 3:
            //表示正在下载响应的响应体，有可能响应体为空，也有可能不完整
            //在这里处理响应体不保险，不可靠
        case 4:
            //表示下载响应体成功 但其实并不清楚服务器返回的响应体是否是正确的数据
    }
};

3.onload事件

var xhr=new XMLHttpRequest();
xhr.open('GET',url);
xhr.send(null);
xhr.onload=function(){
    console.log(this.readyState);//4，只有当状态码为4时才会触发该事件，该事件是新特性，所以要考虑兼容性
};

4.设置请求行，请求头，请求体

1.什么是请求行，请求头，请求体

请求行：

在这里插入图片描述

请求头：

在这里插入图片描述

请求体：

在这里插入图片描述

var xhr=new XMLHttpRequest();
xhr.open('POST',url);//设置请求行
xhr.setRequestHeader('key','value');//设置请求头
xhr.setRequestHeader('Content-type','application/json');//设置请求体的格式为json，即告诉服务端，传输过去的数据格式是json
xhr.send('key=value');//设置请求体

5.接口的概念

其实就是后端提供给前端的一个数据接口

前端可以向该接口发送请求，而该接口会根据请求返回相应的响应，这就是接口，之前自己用Node写的其实就是一个接口

前端可以向该接口发送数据，而该接口也可以返回相应的数据

6.发送GET请求

var xhr=new XMLHttpRequest();
xhr.open('GET','baidu.com?id=1');//GET请求传递数据按照该例子即可
xhr.send();
xhr.onreadystatechange=function(){
    if(this.readyState!==4) return;
    console.log(this.responseText);
};

7.发送POST请求

var xhr=new XMLHttpRequest();
xhr.open('POST',url,true);//第三个参数传入布尔值，传入true表示异步模式，false表示同步模式
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');//表示发送的请求体的格式为键值对格式
xhr.send('key1=value1&key2=value2');
xhr.onreadystatechange=function(){
    if(this.readyState!==4) return;
    console.log(this.responseText);
};