一.要求在网页上显示输入框，根据用户输入的城市获取该城市的天气预报，然后显示在该网页上。
二．遇到的问题
当要读取的天气情况的文档位于本地计算机时，可以回显天气情况，但是当动态的从网上获取并回显时，由于无法跨域访问数据，不能回显在网页上。
三．解决办法（两种）
1.使用雅虎推出的一种类似 SQL 的查询语言YQL来查询天气情况，它的原理就是目前在Web上面已经有很多结构化数据可以供开发人员来使用。但是使用这些数据，要求对数据的请求和响应格式有一定的了解。不同服务提供者所采用的数据格式是不同的。YQL 是雅虎提供的一种类似 SQL 的查询语言，通过它可以把数据服务作为数据库表来查询，并获得结果。YQL 服务的输入是使用者提供的 YQL 语句。YQL 服务解析 YQL 语句，然后调用后台真实的 Web 服务并获取结果。后台 Web 服务的结果以 XML 或是 JSON 的格式返回给 YQL 服务的使用者（具体见下图），然后我们将所得的结果转换为xml对象，通过解析xml对象将天气情况回显在网页上。
image.png
2.通过java中mvc框架来解决，可以在后台建立控制类，通过控制类去抓取目标网页上的内容，然后将它返回前端，前段将后台返回的内容转换为xml对象，通过解析xml对象回显目标城市的天气情况，原理如下：
image.png
四．具体实现
1.YQL查询语言实现
<html>
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<script src="js/jquery-1.4.2.min.js"></script>
<body>
<label>城市</label>
<input id="city" type="text">
<input type="submit" value="查询" onclick="fun()">
<h1>W3School.com.cn Internal Note</h1>
<p><b>city:</b> <span id="to"></span><br />
<b>time:</b> <span id="from"></span><br />
<b>wendu:</b> <span id="message"></span><br />
<b>suggest:</b> <span id="suggest"></span><br />
</body>
<script type="text/javascript">
function fun(){
var city=document.getElementById("city").value;
var site = 'http://www.sojson.com/open/api/weather/xml.shtml?city='+city;
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';
$.getJSON(yql, function (data) {
console.log(data);
var xmlDoc = (new DOMParser()).parseFromString(data.results[0],"text/xml");
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("updatetime")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("wendu")[0].childNodes[0].nodeValue;
document.getElementById("suggest").innerHTML=
xmlDoc.getElementsByTagName("environment")[0].getElementsByTagName("suggest")[0].childNodes[0].nodeValue;
});
}
</script>
</html>
2.java中mvc框架实现
①前端视图
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<label>城市</label>
<input id="city" type="text">
<input type="submit" value="查询" onclick="fun()">
<h1>W3School.com.cn Internal Note</h1>
<p><b>city:</b> <span id="to"></span><br />
<b>time:</b> <span id="from"></span><br />
<b>wendu:</b> <span id="message"></span><br />
<b>suggest:</b> <span id="suggest"></span><br />
</body>
<script type="text/javascript">
function fun(){
var city=document.getElementById("city").value;
window.location.href="<%=request.getContextPath()%>/WeatherServlet?city="+city;
}
var xmlDoc = (new DOMParser()).parseFromString('<%=request.getAttribute("weather") %>',"text/xml");
alert('<%=request.getAttribute("weather")%>');
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("updatetime")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("wendu")[0].childNodes[0].nodeValue;
document.getElementById("suggest").innerHTML=
xmlDoc.getElementsByTagName("environment")[0].getElementsByTagName("suggest")[0].childNodes[0].nodeValue;
</script>
</html>
②后台控制类
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.net.URLConnection;
import java.util.Scanner;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class WeatherServlet
*/
@WebServlet("/WeatherServlet")
public class WeatherServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String city = request.getParameter("city");
//参数url化
city = java.net.URLEncoder.encode(city, "utf-8");
String apiUrl = String.format("http://www.sojson.com/open/api/weather/xml.shtml?city=%s",city);
//开始请求
URL url= new URL(apiUrl);
URLConnection open = url.openConnection();
InputStream input = open.getInputStream();
//这里转换为String，带上包名，怕你们引错包
Scanner scan=new Scanner(input,"utf-8");
String result=scan.useDelimiter("\\A").next();
//输出
request.setAttribute("weather", result);
System.out.println(result);
request.getRequestDispatcher("/1.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
五．运行截图
image.png
image.png
网友评论