HTML5:Ajax的回调函数类似于form传值，SSE实时推送新闻和天气预报功能【诗书画唱】

2021-03-01 13:10 作者:诗书画唱 0人读过 | 我要投稿

内容概括:

讲义

HTML5-9SSE.ppt

SSE即服务器发送事件（Server-Sent Event）允许网页获得来自服务器的更新。

SSE适用于更新频繁、低延迟并且数据都是从服务端到客户端的推送。

SSE实时推送新闻，排行榜，快速上或撤热搜等的功能

创建一个新闻表，包含id,title（新闻标题）和context（新闻内容）字段，使用SSE技术实现实时更新新闻的功能。（将新闻插入到数据库，三秒后显示在页面上）

个人理解：因为传复杂，多的数据的话就一般是用json字符串，所以下面news后面点出来的内容取决于对应的JSON字符串中的命名

要注意插入的数据不要影响JSON字符串的解析，比如空格，双引号，逗号，换行等都会影响。

实现页面化的天气预报

在eclipse中使用wsdl文件的方法（用gif图来演示步骤）

个人对Ajax的回调函数传值类似于jsp的form表单传值的理解

讲义 START

讲义 END

HTML5-9SSE.ppt START

HTML5-9SSE.ppt END

SSE实时推送新闻，排行榜，快速上或撤热搜等的功能 START

先创建数据库：

SSE投放广告:

create table News(

ID int primary key auto_increment,

content varchar(100) not null,

pubtime varchar(100) not null

);

insert into News(

content ,

pubtime

) values ("世界卫生组织总干事特德罗斯阿德哈诺姆格布雷耶苏斯在日内瓦宣布新型冠状病毒感染的肺炎被命名为-19"

,'2020-2-11');

insert into News(

content ,

pubtime

) values ("国家卫健委发布《关于修改新型冠状病毒英文命名的通知》决定将“新型冠状病毒”英文名称修改为-19与世界卫生组织命名一致且中文名称不变",'2020-2-21');

insert into News(

content ,

pubtime

) values ("《中华人民共和国民法典》《中华人民共和国档案法》《中华人民共和国退役军人保障法》实施",'2021-1-1');

insert into News(

content ,

pubtime

) values ("自2021年起每年1月10日为中国人民警察节",'2021-1-10');

___

insert into News(

content ,

pubtime

) values ("诗书画唱成为百大UP主了",'2021-06-06 06:06');

insert into News(

content ,

pubtime

) values ("诗书画唱收到观众的许多三连了，年入百万了",'2021-09-09 09:09');

insert into News(

content ,

pubtime

) values ("诗书画唱认识了很多大佬朋友",'2021-07-07 07:07');

insert into News(

content ,

pubtime

) values ("诗书画唱成为了大帅哥",'2021-09-09 09:09');

select * from News

delete from News where ID=5

delete from News where content like '%诗书画唱%'

drop table News

插入的内容，如果，没处理就别换行等等。

package Bean;

