第一次代码中用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>
报的错误是
从网上搜到的解释
请求到数据是一个纯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 }