httpRequest.readyState状态码参照表

状态 描述
0 UNSENT 代理被创建,但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用。
2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得。
3 LOADING 下载中; responseText 属性已经包含部分数据。
4 DONE 下载操作已完成。

1. Get方法

// 用我自己的接口做演示
// 接口地址 : https://api.wer.plus


// http异步请求模板----
<script>
httpweb=(url,mbt,ev)=>{
    const httpRequest = new XMLHttpRequest();
    // 使用方法GET,参数url,默认true,建立连接,true表示是异步
    httpRequest.open(mbt, url, 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);
            ev(json)
        }else{
            ev(false)
        }
    };
}
// 调用函数
httpweb('http://api.wer.plus:8080/api/today?token=949aa9b7d39715aa6d32ac77e0c00a0a','GET',function(data){
  console.log(data);
}
)
</script>


// http同步请求模板----
<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>