Java教程

javascript原生实现http get和post

本文主要是介绍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>
这篇关于javascript原生实现http get和post的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航