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>