在Ajax中调用别人的接口会触发到一个叫跨域的问题。那么什么叫跨域呢？跨域是指从一个域名的网页去请求另一个域名的资源。JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象，因此我们有时候我们又需要调用一些api提供的接口，这个时候就会遇到一个跨域的问题了。解决跨域的方法很多，这里我用到的是配合php解决跨域问题，首先我们可以选择把接口引入到php里读取，然后再返回到html里，我们再去请求php页面也就没有了同源策略。
今天我朋友给我提供了一个网站接口，我用这个接口调用了一个数据，简单的做了一个Ajax的demo例子。效果如图所示：
完整的例子代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
ul{ width: 690px;
float: left;
font-size: 12px;
color: #838383;
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
li {
list-style: none;
margin-bottom: 20px;
padding: 10px;
background-color: #F6F6F6;
box-shadow: 1px 3px 9px #ccc;
border-radius: 4px;
overflow: hidden;
}
body{
font: 16px/1 "Microsoft yahei",arial;
}
h2{ font-size: 15px;
color: #312424;
font-weight: bold;
}
.dateview{
padding: 8px 0px 8px 18px;
margin-top: 4px;
font-size: 12px;
}
.dateview span{
margin-right: 20px;
}
.es_img {
width: 183px;
float: left;
overflow: hidden;
}
.es {
float: left;
width: 475px;
margin: 10px 0px 0 10px;
line-height: 20px;
}
.es a {
background: #fd8a61;
color: #fff;
padding: 5px 10px;
float: right;
margin: 20px 0 0 0;
border-radius: 3px;
}
</style>
</head>
<body>
<ul id="wrap">
</ul>
<script type="text/javascript">
var oWrap=document.getElementById('wrap');
var xHttp = null;
if(window.XMLHttpRequest){
xHttp =new XMLHttpRequest();//除了IE6以外的浏览器
}else{
xHttp =new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器
}
xHttp.open("post","index.php",true);//以post的方式发送
xHttp.send(null);
xHttp.onreadystatechange = function(data) {
if(xHttp.readyState == 4 && xHttp.status == 200) {
var oData = JSON.parse(data.currentTarget.response);//把字符串转换成json对象
console.log(oData);
for(var i=0;i<oData.data.length;i++){
var oLi=document.createElement("li");
cleLi(oData.data[i]);
}
}
}
function cleLi(dat){
var oLi=document.createElement("li");//创建li
var oHtml='<h2>'+dat.title+'</h2>'+
'<p>'+
'<span>'+dat.time+'</span>'+
'<span>作者：'+dat.name+'</span>'+
'<span>分类：[<a href="###">'+dat.type+'</a>]</span>'+
'</p>'+
'<div>'+
'<img src="http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg">'+
'</div>'+
'<div>'+
'<p>'+dat.cont_describe+'</p>'+
'<a href="###" target="_blank">阅读全文</a>'+
'</div>'
oLi.innerHTML=oHtml;
oWrap.appendChild(oLi);
}
</script>
</body>
</html>这里是php代码，php的文件名为：index.php 和demo是在同一个目录下。
<?php
header("Content-Type:text/html;charset=utf8");//设置字符集
$url = "http://www.hk3433.com/json/json.php?serviceId=5&actionId=1";
$content = file_get_contents($url);//获取http内容
echo $content; //输入内容
?>欢迎大家留言，如有疑问或者写的不对的地方，欢迎指出。