js ajax跨域请求之天气查询

js的跨域一直是个让人头疼的问题

老爸入了个新手机嫌弃自带天气查询不好 功能太多，于是就想用自己写一个简单的天气查询

所以先在pc端写了个demo

因为第一次在js跨域，之前听过js跨域就是坑，嗯，领悟到了。

=====================分割线=====================

废话不说，讲正事。

先贴代码：

btn.οnclick=function(){
		var place=$("#weather").val();//获取输入框内容
		var Url="http://www.sojson.com/open/api/weather/json.shtml?city="+place;Url前段为天气查询api，度娘给的~  city后面带的字段为uft8的UriEncode码
	    $.ajax({
	        url: 'http://query.yahooapis.com/v1/public/yql',
	        dataType: 'jsonp',
	        data: {
//	            q: "select * from json where url=\"http://www.sojson.com/open/api/weather/json.shtml?city=%E5%8C%97%E4%BA%AC\"", //url为要请求的地址
	            q: "select * from json where url=\"" +Url+"\"",
	            format: "json" 
	        },
	        success: function (d) {
//          	    alert(JSON.stringify(d))//远程json数据放在query.results下
//	            alert(d.query.results.json.status);
				$("#city").html(d.query.results.json.data.city);
				$("#date").html(d.query.results.json.data.forecast[0].date);
				$("#high").html(d.query.results.json.data.forecast[0].high);
				$("#fengli").html(d.query.results.json.data.forecast[0].fengli);
				$("#low").html(d.query.results.json.data.forecast[0].low);
				$("#type").html(d.query.results.json.data.forecast[0].type);
	        }
	    });
	}

查了下，解决js跨域问题常用的方案有

1、jsonp

2、设置代理

详情阅读：http://www.cnblogs.com/2050/p/3191744.html

可能会提出疑问，我这个案例用了什么？基于jsop的代理呀~

这是个yahoo提供的jsonp代理。

代理地址：http://query.yahooapis.com/v1/public/yql

然后再传送数据贴上：

q: "select * from json where url=\"" +Url+"\"",

format: "json" 

Url为你的请求域

关于yahoo jsop代理详情：http://www.w3dev.cn/article/20130228/JSONP-crossdomain-online-httpproxy-api.aspx

好了~差不多就这样了

demo源码下载：https://github.com/2b0x/weather-forcast