前端XMLHttpRequest发送后端接口请求和获取响应

发送请求open(method, url, async) 用于调用HTTP请求

method: 请求的方式，get还是post（不区分大小写，一般用大写）

url: 请求的地址（可以是相对或绝对地址）

async: 请求是同步还是异步的，一般AJAX使用异步（true），且默认为true。

send(string) 发送请求到服务器

get时，参数可不填写，因为都写在url中

post时，参数一定要填写

例子：

request.open("GET", "get.php", true);
request.send();

request.open("POST", "post.php", true);
request.send();//这里是POST但是没给出参数，实际应用很少

request.open("POST", "create.php", true");
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=王二狗 & sex=男");

获取响应

responseText: 获得字符串形式的响应数据

responseXML: 获得XML形式的响应数据（用的较少，大多数情况用JSON）status,

statusText: 以数字和文本形式返回HTTP状态码

getAllResponseHeader(): 获取所有的响应报头

getResponseHeader(参数): 查询响应中某个字段的值属性

readyState: 响应是否成功

0：请求为初始化，open还没有调用

1：服务器连接已建立，open已经调用了

2：请求已接收，接收到头信息了

3：请求处理中，接收到响应主题了

4：请求已完成，且响应已就绪，也就是响应完成了；

监听该属性的变化：

var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
//该属性每次变化时会触发
request.onreadystatechange = function(){
    //若响应完成且请求成功
    if(request.readyState === 4 && request.status === 200){
        //do something, e.g. request.responseText
    }
}

完整写法：

<script>
    function sendSmsCheckCode() {
        //获取手机号表单的值 获取页面中的元素 #id
        var idvalue = document.getElementById("wenben");
        console.log("id: " + idvalue.value); //打印信息
        
        //发送请求 请求 url路径（user/phonecode） + 参数（?phone=17821222322）
        var url = 'http://localhost:8080/user/phonecode?phone=' + idvalue.value;
        console.log("url: " + url); //打印信息
        
        var request = new XMLHttpRequest();
        request.open("GET",url,false);//false同步接收 //true异步
        request.send(); //调用send 请求发送任务
        console.log("status接收状态: " + request.status); //打印信息
        console.log("status.接收信息: " + request.responseText); //打印信息
        console.log("request.onload: " + request.onload); //打印信息
        
        
        request.onreadystatechange = function() {//定义返回接收
            if (request.status == 200) {
            console.log("接收数据成功: " + request.responseText); //打印信息
            console.log("接收数据: " + request.readyState); //打印信息
            
            } else {
            console.log("接收数据: " + request.readyState); //打印信息
            
            }
            
        }
    }
	</script>