动态的前后端的数据交互

方法一：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();