HTML5:Ajax的回調(diào)函數(shù)類(lèi)似于form傳值，SSE實(shí)時(shí)推送新聞和天氣預(yù)報(bào)功能【詩(shī)書(shū)畫(huà)唱】
內(nèi)容概括:
講義
HTML5-9SSE.ppt
SSE即服務(wù)器發(fā)送事件（Server-Sent Event）允許網(wǎng)頁(yè)獲得來(lái)自服務(wù)器的更新。
SSE適用于更新頻繁、低延遲并且數(shù)據(jù)都是從服務(wù)端到客戶端的推送。
SSE實(shí)時(shí)推送新聞，排行榜，快速上或撤熱搜等的功能
創(chuàng)建一個(gè)新聞表，包含id,title（新聞標(biāo)題）和context（新聞內(nèi)容）字段，使用SSE技術(shù)實(shí)現(xiàn)實(shí)時(shí)更新新聞的功能。（將新聞插入到數(shù)據(jù)庫(kù)，三秒后顯示在頁(yè)面上）
個(gè)人理解：因?yàn)閭鲝?fù)雜，多的數(shù)據(jù)的話就一般是用json字符串，所以下面news后面點(diǎn)出來(lái)的內(nèi)容取決于對(duì)應(yīng)的JSON字符串中的命名
要注意插入的數(shù)據(jù)不要影響JSON字符串的解析，比如空格，雙引號(hào)，逗號(hào)，換行等都會(huì)影響。
實(shí)現(xiàn)頁(yè)面化的天氣預(yù)報(bào)
在eclipse中使用wsdl文件的方法（用gif圖來(lái)演示步驟）?
個(gè)人對(duì)Ajax的回調(diào)函數(shù)傳值類(lèi)似于jsp的form表單傳值的理解?
講義 START
講義 END
HTML5-9SSE.ppt START
HTML5-9SSE.ppt END
SSE實(shí)時(shí)推送新聞，排行榜，快速上或撤熱搜等的功能?????START
創(chuàng)建一個(gè)新聞表，包含id,title（新聞標(biāo)題）和context（新聞內(nèi)容）字段，使用SSE技術(shù)實(shí)現(xiàn)實(shí)時(shí)更新新聞的功能。（將新聞插入到數(shù)據(jù)庫(kù)，三秒后顯示在頁(yè)面上）
先創(chuàng)建數(shù)據(jù)庫(kù)：
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 ("世界衛(wèi)生組織總干事特德羅斯阿德哈諾姆格布雷耶蘇斯在日內(nèi)瓦宣布新型冠狀病毒感染的肺炎被命名為-19"
,'2020-2-11');
insert into? News(
content ,
pubtime?
) values ("國(guó)家衛(wèi)健委發(fā)布《關(guān)于修改新型冠狀病毒英文命名的通知》決定將“新型冠狀病毒”英文名稱修改為-19與世界衛(wèi)生組織命名一致且中文名稱不變",'2020-2-21');
insert into? News(
content ,
pubtime?
) values ("《中華人民共和國(guó)民法典》《中華人民共和國(guó)檔案法》《中華人民共和國(guó)退役軍人保障法》實(shí)施",'2021-1-1');
insert into? News(
content ,
pubtime?
) values ("自2021年起每年1月10日為中國(guó)人民警察節(jié)",'2021-1-10');
___
insert into? News(
content ,
pubtime?
) values ("詩(shī)書(shū)畫(huà)唱成為百大UP主了",'2021-06-06 06:06');
insert into? News(
content ,
pubtime?
) values ("詩(shī)書(shū)畫(huà)唱收到觀眾的許多三連了，年入百萬(wàn)了",'2021-09-09 09:09');
insert into? News(
content ,
pubtime?
) values ("詩(shī)書(shū)畫(huà)唱認(rèn)識(shí)了很多大佬朋友",'2021-07-07 07:07');
insert into? News(
content ,
pubtime?
) values ("詩(shī)書(shū)畫(huà)唱成為了大帥哥",'2021-09-09 09:09');
select * from News
delete? from News where ID=5
delete? from News where content like '%詩(shī)書(shū)畫(huà)唱%'
drop table News
插入的內(nèi)容，如果，沒(méi)處理就別換行等等。
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
//設(shè)置SSE的響應(yīng)頭
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);
//獲取推送到頁(yè)面上的數(shù)據(jù)
// Date now = new Date();
// SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
// String strDate = sdf.format(now);
//按照格式拼接推送的內(nèi)容
// String str = "data:" + strDate + "\n\n";
List<News>list = nd.selectAll();
//將復(fù)雜的信息拼接成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("打印測(cè)試："+sb.toString());
String str = "data:" + sb + "\n\n";
//跨域設(shè)置
response.setHeader("Access-Control-Allow-Origin", "*");
//設(shè)置響應(yīng)的類(lèi)型
response.setHeader("Access-Control-Allow-Methods"
, "POST, GET, DELETE, OPTIONS, DELETE");
// 響應(yīng)頭設(shè)置
response.setHeader("Access-Control-Allow-Headers"
? ? ? ? ,"Content-Type, x-requested-with, X-Custom-Header, Header, HaiYi-Access-Token");
//推送內(nèi)容
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文件讀取到內(nèi)存中去
? ? InputStream is = DbUtil.class.getClassLoader()
? ? .getResourceAsStream("db.properties");
? ? //加載內(nèi)容
? ? try {
prop.load(is);
//讀取內(nèi)容
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();
}
? ? }
? ??
? ? //獲取數(shù)據(jù)庫(kù)連接對(duì)象的方法
? ? 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>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
//判斷瀏覽器是否支持SSE
if(typeof(EventSource) != 'undefined') {
//創(chuàng)建一個(gè)SSE推送源
var sse = new EventSource('http://localhost:8080/SSE/sse');
//onmessage當(dāng)運(yùn)行完sse servlet以后，需要執(zhí)行的js代碼
sse.onmessage = function(e){
//獲取servlet中傳送過(guò)來(lái)的數(shù)據(jù)
var txt = e.data;
//將txt字符串轉(zhuǎn)換成js數(shù)組
var nArr = JSON.parse(txt);
var html = '<ul>';
for(var i = 0;i < nArr.length;i ++) {
//取出數(shù)組中的對(duì)象
var news = nArr[i];
//個(gè)人理解：因?yàn)閭鲝?fù)雜，多的數(shù)據(jù)的話就一般是用json字符串，所以下面news后面點(diǎn)出來(lái)的內(nèi)容取決于對(duì)應(yīng)的JSON字符串中的命名
html += '<li>今日第' +news.id+"條實(shí)時(shí)推送新聞? ?" +"? ?" +news.content +"? ?事件發(fā)生于"+news.pubtime+'</li>';
}?
html += '</ul>';
document.getElementById('news').innerHTML = html;
}
} else {
alert('你的瀏覽器不支持SSE');
}
}
</script>
</head>
<body>
<h1>新聞列表：</h1>
<div id="news"></div>
</body>
</html>
要注意插入的數(shù)據(jù)不要影響JSON字符串的解析，比如空格，雙引號(hào)，逗號(hào)，換行等都會(huì)影響。
數(shù)據(jù)庫(kù)刪除和增加數(shù)據(jù)時(shí)，這個(gè)界面也會(huì)對(duì)應(yīng)地變化。
SSE實(shí)時(shí)推送新聞，排行榜，快速上或撤熱搜等的功能?????END
實(shí)現(xiàn)頁(yè)面化的天氣預(yù)報(bào) START
1、創(chuàng)建dynamic web project。
2、將10個(gè)jar包拷貝到工程目錄下。（記得一定要拷貝，不然會(huì)報(bào)nested的異常，我就報(bào)過(guò)這種錯(cuò)）
（但是在導(dǎo)入10個(gè)jar包后，使用wsdl文件后，就可能會(huì)變成下面的8個(gè)jar）
3、將WeatherWebService.wsdl拷貝到src目錄下
4、WeatherWebService.wsdl——右鍵——web services——Generate Client，然后一路next到finish。（這一步做完以后，在項(xiàng)目中會(huì)自動(dòng)生成一個(gè)cn.com.WebXml的包，包下面有很多的java類(lèi)），刪除WeatherWebService.wsdl文件（可以不刪除）。
5、創(chuàng)建一個(gè)測(cè)試類(lèi)，在main方法中進(jìn)行測(cè)試。
注意：
天氣預(yù)報(bào)的圖標(biāo)都在weather.zip中
所有類(lèi)似于
http://webservice.webxml.com.cn/webservices/ChinaStockSmallImageWS.asmx?wsdl
網(wǎng)址中的webservice.webxml.com.cn部分全部改成www.webxml.com.cn
webservice網(wǎng)站：
https://blog.csdn.net/yixiaoping/article/details/16877623
WebXml網(wǎng)站鏈接：http://www.webxml.com.cn/zh_cn/index.aspx
http://www.0430.com/cn/web121424/
了解wsdl文件：
https://blog.csdn.net/Erica_1230/article/details/50636418
個(gè)人理解wsdl文件：wsdl文件是配置文件（用完后可以不刪除），其實(shí)類(lèi)似于“壓縮文件”，在鼠標(biāo)右鍵后操作完成后就可以自動(dòng)生成一些包，文件等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$('#q').click(function(){
//獲取輸入的城市的名稱
var cn = $('#cityName').val();
$.ajax({
url: 'http://localhost:8080/TianQiYuBao/ws',
type: 'POST',
data: {
cityName: cn?
},
dataType: 'JSON',
success: function(data){
$('#info').html(data.temp?
+ '<br>' + data.date?
+ '<br>' + data.weather?
+ '<br><img srcc="../img/' + data.img + '" />');
}
});
});
})
</script>
</head>
<body>
<input type="text" id="cityName" placeholder="請(qǐng)輸入城市名"/>
<input type="button" id="q" value="查詢天氣預(yù)報(bào)" />
<div id="info"></div>
</body>
</html>
實(shí)現(xiàn)頁(yè)面化的天氣預(yù)報(bào) END
在eclipse中使用wsdl文件的方法（用gif圖來(lái)演示步驟） START
點(diǎn)擊wsdl文件后鼠標(biāo)有鍵，之后按照我制作的gif圖演示來(lái)做就可以了：
在eclipse中使用wsdl文件的方法（用gif圖來(lái)演示步驟） END
個(gè)人對(duì)Ajax的回調(diào)函數(shù)傳值類(lèi)似于jsp的form表單傳值的理解 START
其實(shí)用Ajax傳值，也是類(lèi)似于jsp的表單提交，接收參數(shù)，一些值用getParameter接收。
