使用Ajax、jsonp实现跨域请求调用心知天气API

目录：

 一、什么是跨域请求

 二、跨域请求的常用解决办法

 1、在服务器端进行返回数据设置

 2、利用jsonp进行调用

 3、代理

 4、利用Python爬虫

 三、利用jsonp调用心知天气API实例

  1、代码处理

  1）注册心知天气获取uid和key

  2）了解src格式，准备相应的字符串拼接工作

  3）进行数据的加密处理

  4）构建ajax请求

2、本地验证

 1）部署本机服务器环境

  2）设置修改本机host文件

  3）在浏览器中访问测试

 一、什么是跨域请求

  比较专业的说法是，浏览器都默认开启了同源策略，这是指Ajax请求的所在页面和被请求的页面，域名、协议、端口 等均相同。所以我们在调用接口时，经常会出现跨域请求问题。

  通俗点来讲，就是你虽然请求到了数据，但是你的浏览器发现来的是隔壁老王，甚至是其他家属院的老王，浏览器觉得

不安全，所以不让你用。

 二、跨域请求的常用解决办法

  如果想看详细较全的解决办法，可以参考点击打开链接，本文只讲博主了解或使用过的方法

 1、在服务端进行设置返回数据

以Python为例：在view.py的返回函数里加入

response['Access-Control-Allow-Origin']='*'

 这段函数的意义在于，它告诉请求者的浏览器，返回的数据是安全的

 2、利用jsonp进行调用

首先先解释一下什么是jsonp：

 jsonp是Json的一种“使用模式”，它是利用<script>标签没有跨域限制这一特性（没有跨域限制特性的标签常见的

有仨script/link/img）来进行数据的访问，

通讯的时候，相当于创建一个<script>标签，地址指向第三方的API网址，常见形式为

<script src="---API地址-----"></script>

<script type="text/javascript" src="https://api.seniverse.com/v3/weather/now.json?location=beijing&ts=1443079775&ttl=30&uid=[your_uid]&sig=[your_signature]&callback=showWeather"></script>//心知天气官方示例

  不过大多时候，我们都需要用JavaScript进行src里面的地址的字符串拼接，为了安全和盈利，很多API的调用都是  需要账号和密码的，甚至是时间数据，包括需要返回的数据等，而这些都需要写入src，所以要对这个写入的字符串进行一  定的处理，处理完成之后，利用ajax发送请求（当然，新手同志们不要忘了引入jQuery才能使用）
 

		 $.ajax({
		 	type:"get",
		 	async:false,
		 	cache:false,
		 	url:url,//此处的url是我已经处理好的src字符串
		 	dataType:"jsonp",
		 	jsonp:"callback",
		 	jsonpCallback:"showWeather",
		 	success:function(json){
		 		console.log(json);
		 	},
		 	error:function(){
		 		alert('fail');
		 	}
		 });

还要注意的是jsonp目前只能支持GET调用，不支持POST

3、代理

 在本文的前面，我们也讲到，跨域请求问题是你的浏览器不让你使用这些数据，原因是它和你的东西没有“血脉关系”，

所以我们可以绕过浏览器，利用后台进行数据接口访问，然后把得到的数据传递到前端页面，举个例子：

 比如www.a.com/index.html需要调用www.b.com/server.php，可以写一个接口www.a.com/server.php，然后由这

个接口去调用www.b.com/server.php，得到返回值，然返回给index.html

4、利用Python爬虫

 这是我在想办法解决接收json格式返回数据的时候，遇到跨域请求问题，和同学讨论后，设想的一种方法，因为目前还没学多少Python，使用暂时先写到这里，

学习之后，进行实验。

 这个方法大致是这样，我们发送的这个链接，一般打开之后，都是一些json数据

这个是可以由Python爬虫爬下来，生成文档，然后我们在HTML里调用即可

三、利用jsonp调用心知天气API实例

1、代码处理

 1）注册心知天气获取uid和key

 基本操作，顺便可以研究研究心知天气API说明文档

 2）了解src格式，准备相应的字符串拼接工作

  这一块就相对较复杂下面是我根据心知天气的要求进行的字符串拼接

     var UID = '**************';
		 var KEY = '**************';
		 var API = "https://api.seniverse.com/v3/weather/now.json";
		 var LOCATION = "Kaifeng";

		 var ts = Math.floor((new Date()).getTime()/1000);
		 var str = "ts="+ts+"&uid="+UID;
		 //拼接传参的字符串
		 //加密
		 var sig = CryptoJS.HmacSHA1(str,KEY).toString(CryptoJS.enc.Base64);
		 str = str+"&sig="+sig;

		 var jsonpCallback = function(data){
		 	var obj = document.getElementById('content');
		 	var weather = data.results[0];

		 	var text = [];
		 	text.push("Location:"+weather.location.path);
		 	text.push("Weather:"+weather.now.text);
		 	text.push("Temperature:"+weather.now.temperature);
		 	obj.innerText =text.join("\n");
		 }

		 //构造最终请求的url
		 var url = API +"?location="+LOCATION+"&"+str+"&callback=showWeather";

 3）进行数据的加密处理

如2中代码块

		 var sig = CryptoJS.HmacSHA1(str,KEY).toString(CryptoJS.enc.Base64);
		 str = str+"&sig="+sig;

  这一段是引用了一个CryptoJS库，对我们的KEY进行加密处理，CryptoJS库是俩文件夹，放到目录后，引用的相关代码是

<script src="components/core.js"></script>
    <script src="components/md5.js"></script>
    <script src="components/evpkdf.js"></script>
    <script src="components/enc-base64.js"></script>
    <script src="components/cipher-core.js"></script>
    <script src="components/aes.js"></script>
    <script src="components/hmac.js"></script>
    <script src="components/sha1.js"></script>
    <script src="components/sha256.js"></script>

 4）构建ajax请求

接2中的代码

		 //使用ajax发出请求
		 $.ajax({
		 	type:"get",
		 	async:false,
		 	cache:false,
		 	url:url,
		 	dataType:"jsonp",
		 	jsonp:"callback",
		 	jsonpCallback:"showWeather",
		 	success:function(json){
		 		// console.log(json);
		 		// console.log(json.results[0].now.temperature);
		 		var $item = $('<p class="resulttext" >平均温度：'+json.results[0].now.temperature+'℃</p>');
		 		$('.weather').append($item);
		 	},
		 	error:function(){
		 		alert('fail');
		 	}
		 });

 

 2、本地验证 

  1）部署本机服务器环境

  我在本地使用的是以前无意间部署的UPUPW环境，个人比较推荐WAMP环境，不过无论是哪个环境，我们执行的操作都大

致相同首先是把我们写好的代码和调用的JQ、CryJS等文件放入本地服务器里，配置虚拟主机，然后重启服务器，不过一般的

 一键环境安装包都是配置好的。

  2）设置修改本机host文件

  本机host文件位置是在c:\windows\system32\drivers\etc，我们用文本编辑软件打开之后，把127.0.0.1对应的

localhost改成一个“看似正常的域名”，比如我的改成了c.testttt.com，然后，一件很重要的事情，我们需要在心知

 天气的个人信息页面里，添加一下刚刚我们更改后的域名！

  3）在浏览器中进行访问

 这时候就可以在浏览器中输入c.testttt.com访问我们的页面进行测试啦！