跨域请求json数据

第一次代码中用json请求数据

<html>
<meta charset="utf8">
<head>
</head>

<body>
<input type="button" value="获取JSON数据" onclick="getInfo()" />
</body>
<script src="jquery-3.0.0.js"></script>
<script>
function getInfo(){
  $.ajax({
    type:"post",
    url:"https://kycp5.com/lotteryV2/lotV2Op.do?lotCode=CQSSC",
    async:true,
    dataType:"json",
    success: function(data){
      data = JSON.parse(data);
      console.log(data);
    }
  })
}
</script>
</html>

报的错误是

XMLHttpRequest cannot load https://kycp5.com/lotteryV2/lotV2Op.do?lotCode=CQSSC. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

第二次代码中用jsonp请求数据

<html>
<meta charset="utf8">
<head>
</head>

<body>
<input type="button" value="获取JSON数据" onclick="getInfo()" />
</body>
<script src="jquery-3.0.0.js"></script>
<script>
function getInfo(){
  $.ajax({
    type:"post",
    url:"https://kycp5.com/lotteryV2/lotV2Op.do?lotCode=CQSSC",
    async:true,
    dataType:"jsonp",
    success: function(data){
      data = JSON.parse(data);
      console.log(data);
    }
  })
}
</script>
</html>

报的错误是

 Uncaught SyntaxError: Unexpected token :
lotV2Op.do?lotCode=CQSSC&callback=jQuery3000780…_1498482112702&_=1498482112703
 
 从网上搜到的解释
请求到数据是一个纯Json格式的话，是不能用Jsonp方式调用的，
支持Jsonp方式的url返回的一定是js脚本，一般是一句函数调用，
请注意第二种方法中报的错是callback=，=号后面的就是你得到的，
 
callback是客户端页面定义的函数名，JSONP方式会在返回的
Javascript代码里面调用这个函数，JSON数据是当做参数传入方法的
而不是直接返回一个json。
这个地址不支持jsonp,请求来的数据是json,浏览器要把当做Javascript
来解析，遇到 ":" 就报错了。
如果这个地址支持JSONP,应该返回Javascript代码，在代码里面调用
callback函数才对。
 
API出现增强富web应用开发的体验，曾经想通过跨域请求api非常困难
可以使用json-p这样的技术(有安全限制)或者自己搭建服务器。
 
跨域资源共享CORS是一种W3C的规范，允许浏览器进行跨域通信，
通过设置XMLHttpRequest对象，CORS允许开发者像发起同域请求
那样发起跨域请求。
 
A网站想要访问B网站上的一些数据，这种请求是被同源策略所禁止的，
然而，使用CORS，B网站增加些特殊响应头可以允许来自A网站的请求。
 
因此，使用CORS需要服务器和客户端之间相互了解，幸运的是，
如果你是一位客户端开发者，你可以忽略里面的很多细节。
 
使用javascript进行跨域请求
1、创建XMLHttpRequest对象
chorme浏览器，火狐，Opera和Safari都使用XMLHttpRequest对象。
Internet Explorer使用XDomainRequest对象，有和XMLHttpRequest对象
差不多的功能，但是增加了额外的安全防范措施。
有个辅助方法来兼容不同浏览器
 1 function createCORSRequest(method, url) {
 2   var xhr = new XMLHttpRequest();
 3   if ("withCredentials" in xhr) {
 4 
 5     // Check if the XMLHttpRequest object has a "withCredentials" property.
 6     // "withCredentials" only exists on XMLHTTPRequest2 objects.
 7    // "withCredentials"只存在XMLHTTPRequest2对象中
 8     xhr.open(method, url, true);
 9 
10   } else if (typeof XDomainRequest != "undefined") {
11 
12     // Otherwise, check if XDomainRequest.
13     // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
14     xhr = new XDomainRequest();
15     xhr.open(method, url);
16 
17   } else {
18 
19     // Otherwise, CORS is not supported by the browser.
20     xhr = null;
21 
22   }
23   return xhr;
24 }
25 
26 var xhr = createCORSRequest('GET', url);
27 if (!xhr) {
28   throw new Error('CORS not supported');
29 }

 

 
 
 
 
 
 
​

 

posted @ 2017-06-26 21:03  guoyinglichong  阅读(5484)  评论(0)  编辑  收藏  举报