fly6022
文章9
标签17
分类3
XMLHttpRequest请求API实例

XMLHttpRequest请求API实例

API(应用程序接口)在前端开发过程中起到了举足轻重的作用,利用Web API中的XMLHttpRequest对象可以便于我们对API的调用。请求API的方式有很多,本文为大家提供一个比较简单的范例。

本文内容所用语言若无特别说明均为JavaScript,且本文所提供的方法作用域不包含IE浏览器这类比较老旧的浏览器。

首先,构造一个函数XMLHttpRequest()得到实例对象。

1
XHR = new XMLHttpRequest();

其次,调用open()方法,该方法提供了三个参数:请求类型(GETPOST等)、请求的目标链接(也就是我们需要请求的API地址)以及是否发送异步请求的布尔值(由于XMLHttpRequest默认为异步请求,所以该布尔值默认为``true```)。

这里以“API服务,天气API - 帮!”网站提供的天气API接口作为例子,它支持使用GET方法调用,并且不需要Token。

该API的接口地址为//api.help.bj.cn/apis/weather/?id=101060101,id为城市代码(长春)。

1
XHR.open('GET', '//api.help.bj.cn/apis/weather/?id=101060101');

事实上,大多数情况下,为了适应更多情况,我们是这样写的:

1
2
3
citycode = '101060101'; // 假设citycode是通过表单提交的

XHR.open('GET', '//api.help.bj.cn/apis/weather/?id=' + String(citycode), true);

之后发送一个null参数。

1
XHR.send(null);

使用Javascript的JSON.parse()方法处理传入的JSON数据。

1
2
3
4
5
6
7
XHR.onload = function() {

json = JSON.parse(XHR.response)

console.log(json);

}

正常情况下,获取到的数据格式(XHR.response)应为:(以下格式内容来自API官网,为示例内容)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"status": "0", //反馈代码 0成功
"msg": "反馈信息", //反馈信息
"cityen": "changchun", //城市名称英文
"city": "长春", //城市名称
"citycode": "101060101", //城市编码
"temp": "10", //实时温度
"tempf": "50", //华氏温度
"wd": "西风", //风向
"wden": "W", //风向英文
"wdforce": "3级", //风力
"wdspd": "<12km/h", //风速
"uptime": "12:00", //更新时间
"weather": "晴", //天气状况
"weatheren": "Sunny", //天气状况英文
"weatherimg": "d00", //天气状况图标
"stp": "994", //气压
"wisib": "35000", //能见度
"humidity": "46%", //湿度
"prcp": "0", //降雨
"prcp24h": "2.2", //24小时降雨量
"aqi": "22", //AQI
"pm25": "20", //PM2.5
"today": "10月17日(星期一)" //今天日期
}

处理过后的json(将其转换为了对象):

1
Object { status: "0", cityen: "changchun", city: "长春", citycode: "101060101", temp: "19", tempf: "66", wd: "东南风", wden: "SE", wdenimg: "//www.help.bj.cn/weather/images/wind/se.png", wdforce: "2级", … }

下面是范例代码的全部内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
XHR = new XMLHttpRequest();

citycode = '101060101'; // 假设citycode是通过表单提交的

XHR.open('GET', '//api.help.bj.cn/apis/weather/?id=' + String(citycode), true);

XHR.send(null);

XHR.onload = function() {

json = JSON.parse(XHR.response)

console.log(json);

}
本文作者:fly6022
本文链接:https://blog.fly6022.fun/posts/XMLHttpRequest%E8%AF%B7%E6%B1%82API%E5%AE%9E%E4%BE%8B/
版权声明:本文采用 署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0) 协议进行许可,转载请注明原出处。
×