Ajax实现天气预报功能
实现天气预报功能
闲来无聊，写下此文
经常看见很多网站上有那种天气预报功能，自己之前也写过一个，不过属于那种涉及WCF服务引用那种，今天发现一个更为简单的方式来实现，使用Javascript和Ajax技术，极少后台代码，具体好与不好各位看官看了再说，尽管拍砖、、、
前置条件
作为程序员的我们木有天气数据，那些天气预报的数据肯定都来自中国气象局，我们需要采集相关数据到我们本地进行相应的处理，这里提供一个采集网址：http://www.weather.com.cn/data/cityinfo/101200101.html
在这个网址中有气象中心提供的相关数据，不过都是Json格式，有了数据就好办多了，接下来我们就来编码，弱弱的写下了如下JS代码：
1 <script type="text/javascript">
2 var xmlHttpRequest = null;
3 //创建XMLHttpRequest
4 function createXmlHttpRequest() {
5 if (window.XMLHttpRequest) {
6 xmlHttpRequest = new XMLHttpRequest();
7 } else if (window.ActiveXObject) {
8 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
9 }
10 }
11 //调用Ajax
12 function sendRequest(url) {
13 if (xmlHttpRequest) {
14 xmlHttpRequest.open("GET", url, true);
15 xmlHttpRequest.onreadystatechange = onCallBack;
16 xmlHttpRequest.send(null);
17 }
18 }
19 //返回操作结果
20 function onCallBack() {
21 if (xmlHttpRequest.readyState == 4) {
22 if (xmlHttpRequest.status == 200) {
23 if (xmlHttpRequest.responseText != "") {
24 json = xmlHttpRequest.responseText;
25 } else {
26 alert("失败");
27 }
28 } else {
29 alert("读取失败");
30 }
31 }
32 }
33
34 function Test() {
35 createXmlHttpRequest(); //创建XMLHttpRequest对象
36 var url = "http://www.weather.com.cn/data/cityinfo/101010100.html"; //操作的文件
37 sendRequest(url, encodeURI(null));
38 var jsonList = eval("(" + json + ")"); //获取Json
39 alert(jsonList);
40 }
41 </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>
后台一般应用处理程序代码
1 /// <summary>
2 /// MyHandler 的摘要说明
3 /// </summary>
4 public class MyHandler : IHttpHandler
5 {
6 private WebClient webclient = new WebClient();
7 public void ProcessRequest(HttpContext context)
8 {
9 context.Response.ContentType = "text/plain";
10 string cityid = context.Request.QueryString["city"];//101200101
11 string alldata = Weather("http://www.weather.com.cn/data/cityinfo/" + cityid + ".html").Substring(15);
12 string data = '['+alldata.Substring(0, alldata.Length - 1)+']';
13 context.Response.Write(data);
14 }
15
16 public bool IsReusable
17 {
18 get
19 {
20 return false;
21 }
22 }
23
24 public string Weather(string url)
25 {
26 Uri uri = new Uri(url);
27 WebRequest webrequest = WebRequest.Create(url);
28 Stream myStream = webclient.OpenRead(uri);
29 StreamReader reader = new StreamReader(myStream, System.Text.Encoding.UTF8);
30 return reader.ReadToEnd();
31 }
32 }
运行的结果如图所示：
现在我们可以很容易的查询天气情况了，不过有一点不是蛮好，是不是该弄个图标更直观呢？？？好吧，于是有经过简单的处理，得到了如下截图：
好的，本次随笔就到这里吧，本来想单纯的使用JS来实现的，对于跨域相关的知识不是蛮了解所以纠结了好久，虽然还是没有解决但至少通过这次随笔理解了跨域相关的问题。
简单结尾
留下一个问题：有两个不同的域A和B，现在B中有一个页面有A需要的数据，但是无法操作B的任何对象，如何实现？（大神看见，求解惑！）
最近实习有点不顺，总感觉这样的实习意义不大，而且感觉自学的效果还会更好些，同时也在纠结一个问题自己具体该走哪个方向、、、
------如果你觉得此文对你有所帮助，别忘了点击下右下角的推荐咯，谢谢！------
Ajax实现天气预报功能的更多相关文章
- Jquery和雅虎的YQL服务实现天气预报功能！
可以直接使用http://www.tianqi.com/plugin/#tjdm定制天气 很多外部网站都有天气预报功能,对于很多企业内部的门户也需要有天气预报功能,但实现天气预报的功能和方式确有所差异 ...
- 【AS3 Coder】任务七：初涉PureMVC——天气预报功能实现
转自:http://www.iamsevent.com/post/36.html AS3 Coder]任务七:初涉PureMVC——天气预报功能实现 使用框架:AS3任务描述:了解PureMVC框架使 ...
- ajax实现下载功能
ajax实现下载功能 适用场景:由于点击按钮下载excel响应时间过长,此时间段加入加载样式(灰色层.加载动画): 浏览器弹出下载框后,上面的加载样式去掉. 方 法 :使用jquery.fi ...
- ajax 实现修改功能
这段时间在做项目,发现自己忘得好快呀,幸亏有博客园帮我记着呢,整理博客园简直不要太重要了哦 因为做的是一个内部管理系统,只用了一个主页面,所有的都不允许整个网页刷新,所以我们只能用ajax 来做,当 ...
- 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能
Ajax文件上载 利用 FormData 对象和 Spring MVC 配合可以实现Ajax文件上载功能: 步骤 导入组件并准备静态脚本 <dependency> <groupId& ...
- BBS-基于forms组件和ajax实现注册功能
http://www.cnblogs.com/yuanchenqi/articles/7638956.html 1.设计注册页面 views.py from django import forms c ...
- 3- 功能2：基于forms组件和ajax实现注册功能
1.forms组件的注册页面 url from django.urls import path, re_path from blog import views from django.views.st ...
- .net请求Webservice简单实现天气预报功能
很久没有接触Webservice的知识,今天稍微复习了一下关于webservice,简单做了一个天气预报的功能,虽然界面丑的厉害,但功能算是实现了,以下是效果展示. 这东西没什么难点,只是天气预报的功 ...
- Mvc音乐商店demo的ajax异步删除功能总结
刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈! 来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的de ...
随机推荐
- CentOS-6.5-x86_64 最小化安装，已安装包的总数，这些包？
一.我们怎么知道有多少的包被安装? [root@localhost ~]# rpm -qa | wc -l 217 二.怎样得知安装了那些软件包? [root@localhost ~]# rpm -q ...
- PHP的MySQL扩张：MySQL数据库概述
资源:http://www.ido321.com/1023.html 一.SQL:结构化查询语言 SQL(Structured Query Language)是高级的非过程化变成语言.专门用于查询和改 ...
- Swift入门教程:基本语法(二)
数字格式 数字可以增加额外的格式,使它们更容易阅读 可以增加额外的零 0 let money = 001999 // 1999 let money2 = 001999.000 ...
- 纯CSS3打造七巧板
原文:纯CSS3打造七巧板 最近项目上要制作一个七巧板,脑子里瞬间闪现,什么...七巧板不是小时候玩的吗... 七巧板的由来 先来个科普吧,是我在查资料过程中看到的,感觉很有意思. 宋朝有个叫黄伯思的 ...
- MVC5+ 路由特性
MVC5+ 路由特性 概述 ASP.NET MVC 5支持一种新的路由协议,称为路由特性. MVC5也支持以前定义路由的方式,你可以在一个项目中混合使用这两种方式来定义路由. 案例 1.使用Visua ...
- 全球最快的JS模板引擎：tppl
废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发的 tmpl 的 43 倍!与第二 ...
- Web前端框架与类库
Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...
- Android的FrameLayout使用要注意的问题
帧布局FrameLayout在Android的五大布局中是最简单的布局方式,在需要布局中的控件有重叠的情况下才使用. 今天Shamoo使用FrameLayout的时候,发现布局里面的控件设置layou ...
- 使用GDB调试器（一）
使用GDB调试器 GDB概要---- GDB是GNU开源组织公布的一个强大的UNIX下的程序调试工具.也许,各位比較喜欢那种图形界面方式的,像VC.BCB等IDE的调试,但假设你是在UNIX平台下做软 ...
- Cocos2d-x 3.1.1开发环境
Windows7上搭建Cocos2d-x 3.1.1开发环境 前言 现在,越来越多的公司采用Cocos2d-x 3.0来开发游戏了,但是现在这样的文章并不多,所以打算写一系列来帮助初学者快速掌握C ...