利用Ajax实现新闻列表

创建一个Java类,包含4个属性:title标题、date时间、source来源、content内容。

方法:Get和Set方法、带参和无参构造函数

News.java

 

创建一个Servlet类—NewsListServlet.java

1.创建一个News集合,用于存储News类

2.导入阿里巴巴的FastJSON,然后通过toJSONString()方法将,list转换为json字符串。(通过JSON将对象进行序列化,便于传输)

3.因为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表示获得响应体的文本

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

 

参与评论

游客评论不支持回复他人评论内容,如需回复他人评论内容请