实现天气预报功能
2013-08-05 22:58
816 查看
闲来无聊,写下此文
经常看见很多网站上有那种天气预报功能,自己之前也写过一个,不过属于那种涉及WCF服务引用那种,今天发现一个更为简单的方式来实现,使用Javascript和Ajax技术,极少后台代码,具体好与不好各位看官看了再说,尽管拍砖、、、前置条件
作为程序员的我们木有天气数据,那些天气预报的数据肯定都来自中国气象局,我们需要采集相关数据到我们本地进行相应的处理,这里提供一个采集网址:http://www.weather.com.cn/data/cityinfo/101200101.html在这个网址中有气象中心提供的相关数据,不过都是Json格式,有了数据就好办多了,接下来我们就来编码,弱弱的写下了如下JS代码:
<script type="text/javascript"> var xmlHttpRequest = null; //创建XMLHttpRequest function createXmlHttpRequest() { if (window.XMLHttpRequest) { xmlHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } } //调用Ajax function sendRequest(url) { if (xmlHttpRequest) { xmlHttpRequest.open("GET", url, true); xmlHttpRequest.onreadystatechange = onCallBack; xmlHttpRequest.send(null); } } //返回操作结果 function onCallBack() { if (xmlHttpRequest.readyState == 4) { if (xmlHttpRequest.status == 200) { if (xmlHttpRequest.responseText != "") { json = xmlHttpRequest.responseText; } else { alert("失败"); } } else { alert("读取失败"); } } } function Test() { createXmlHttpRequest(); //创建XMLHttpRequest对象 var url = "http://www.weather.com.cn/data/cityinfo/101010100.html"; //操作的文件 sendRequest(url, encodeURI(null)); var jsonList = eval("(" + json + ")"); //获取Json alert(jsonList); } </script>
通过这段Ajax调用,理论上我们可以获取到气象中心的天气预报数据,这段代码也完全木有错误,可是运行你就会发现弹出“读取错误”,很奇怪吧?为了让我们看到问题所在,我换一种方式,在浏览器地址栏输入第36行的地址,保存该网页到本地所建的项目中,然后将以上第36行代码改为刚保存网页所在路径,接着运行你会发现正确获取到了数据。这说明了一个问题,使用Ajax不可访问其他域的内容,也就是俗说的跨域问题,需要知道的一点是:Ajax是无法跨域的。好吧,我承认我很菜,直到写这篇随笔的时候我才发现这个问题,而且还弱弱的弄了好久,以为是自己的代码有问题,大神们见笑了!
怎么解决这里的Ajax跨域问题呢?
在网上搜索了很多,也看到了一系列这样的提问与回答,可是好多都是两个域我们都可以控制那种,而现在我面临的这个是我只能修改我这边的代码,数据端我无法修改任何东西。真的很纠结,最后使用JS还是无法完成,于是选择了后台代码,希望看到此文的大神给个提示,感激!给出具体代码,其实说句实话,我自己都觉得弱爆了,觉得垃圾的尽管拍砖吧!!!
前端HTML+JavaScript代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Weather.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>天气预报</title> <style type="text/css"> </style> <script type="text/javascript"> var xmlHttpRequest = null; //创建XMLHttpRequest function createXmlHttpRequest() { if (window.XMLHttpRequest) { xmlHttpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } } //调用Ajax function sendRequest(url) { if (xmlHttpRequest) { xmlHttpRequest.open("GET", url, true); xmlHttpRequest.onreadystatechange = onCallBack; xmlHttpRequest.send(null); } } //返回操作结果 function onCallBack() { if (xmlHttpRequest.readyState == 4) { if (xmlHttpRequest.status == 200) { if (xmlHttpRequest.responseText != "") { json = xmlHttpRequest.responseText; } else { alert("失败"); } } else { alert("读取失败"); } } } function Test() { createXmlHttpRequest(); //创建XMLHttpRequest对象 var citys = document.getElementById("citys"); var index = citys.selectedIndex; var cityid = citys[index].value; var url = "MyHandler.ashx?city=" + cityid; //操作的文件 sendRequest(url, encodeURI(null)); var jsonList = eval("(" + json + ")"); //获取Json var weathernow = document.getElementById("weather"); weathernow.innerHTML = jsonList[0]["weather"]; var temp = document.getElementById("temp"); temp.innerHTML=jsonList[0]["temp1"]+"~"+jsonList[0]["temp2"]; } </script> </head> <body> <form id="form1" runat="server"> <div> <p> <span>天气情况:</span><img src="#" alt="" /> <span id="weather">天气</span> <span id="temp">温度</span> </p> <p> <span>选择城市:</span> <select id="citys"> <option value="101200101">武汉</option> <option value="101010100">北京</option> <option value="101020100">上海</option> <option value="101280101">广州</option> </select> <input type="button" value="查询天气" onclick="Test()" /> </p> </div> </form> </body> </html>
View Code
后台一般应用处理程序代码
/// <summary> /// MyHandler 的摘要说明 /// </summary> public class MyHandler : IHttpHandler { private WebClient webclient = new WebClient(); public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string cityid = context.Request.QueryString["city"];//101200101 string alldata = Weather("http://www.weather.com.cn/data/cityinfo/" + cityid + ".html").Substring(15); string data = '['+alldata.Substring(0, alldata.Length - 1)+']'; context.Response.Write(data); } public bool IsReusable { get { return false; } } public string Weather(string url) { Uri uri = new Uri(url); WebRequest webrequest = WebRequest.Create(url); Stream myStream = webclient.OpenRead(uri); StreamReader reader = new StreamReader(myStream, System.Text.Encoding.UTF8); return reader.ReadToEnd(); } }
运行的结果如图所示:
现在我们可以很容易的查询天气情况了,不过有一点不是蛮好,是不是该弄个图标更直观呢???好吧,于是有经过简单的处理,得到了如下截图:
好的,本次随笔就到这里吧,本来想单纯的使用JS来实现的,对于跨域相关的知识不是蛮了解所以纠结了好久,虽然还是没有解决但至少通过这次随笔理解了跨域相关的问题。
简单结尾
留下一个问题:有两个不同的域A和B,现在B中有一个页面有A需要的数据,但是无法操作B的任何对象,如何实现?(大神看见,求解惑!)最近实习有点不顺,总感觉这样的实习意义不大,而且感觉自学的效果还会更好些,同时也在纠结一个问题自己具体该走哪个方向、、、
------如果你觉得此文对你有所帮助,别忘了点击下右下角的推荐咯,谢谢!------
相关文章推荐
- android使用soap协议访问webservice实现天气预报功能
- Java中使用WebService实现简单的天气预报功能
- 用WebService实现调用新浪的天气预报功能
- ASP.NET使用WebService实现天气预报功能
- 微信订阅号天气预报功能的实现(java版)
- Java WEB天气预报功能实现
- Angular实现的简单查询天气预报功能示例
- Jquery和雅虎的YQL服务实现天气预报功能!
- 天气预报--保存已查询城市,历史记录功能实现
- ASP.NET使用WebService实现天气预报功能
- .net请求Webservice简单实现天气预报功能
- 微信小程序开发——实现天气预报小功能
- 天气预报--保存已查询城市,历史记录功能实现
- delphi Indy 实现天气预报功能
- android使用soap协议访问webservice实现天气预报功能
- 微信小程序实现天气预报功能
- Flex 调用WEBService 接口实现天气预报功能.
- 基于HTML5 geolocation 实现的天气预报功能
- 天气预报功能--查询广州天气的实现
- Web服务入门之二:通过axis2调用远程Web Service,实现天气预报功能