前端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>
83 Views
分享你的喜爱
默认图片
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论