天行博客

经过有人问天行数据能不能用AJAX获取，答案当然是没问题的，首先简单解释下什么是AJAX技术，AJAX是一种基于javascript的创建交互式网页应用的开发技术，最主要的目的是通过与后端通信进行网页的异步更新，也就是说在AJAX可以在网页无需重新刷新的情况下更新部分内容，极大提高了网页的交互体验。

使用AJAX请求数据，涉及到跨域请求时会出现"ajax请求不被接受。已阻止跨源请求"的提示，在HTML5中有个更为简便的解决方法，只需在返回的header响应头加上“Access-Control-Allow-Origin: *”即可，*即表示允许所有的跨域通信请求。支持IE10以上及其他例如WebKit内核等浏览器，如果有兼容IE的考虑则需使用JSONP跨域请求。

一，使用AJAX必须先载jQuery库，这里建议使用例如百度提供的免费CDN加速前端公共库：

<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>