public class News {

/*sb.append("{\"id\":");

sb.append(n.getId());

sb.append(",\"content\":\"");

sb.append(n.getContent());

sb.append("\",\"pubtime\":\"");

sb.append(n.getPubtime());*/

private Integer id;

private String content;

private String pubtime;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getContent() {

return content;

}

public void setContent(String content) {

this.content = content;

}

public String getPubtime() {

return pubtime;

}

public void setPubtime(String pubtime) {

this.pubtime = pubtime;

}

package Dao;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import util.DbUtil;

import Bean.News;

/*public class NewsDao extends BaseDao<News> {

}*/

public class NewsDao{

public List<News>selectAll(){

String sql = "select * from News ";

List<News>list = new ArrayList<News>();

Connection conn = null;

PreparedStatement pstm = null;

ResultSet rs = null;

try {

conn = DbUtil.getConn();

pstm = conn.prepareStatement(sql);

rs = pstm .executeQuery();

while(rs.next()){

News g = new News();

g.setId(rs.getInt("id"));

g.setContent(rs.getString("content"));

g.setPubtime(rs.getString("pubtime"));

list.add(g);

}

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} finally {

DbUtil.close(rs, pstm, conn);

}

return list;

}

package SSE;

import java.io.IOException;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import Bean.News;

import Dao.NewsDao;

/**

* Servlet implementation class SSEServlet

@WebServlet("/sse")

public class SSEServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

private NewsDao nd = new NewsDao();

/**

* @see HttpServlet#HttpServlet()

public SSEServlet() {

super();

// TODO Auto-generated constructor stub

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

this.doPost(request, response);

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

// TODO Auto-generated method stub

//设置SSE的响应头

response.setHeader("Content-Type", "text/event-stream");

response.setHeader("Cache-Control", "no-cache");

response.setCharacterEncoding("utf-8");

response.setHeader("Pragma","no-cache");

response.setDateHeader("Expires", 0);

//获取推送到页面上的数据

// Date now = new Date();

// SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");

// String strDate = sdf.format(now);

//按照格式拼接推送的内容

// String str = "data:" + strDate + "\n\n";

List<News>list = nd.selectAll();

//将复杂的信息拼接成JSON字符串

//[{id:1,content:"",pubtime:""},{id:2,content:"",pubtime:""}]

StringBuilder sb = new StringBuilder("[");

String dot = "";

for(News n : list) {

sb.append(dot);

sb.append("{\"id\":");

sb.append(n.getId());

sb.append(",\"content\":\"");

sb.append(n.getContent());

sb.append("\",\"pubtime\":\"");

sb.append(n.getPubtime());

sb.append("\"}");

dot = ",";

}

sb.append("]");

System.out.println("打印测试："+sb.toString());

String str = "data:" + sb + "\n\n";

//跨域设置

response.setHeader("Access-Control-Allow-Origin", "*");

//设置响应的类型

response.setHeader("Access-Control-Allow-Methods"

, "POST, GET, DELETE, OPTIONS, DELETE");

// 响应头设置

response.setHeader("Access-Control-Allow-Headers"

,"Content-Type, x-requested-with, X-Custom-Header, Header, HaiYi-Access-Token");

//推送内容

response.getWriter().write(str);

}

package util;

import java.io.IOException;

import java.io.InputStream;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.util.Properties;

public class DbUtil {

private static String driverName;

private static String url;

private static String user;

private static String pwd;

static {

//读取properties文件

Properties prop = new Properties();

//将db.properties文件读取到内存中去

InputStream is = DbUtil.class.getClassLoader()

.getResourceAsStream("db.properties");

//加载内容

try {

prop.load(is);

//读取内容

driverName = prop.getProperty("drivername");

url = prop.getProperty("url");

user = prop.getProperty("username");

pwd = prop.getProperty("password");

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

//获取数据库连接对象的方法

public static Connection getConn(){

Connection conn = null;

try {

Class.forName(driverName);

conn = DriverManager.getConnection(url,user,pwd);

} catch (Exception e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return conn;

}

public static void close(ResultSet rs,PreparedStatement pstm

,Connection conn){

try {

if(rs != null) {

rs.close();

}

if(pstm != null) {

pstm.close();

}

if(conn != null) {

conn.close();

}

} catch(Exception e) {

e.printStackTrace();

}

drivername=com.mysql.jdbc.Driver

url=jdbc:mysql://localhost:3306/firstjsp?useUnicode=true&characterEncoding=GBK2312

username=root

password=root

<!DOCTYPE html>

<html>

<head>

window.onload = function(){

//判断浏览器是否支持SSE

if(typeof(EventSource) != 'undefined') {

//创建一个SSE推送源

var sse = new EventSource('http://localhost:8080/SSE/sse');

//onmessage当运行完sse servlet以后，需要执行的js代码

sse.onmessage = function(e){

//获取servlet中传送过来的数据

var txt = e.data;

//将txt字符串转换成js数组

var nArr = JSON.parse(txt);

var html = '<ul>';

for(var i = 0;i < nArr.length;i ++) {

//取出数组中的对象

var news = nArr[i];

//个人理解：因为传复杂，多的数据的话就一般是用json字符串，所以下面news后面点出来的内容取决于对应的JSON字符串中的命名

html += '<li>今日第' +news.id+"条实时推送新闻 " +" " +news.content +" 事件发生于"+news.pubtime+'</li>';

}

html += '</ul>';

document.getElementById('news').innerHTML = html;

}

} else {

alert('你的浏览器不支持SSE');

}

</script>

</head>

<body>

</body>

</html>

要注意插入的数据不要影响JSON字符串的解析，比如空格，双引号，逗号，换行等都会影响。

数据库删除和增加数据时，这个界面也会对应地变化。

SSE实时推送新闻，排行榜，快速上或撤热搜等的功能 END

实现页面化的天气预报 START

1、创建dynamic web project。

2、将10个jar包拷贝到工程目录下。（记得一定要拷贝，不然会报nested的异常，我就报过这种错）

（但是在导入10个jar包后，使用wsdl文件后，就可能会变成下面的8个jar）

3、将WeatherWebService.wsdl拷贝到src目录下

4、WeatherWebService.wsdl——右键——web services——Generate Client，然后一路next到finish。（这一步做完以后，在项目中会自动生成一个cn.com.WebXml的包，包下面有很多的java类），删除WeatherWebService.wsdl文件（可以不删除）。

5、创建一个测试类，在main方法中进行测试。

注意：

天气预报的图标都在weather.zip中

所有类似于

http://webservice.webxml.com.cn/webservices/ChinaStockSmallImageWS.asmx?wsdl

网址中的webservice.webxml.com.cn部分全部改成www.webxml.com.cn

webservice网站：

https://blog.csdn.net/yixiaoping/article/details/16877623

WebXml网站链接：http://www.webxml.com.cn/zh_cn/index.aspx