利用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 + "&nbsp;"+news.source+"</h2>";
						html = html + "<hr>"; 
					}
					document.getElementById("container").innerHTML = html;
				}
			}
	</script>
</body>
</html>

注意:在控制台中的数据只是一段长的像JSON的字符串,并不能被JavaScript直接解析,需要转换为JSON才能被调用。在JavaScript中使用JSON.parse()将字符串转换为JSON对象

 

资源下载资源下载价格0.1立即支付
更多功能开发中...
打赏支付成功后,刷新页面即可显示隐藏内容~


🥤🧃🧉
物联沃分享整理
物联沃-IOTWORD物联网 » 利用Ajax实现新闻列表

发表评论

提供最优质的资源集合

立即查看 了解详情