javascript原生实现http get和post
作者:互联网
httpRequest.readyState状态码参照表
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | 代理被创建,但尚未调用 open() 方法。 |
1 | OPENED | open() 方法已经被调用。 |
2 | HEADERS_RECEIVED | send() 方法已经被调用,并且头部和状态已经可获得。 |
3 | LOADING | 下载中; responseText 属性已经包含部分数据。 |
4 | DONE | 下载操作已完成。 |
1. Get方法
// 用我自己的接口做演示
// 接口地址 : https://api.wer.plus
<script>
// 建立一个req对象
var httpRequest = new XMLHttpRequest();
// 使用方法GET,参数url,默认true,建立连接,true表示是异步
httpRequest.open('GET', 'http://api.wer.plus:8080/api/today?token=949aa9b7d39715aa6d32ac77e0c00a0a', true);
// 发送请求
httpRequest.send();
// onreadystatechange表示当以上请求的状态码发生改变后再触发函数
httpRequest.onreadystatechange = function () {
// httpRequest.readyStat表示请求的状态,4为成功下载请求结果
// httpRequest.status 并且请求的状态码为200时,认为请求成功
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 接收
var json = httpRequest.responseText;
console.log(json);
alert(json);
}
};
</script>
2. Post方法
// 用我自己的人脸识别接口做演示
// 接口地址 : https://api.wer.plus
<script>
// 建立一个req对象
var httpRequest = new XMLHttpRequest();
// 使用方法POST,参数url,默认true,建立连接,true表示是异步
httpRequest.open('POST', 'http://api.wer.plus:8080/api/renlian', true);
// 发送请求,构造json
var data={"token":"949aa9b7d39715aa6d32ac77e0c00a0a","data":"https://desk-fd.zol-img.com.cn/t_s960x600c5/g3/M07/0C/0D/Cg-4WFRkT2uIA168AAYiHQAdV8oAARQQgMt1iwABiI1525.jpg"}
// 格式化json
var stringData=JSON.stringify(data);
// 定义请求头
httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 发送json数据
httpRequest.send(stringData);
// onreadystatechange表示当以上请求的状态码发生改变后再触发函数
httpRequest.onreadystatechange = function () {
// httpRequest.readyStat表示请求的状态,4为成功下载请求结果
// httpRequest.status 并且请求的状态码为200时,认为请求成功
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 接收数据
var json = httpRequest.responseText;
console.log(json);
alert(json);
}
};
</script>
标签:httpRequest,http,请求,get,javascript,json,api,var,true 来源: https://www.cnblogs.com/ymer/p/16251893.html