闲来无聊，写下此文
经常看见很多网站上有那种天气预报功能，自己之前也写过一个，不过属于那种涉及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代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Weather.Default" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>天气预报</title> 9 <style type="text/css"> 10 </style> 11 <script type="text/javascript"> 12 var xmlHttpRequest = null; 13 //创建XMLHttpRequest 14 function createXmlHttpRequest() { 15 if (window.XMLHttpRequest) { 16 xmlHttpRequest = new XMLHttpRequest(); 17 } else if (window.ActiveXObject) { 18 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 19 } 20 } 21 //调用Ajax 22 function sendRequest(url) { 23 if (xmlHttpRequest) { 24 xmlHttpRequest.open("GET", url, true); 25 xmlHttpRequest.onreadystatechange = onCallBack; 26 xmlHttpRequest.send(null); 27 } 28 } 29 //返回操作结果 30 function onCallBack() { 31 if (xmlHttpRequest.readyState == 4) { 32 if (xmlHttpRequest.status == 200) { 33 if (xmlHttpRequest.responseText != "") { 34 json = xmlHttpRequest.responseText; 35 } else { 36 alert("失败"); 37 } 38 } else { 39 alert("读取失败"); 40 } 41 } 42 } 43 function Test() { 44 createXmlHttpRequest(); //创建XMLHttpRequest对象 45 var citys = document.getElementById("citys"); 46 var index = citys.selectedIndex; 47 var cityid = citys[index].value; 48 var url = "MyHandler.ashx?city=" + cityid; //操作的文件 49 sendRequest(url, encodeURI(null)); 50 var jsonList = eval("(" + json + ")"); //获取Json 51 var weathernow = document.getElementById("weather"); 52 weathernow.innerHTML = jsonList[0]["weather"]; 53 var temp = document.getElementById("temp"); 54 temp.innerHTML=jsonList[0]["temp1"]+"~"+jsonList[0]["temp2"]; 55 } 56 </script> 57 </head> 58 <body> 59 <form id="form1" runat="server"> 60 <div> 61 <p> 62 <span>天气情况：</span><img src="#" alt="" /> 63 <span id="weather">天气</span> <span id="temp">温度</span> 64 </p> 65 <p> 66 <span>选择城市：</span> 67 <select id="citys"> 68 <option value="101200101">武汉</option> 69 <option value="101010100">北京</option> 70 <option value="101020100">上海</option> 71 <option value="101280101">广州</option> 72 </select> 73 <input type="button" value="查询天气" onclick="Test()" /> 74 </p> 75 </div> 76 </form> 77 </body> 78 </html>