第一次调用api，耗费了整个下午的时间，谨以这篇文章记录感想和教训。

 

效果图：

arkts 调用javascript函数_JSON

  

arkts 调用javascript函数_JSON_02

效果说明：点击按钮“新游记”，body、button 的背景颜色、字体颜色，都会改变。

 

html部分


1 <div class="container">
2 <div id="content">
3 <p id="infoTime"></p> <!--游记发表时间-->
4 <h1><a href='' id="showInfo"></a></h1><!--游记标题，及原文链接-->
5 <em id="infoSource"></em> <!--作者-->
6 </div>
7 <button id="getInfo">新游记</button>
8 </div>


JS部分

一. 创建XMLHttpRequest对象

首先创建了一个XMLHttpRequest对象。采用了try..catch语句，来兼容各浏览器。


var request=false;
try {
request=new XMLHttpRequest();
}catch(e1){
try {
request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e2){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e3){
alert("自由发挥");
}
}
}


二. 建立url并发送请求


var url="api接口地址?参数1&参数2";
request.open("GET",url,true);
request.setRequestHeader("apikey","your key");
request.onreadystatechange()=function() {
if (request.readyState==4){
if (request.status==200){
var response=request.responseText;
var responseJson=JSON.parse(response);
//后续代码见下一部分
}
}
};
request.send(null);


需要注意的几点：

  1. url的参数，以 "?" 开头，"&" 连接。如果参数值是除数字以外的字符，那么需要编码。编码函数有3种，在这里我用的是 encodeURIComponent(string)。举个例子：url="api 接口地址 ?num=1&page=1&word="+ encodeURIComponent('人民日报');
  2. 接收的数据是 JSON 格式，所以要用 JSON.parse 来将 JSON 字符串，转换为 JS 对象;
  3. 请在 request.send() 方法之前，将 setRequestHeader, onreadystatechange 回调函数，都设置好。如果是 POST 请求，request.send() 方法的参数就不再是 null 了。

 

三. DOM 获取 responseJson

可以看到前面我已经得到了 JS 对象 responseJson。

该 api 每次返回10条游记，但是我想只显示一条，点击“新游记”按钮，再显示下一条。

对象是这样一个格式：{ ...多个名/值对, "data": { "books": [{ "bookUrl": "url", "title": "游记标题","userName": "作者名", "startTime": "7445-05-24"},{ "bookUrl": "url", "title": "游记标题","userName": "作者名", "startTime": "7445-05-24"}], "count": 1000 } }

于是创建了两个变量 i 和 j。i 应用于获取 responseJson 对象数组中的数据，j 用于 url 参数值。

以下代码，向 <h1>的<a>标签传入游记标题。


var showInfo=document.getElementById("showInfo");
showInfo.innerHTML=responseJson.data.books[i].title;
i+=1;


当 i>9 时，j 会加1，然后作为 url 的参数，随 http 请求发送，获取新的10条游记。

 

四. 随机改变背景颜色和字体颜色

原理很简单，创建一个内容为十六进制颜色值得数组，随机取得数组值，在 JS 代码中，以 element.style.color=.. / element.style.backgroundColor=.. 的方式，改变窗口、按钮的背景颜色、字体颜色。在这里用到的是 Math.floor 和 Math.random 两个静态方法，前者对浮点数向下取整，而通过后者，能随机获得0~1之间的数据。

 

五. 调用 JS 代码


window.οnlοad=函数名; // 千万不要在函数名后加 ()
getInfo.οnclick=函数名; // getInfo 表示 button 元素


如果打开页面就加载的函数就一个，button 需要绑定的函数也就一个，上述代码是没问题的。如果要为事件绑定多个函数，那么代码就复杂了，具体内容之后再写吧。

 

结语

假如在发送 HTTP 请求时，都采用 GET 方式，那么整个调用过程会非常简单。当然，这只是在使用百度 apistore 提供的 api 时的情况。