JDK 利用Ajax实现新闻列表
创建一个Java类，包含4个属性：title标题、date时间、source来源、content内容。
方法：Get和Set方法、带参和无参构造函数
News.java
package com.imooc.ajax;
public class News {
private String title;
private String date;
private String source;
private String content;
public News() {
}
public News(String title, String date, String source, String content) {
super();
this.title = title;
this.date = date;
this.source = source;
this.content = content;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getSource() {
return source;
}
public void setSource(String source) {
this.source = source;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
创建一个Servlet类—NewsListServlet.java
1.创建一个News集合，用于存储News类
2.导入阿里巴巴的FastJSON，然后通过toJSONString()方法将，list转换为json字符串。(通过JSON将对象进行序列化，便于传输)
3.因为json中包含了中文，所以在响应输出要设置字符编码，防止乱码
package com.imooc.ajax;
import java.io.IOException;
import java.util.ArrayList;
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 com.alibaba.fastjson.JSON;
/**
* Servlet implementation class NewsListServlet
*/
@WebServlet("/NewsListServlet")
public class NewsListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public NewsListServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List list = new ArrayList();
list.add(new News("PYPL:2019年2月份编程排行榜","2019-02","PYPL","TOP1.Python1,TOP2.Java1,TOP3.JavaScript1"));
list.add(new News("PYPL:2019年3月份编程排行榜","2019-03","PYPL","TOP1.Python2,TOP2.Java2,TOP3.JavaScript2"));
list.add(new News("PYPL:2019年4月份编程排行榜","2019-04","PYPL","TOP1.Python3,TOP2.Java3,TOP3.JavaScript3"));
list.add(new News("PYPL:2019年5月份编程排行榜","2019-05","PYPL","TOP1.Python4,TOP2.Java4,TOP3.JavaScript4"));
list.add(new News("PYPL:2019年6月份编程排行榜","2019-06","PYPL","TOP1.Python5,TOP2.Java5,TOP3.JavaScript5"));
String json = JSON.toJSONString(list);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(json);
}
}
从浏览器中可以看出list中的News信息都被JSON序列化为JSON字符串。
接下来将通过Ajax访问”http://localhost:8080/ajaxDemo/NewsListServlet”这个地址，接收这个服务器响应的字符串，最后对字符串进行解析展示页面上。
new.html
用于展示服务器返回的数据
scrpit的作用：动态获取服务器返回的字符串，并将写入到div中
Ajax三步骤：
1. 创建XMLHttpRequest对象
2.发送Ajax请求
3.处理服务器响应
xmlhttp.onreadystatechange = function()利用事件捕捉Ajax在执行过程中的变化
xmlhttp.readyState==4表示接收响应，xmlhttp.status==200代表服务器处理成功
xmlhttp.responseText表示获得响应体的文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻</title>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 1.创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.发送Ajax
xmlhttp.open("GET","/ajaxDemo/NewsListServlet",true);
xmlhttp.send();
// 3.处理服务器
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var text = xmlhttp.responseText;
console.log(text);
var json = JSON.parse(text);
console.log(json);
var html = "";
for(var i=0; i<json.length; i++){
var news = json[i];
html = html + "<h1>"+news.title+"</h1>";
html = html + "<h2>"+news.content+"</h2>";
html = html + "<h2>"+news.date + " "+news.source+"</h2>";
html = html + "<hr>";
}
document.getElementById("container").innerHTML = html;
}
}
</script>
</body>
</html>
注意：在控制台中的数据只是一段长的像JSON的字符串，并不能被JavaScript直接解析，需要转换为JSON才能被调用。在JavaScript中使用JSON.parse()将字符串转换为JSON对象
