方法一:jsonp
JSONP原理:
浏览器只对XHR(XMLHttpRequest)请求有同源请求限制,而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制,利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的,当向第三方站点请求时,我们可以将此请求放在
//数据渲染:
function getData(data) {
// data 数组
/*data.forEach(function (item,index) {
list.innerHTML += '<li><img src="'+item+'" alt=""></li>'
})*/
}
//jsonp函数:
createJsonp();
function createJsonp() {
var s = document.createElement('script');
s.src ='http://tanzhouweb.com/taobao/tbData.php?title=banner&jsonp=getData';
document.body.appendChild(s);
}
方法二:jQuery的ajax
$.get(
'http://tanzhouweb.com/taobao/tbData.php',
{
title:'banner'
},
function (data) {
//console.log( data ); // 字符串
JSON.parse(data).forEach(function (item,index{
list.innerHTML += '<li><img src="'+item+'" alt=""></li>'
})
}
);
方法三:原生ajax
var xhr = new XMLHttpRequest();
xhr.onreadystatechange= function () {
if(xhr.readyState===4){
if(xhr.status>=200&&xhr.status<300||xhr.status===304){
console.log( JSON.parse(xhr.response) );
}
}
}
xhr.open('get','http://tanzhouweb.com/taobao/tbData.php?title=banner',true);
xhr.send();