经过有人问天行数据能不能用AJAX获取,答案当然是没问题的,首先简单解释下什么是AJAX技术,AJAX是一种基于javascript的创建交互式网页应用的开发技术,最主要的目的是通过与后端通信进行网页的异步更新,也就是说在AJAX可以在网页无需重新刷新的情况下更新部分内容,极大提高了网页的交互体验。
使用AJAX请求数据,涉及到跨域请求时会出现"ajax请求不被接受。已阻止跨源请求"的提示,在HTML5中有个更为简便的解决方法,只需在返回的header响应头加上“Access-Control-Allow-Origin: *”即可,*即表示允许所有的跨域通信请求。支持IE10以上及其他例如WebKit内核等浏览器,如果有兼容IE的考虑则需使用JSONP跨域请求。
一,使用AJAX必须先加载jQuery库:
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
二,GET请求天行数据并循环遍历解析JSON的示例代码:
<script> $(document).ready(function(){ $('#button').click(function(){ $.ajax({ type:"GET", url:"http://api.tianapi.com/wxnew/?key=您的key&num=5&rand=1", dataType:"json", success:function(data){ var txapi="<ul>"; for(var i=0; i<5; i++) { txapi+="<li><img src='"+data["newslist"][i]["picUrl"]+"' width='80' height='50' /><a href='"+data["newslist"][i]["url"]+"' title='"+data["newslist"][i]["description"]+"'>"+data["newslist"][i]["title"]+"</a></li>"; } txapi+="</ul>"; $('#result').append(txapi); } }); return false; }); }); </script>
三,绑定一个按钮实现点击获取,效果如上图:
<div id="one"><p>AJAX获取JSON数据</p> <input class="button" type="button" id="button" value="点击确定" /> </div> <div id="result"></div>
另外,天行数据还增加了重置APIKEY密匙功能,登录个人中心点击“重置密钥”即可。