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>