跨域简介

跨域是指不用域之间相互请求资源,只要协议，主机名，端口号，二级域名等不同都算跨域。

浏览器认为多数由js程序发起的跨域请求都是不合法的，主要为xhr，但不由js发起的跨域是允许的，包括：img，link，script，iframe；

JSONP

• JSON with Padding 填充式 json

正常的ajax请求是不允许跨域请求的，只能用允许跨域请求的元素script代替

• 处理步骤

  1. 客户端定义一个专门处理相应的有名函数doResponse(处理函数中仅接受并处理服务端json数据,不用xhr对象，更不用判断状态)
  2. 服务器端php: 接受请求数据并处理,返回一条js语句echo ‘doResponse($json)’;
  3. 动态创建一个script元素,设置src指向服务器端的php地址

  客户端js:

  function doResponse(resp){
  			console.log(resp);
  			for(var i in resp){
  				console.log(i);
  			}
  		}
  $("#btn").click(function() {
    /*动态追加script元素*/
    $("body").append(`<script src="http://127.0.0.1/jsonp.php?callback=doResponse"><\/script>`);
  		});
  

  也可以采用ajax获得返回数据

  $.getJSON("https://www.haohome.top/demo/jsonp.php?callback=doResponse",data=>{
    console.log(data);
  });
  $.ajax({
    type:"GET",
    url:"https://www.haohome.top/demo/jsonp.php?callback=doResponse",
    success:data=>{
      console.log("返回数据",data);
    },
    dataType:"jsonp"
  })			
  

  服务器端php:

  header("Content-type:application/javascript;charset:utf-8");
  $getData=$_GET['callback'];
  $hello=json_encode([1,2,3,4]);
  echo $getData."('$hello')";