JavaScript实现网页天气显示：前端直调与后端代理方案

实现思路与技术选型

在网页中集成天气显示功能，核心在于获取并解析远程天气服务返回的数据。通常有两种架构模式：

1. 纯前端方案：利用 XMLHttpRequest 或 fetch 直接请求公开的天气 JSON 接口。优点是无后端依赖，开发简单；缺点是容易受到浏览器同源策略（CORS）限制，且 API 密钥暴露存在安全隐患。
2. 前后端分离方案：前端请求自家服务器，后端（如 Java/JSP/Servlet）作为代理去调用天气服务商 API，再转发给前端。这是最稳定且合规的做法。

以下将分别展示这两种场景的代码实现。

方案一：前端直接调用（基于 XMLHttpRequest）

为了演示兼容性较好的写法，这里使用原生的 XMLHttpRequest 对象来发起 GET 请求。注意：现代项目推荐使用 fetch API 或 Axios。

第1步：构建 HTML 结构

在页面中预留显示天气内容的容器和触发按钮。

<body>
 <p id="weather_display">正在加载天气...</p>
 <button id="btn_shenzhen">深圳天气</button>
 <button id="btn_chenzhou">郴州天气</button>
</body>

第2步：编写 JavaScript 获取逻辑

创建通用的请求函数，处理兼容性问题并解析 JSON 数据。

function loadWeather(cityId) {
    var xmlhttp;
    // 兼容旧版 IE
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 配置请求：同步请求避免异步回调复杂性（仅用于示例，生产环境建议异步）
    xmlhttp.open("GET", "http://m.weather.com.cn/data/" + cityId + ".html", false);
    
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            try {
                // 解析 JSON 数据
                var obj = JSON.parse(xmlhttp.responseText);
                // 假设返回结构包含 weatherinfo 字段
                var info = obj.weatherinfo;
                document.getElementById("weather_display").innerHTML = 
                    info.city + ": " + info.weather1 + " " + info.temp1 + "°C";
            } catch (e) {
                console.error("JSON 解析失败:", e);
                document.getElementById("weather_display").innerHTML = "数据格式错误";
            }
        }
    };
    
    xmlhttp.send();
}

// 绑定按钮事件
document.getElementById('btn_shenzhen').onclick = function() { loadWeather('101280601'); };
document.getElementById('btn_chenzhou').onclick = function() { loadWeather('101250501'); };

方案二：后端代理中转（JSP 示例）

当直接访问天气 API 遇到跨域拦截时，需要中间层。以下是经典的 JSP 后端代理实现，它将远程天气数据“清洗”后输出给前端。

第1步：创建后端代理文件 date.jsp

该脚本接收城市 ID 参数，向气象局接口发起 HTTP 连接，并将结果流式传输给前端。

<%@ page language="java" import="java.net.*,java.io.*" pageEncoding="utf-8"%>
<%
String cid = request.getParameter("cid");
if(cid != null){
    URL url = new URL("http://m.weather.com.cn/data/"+cid+".html");
    HttpURLConnection httpConn = (HttpURLConnection) url.openConnection();
    httpConn.connect();
    InputStream cin = httpConn.getInputStream();
    BufferedReader reader = new BufferedReader(new InputStreamReader(cin,"UTF-8"));
    StringBuffer sb = new StringBuffer();
    String rl = null;
    while ((rl = reader.readLine()) != null){
        sb.append(rl);
    }
    response.setContentType("application/json;charset=UTF-8");
    response.getWriter().print(sb.toString());
}%>

第2步：前端调用后端代理

前端不再直接请求气象网站，而是请求上述 JSP 页面。

// 修改 loadWeather 中的 URL 地址
xmlhttp.open("GET", "date.jsp?cid=" + cityId, false); // 假设同域

关键注意事项与排错

• CORS 跨域问题：现代浏览器默认禁止前端 JS 直接访问不同域名（除非对方允许 CORS）。如果直接调用 m.weather.com.cn 报错 No 'Access-Control-Allow-Origin'，必须采用方案二的后端代理，或寻找支持 CORS 的免费天气 API。
• IE 兼容性：文中使用了 ActiveXObject 处理 IE6/7，但在 IE8+ 中应优先使用标准 XMLHttpRequest。对于新项目，建议直接使用 fetch API 或 jQuery 的 $.ajax，它们对现代浏览器的支持更好且写法更简洁。
• JSON 解析：确保服务端返回的是合法的 JSON 格式。若后端返回非 JSON 文本（如 HTML 错误页），JSON.parse() 会抛出异常，务必包裹在 try-catch 中。
• 城市 ID 获取：不同天气服务商使用不同的城市编码体系。中国气象网的代码可通过查询其站点列表获取，其他第三方 API（如 OpenWeatherMap）则使用城市名称或经纬度。

以上就是用JavaScript为页面添加天气显示的详细内容，更多关于JavaScript天气组件开发的资料请关注本站其它相关文章！