Ajax(5):利用json做数据交换

于 2013-06-21 00:50:49 发布
阅读量864 收藏
点赞数
分类专栏： JavaWeb 文章标签： json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/confirmAname/article/details/9141885
版权

工程目录：

show.jsp :

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="js/prototype1.6.js">
</script>
<script>
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}

var intervalId;
function show(){
intervalId=setInterval(getShareInfo,1000);
}

function stopShow(){
clearInterval(intervalId);
}

function getShareInfo(){
var xhr=getXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
var jsonStr=xhr.responseText;
var share=jsonStr.evalJSON();
$('d1').innerHTML="股票名称:"+share.shareName+
"<br>股票价格:"+share.sharePrice+"<br>时间:"+share.date;
}
}
xhr.open("post","show",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(null);
}
</script>
</head>
<body οnlοad="show();">
<div style="width:250px;height:70px;border:1px solid black" id="d1">
</div>
<input type="button" value="停止报价" οnclick="stopShow();">
</body>
</html>
Share.java : 

public class Share {

	private String shareName;
	private double sharePrice;
	private Date date;
	
	public Date getDate() {
		return date;
	}
	public void setDate(Date date) {
		this.date = date;
	}
	public String getShareName() {
		return shareName;
	}
	public void setShareName(String shareName) {
		this.shareName = shareName;
	}
	public double getSharePrice() {
		return sharePrice;
	}
	public void setSharePrice(double sharePrice) {
		this.sharePrice = sharePrice;
	}
	public Share() {
		super();
	}
	public Share(String shareName, double sharePrice, Date date) {
		super();
		this.shareName = shareName;
		this.sharePrice = sharePrice;
		this.date = date;
	}
	
}
DateProcessor.java : 

public class DateProcessor implements JsonValueProcessor {

	private String pattern="yyyy-MM-dd HH:mm:ss";
	
	public void setPattern(String pattern) {
		this.pattern = pattern;
	}

	@Override
	public Object processArrayValue(Object arg0, JsonConfig arg1) {
		Date date=(Date)arg0;
		SimpleDateFormat sdf=new SimpleDateFormat(pattern);
		return sdf.format(date);
	}

	@Override
	public Object processObjectValue(String arg0, Object arg1, JsonConfig arg2) {
		Date date=(Date)arg1;
		SimpleDateFormat sdf=new SimpleDateFormat(pattern);
		return sdf.format(date);
	}

}
ShowServlet.java : 

public class ShowServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		Random random=new Random();
		String shareName="share"+random.nextInt(99999);
		double sharePrice=Math.ceil(random.nextDouble()*10);
		Share share=new Share(shareName,sharePrice,new Date());
		DateProcessor processor=new DateProcessor();
		JsonConfig config=new JsonConfig();
		config.registerJsonValueProcessor(Date.class,processor);
		JSONObject json=JSONObject.fromObject(share,config);
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw=response.getWriter();
		pw.println(json.toString());
		pw.close();
	}

}
为ShowServlet映射的url为show。

数据转换涉及两个过程：

① 服务器端将Java对象Share转换为符合json语法的字符串，并发送给客户端。

② 浏览器接收到符合json语法的字符串，利用evalJSON( )函数将字符串转换为JavaScript对象，并及时更新页面数据。

当然，上面的程序在实际中无意义，它仅仅为了演示json是如何做数据交换的。

confirmAname
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax获取json数据为undefined原因分析
12-12
总结来说，当处理Ajax获取的JSON数据出现`undefined`时，应检查数据类型、JSON格式、属性访问、异步处理、编码问题以及跨域限制等因素。理解并解决这些问题有助于确保JSON数据能够正确地被JavaScript解析和使用。...
jquery的ajax异步请求接收返回json数据实例
12-03
在实际开发中，可以利用各种在线工具来帮助我们处理JSON数据，比如JSON代码检验、美化、格式化、转换工具等，这些工具可以方便地查看和调试JSON数据，提高开发效率。 总之，jQuery的`$.ajax`方法提供了灵活且强大的...
JavaScriptAjaxTable:用于 Ajax JSON 数据的 JavaScript 表
06-22
在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛应用于实现页面的无刷新更新，而JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。...
ajax与php利用json传输数据，实现局部刷新
11-05
5. **响应的处理**：Ajax请求成功后，会触发`onreadystatechange`事件，当状态变为4（表示请求已完成）且状态码为200（表示成功）时，可以读取`responseText`或`responseJSON`获取返回的JSON数据。 6. **DOM操作**...
Struts2.5 利用Ajax将json数据传值到JSP的实例
01-20
通过以上步骤，可以实现Struts2.5框架下，使用Ajax将JSON数据异步传递给JSP页面，动态更新页面内容，提升Web应用的交互体验。在实际开发中，还可以根据需求添加错误处理和优化性能的措施，如使用Promise、async/...
JSP技术的发展趋势
confirmAname的专栏
05-23 3908
JSP技术主要用来简化动态网页的开发过程，由于它在形式上和html文档比较相似，因此与Servlet相比，用JSP来编写动态网页更加直观。 但是，当网页非常复杂时，JSP文件中的大量的html标记和java程序片段混杂在一起，会大大削弱JSP代码的可读性和可维护性，而且会增加调试JSP文件的难度。 因此自从JSP技术诞生以后，它的发展的总目标就是使JSP代码变得更加简洁和精炼。为了达到这一目标
购物车模块myshoppingcart
confirmAname的专栏
05-28 2777
先看看模块的文件目录结构： CartItem.java的源代码： public class CartItem { private Computer c; private int quantity; public Computer getC() { return c; } public void setC(Computer c) { this.c = c; }
Servlet中利用JDBC操作数据库,往emp表中添加数据
confirmAname的专栏
05-14 2472
第一步：首先进入数据库，建库，建表。 第二步：在myeclipse中新建一个web工程，我的就为web01_demo,接着在WebRoot下新建一个add.jsp文件。 add.jsp的代码十分简单： My JSP 'add.jsp' starting page add employee name: salary:
乱码(0):如何让浏览器按照指定编码打开服务器返回的html文件
confirmAname的专栏
06-17 2203
Tomcat服务器上某个应用下有个html文件，现在想让客户端访问时以指定字符集打开这个页面。譬如以UTF-8打开这个页面，那么我们只要保证做到两点： ① 编辑好html文件后保存时指定以UTF-8格式保存，此过程相当于编码过程。 ② 在html文件的head>里加上如下代码 : 上面代码相当于模拟了一个响应头，响应头的名称为"content-type"，值为"text/html; ch
URL重写机制
confirmAname的专栏
05-28 1628
在一些需要Session机制支持的应用中，如果浏览器禁止了Cookie，那么应用如何才能保证在没有Cookie支持的情况下仍然可以使用呢？ 浏览器一旦禁止Cookie，Servlet容器就无法向客户端存放表示SessionID的Cookie，在客户端的HTTP请求中也就不会包含表示SessionID的Cookie，Servlet容器因此就不能跟踪会话，因此每次当客户请求访问支持会话的JSP页面时
GenericServlet抽象类实现了Servlet接口
confirmAname的专栏
05-15 1590
javax.servlet.GenericServlet抽象类实现了Servlet接口，GenericServlet抽象类为Servlet接口提供了通用实现，它与任何网络应用层协议无关。GenericServlet类除了实现Servlet接口，还实现了ServletConfig接口和Serializable接口。GenericServlet类的部分源代码(实现Servlet接口有关的代码)如下：
JSON(0):json简介
confirmAname的专栏
06-20 1518
JSON : JSON是 JavaScript Object Notation 的缩写。它是一种轻量级的数据交换语言，一般用于客户端与服务器端进行数据交换，即服务器端首先生成符合json语法格式的字符串，然后发送给客户端，接着客户端将该字符串转换成JavaScript对象。 关于json，最重要的是要理解它是一种数据交换格式，不是一种编程语言。虽然它与JavaScript的对象直接量语法类似，
乱码(1):Servlet编程中处理表单中的中文问题
confirmAname的专栏
06-17 1415
在MyEclipse中新建一个web工程，取名为demo。新建addEmp.jsp文件，新建AddServlet.java文件，为AddServlet映射的url为/add。 addEmp.jsp : Insert title here 姓名: 薪水: 因为页面中有中文，所以pageEncoding属性的值必须为可以保存(即编码)中文的编码格式，可以是UTF-8，也可以是
注册登录模块
confirmAname的专栏
05-28 1308
为保持主要知识点脉络清晰，本模块没有使用Ajax技术，所以没有实现注册时光标下移即可验证用户名是否被占用功能。同时省略了客户端的JS验证用户名和密码是否符合规定的功能。注册字段只有两个，昵称和密码，昵称要求唯一，主键自增长，数据库使用MySQL。 先看看模块的文件目录结构： 下面贴上三个Servlet的源代码： public class CheckCodeServlet extend
JSTL及其核心(Core)标签库
confirmAname的专栏
05-31 1290
自定义JSP标签是用来替代JSP中的Java程序片段的有效途径。大多数web应用的JSP文件常常要实现一些通用的功能。为了提高web应用的开发效率，SUN公司制定了一组标准标签库的规范，这组标准标签库称为JSTL(JSP Standard Tag Library)。 JSTL标签库实际上包含5个不同的标签库。JSTL1.1规范为这些标签库的URI和前缀做了约定。 JSTL标签库的种类
Session
confirmAname的专栏
05-23 1260
在Web开发领域，会话机制是用于跟踪客户状态的普遍解决方案。会话指的是在一段时间内，单个客户与Web应用的一连串相关的交互过程。在一个会话中，客户可能会多次请求访问Web应用的同一个网页，也有可能请求访问同一个Web应用中的多个网页。 1. 什么是Session 在服务器端维护用户状态的一种状态管理技术。浏览器访问服务器时，服务器会创建一个对象(Session对象)，同时还会生成一个标识该对象
JSP三大编译指令之page指令
confirmAname的专栏
05-19 1248
JSP的编译指令是通知JSP引擎的消息，它不直接生成输出。编译指令都有默认值，因此开发人员无须为每个指令设置值。 常见的编译指令有如下三个： ① page：该指令是针对当前页面的指令。 ② include: 用于指定包含另一个页面。 ③ taglib: 用于定义和访问自定义标签。 使用编译指令的语法格式如下： page指令： page指令通常位于JSP页面的顶端，一个JSP页面
JSON(3):Java的Date类型转换为符合json语法的字符串遇到的问题及其解决办法
confirmAname的专栏
06-20 1109
接着上篇文章，先看下面的代码： Person.java : public class Person { private Date hire; public Date getHire() { return hire; } public void setHire(Date hire) { this.hire = hire; } public Person() { s
抽象类HttpServlet继承GenericServlet
confirmAname的专栏
05-15 1066
抽象类HttpServlet是GenericServlet类的子类，HttpServlet类为Servlet接口提供了与Http协议相关的通用实现，也就是说，HttpServlet对象适合运行在与客户端采用Http协议通信的Servlet容器或者web服务器中，在开发JavaWeb应用中，自定义的Servlet类一般都扩展HttpServlet类。我们来看一下HttpServlet类的源代码(只摘
AJAX与JSON基础知识：异步刷新与数据交换
它改变了传统的Web应用模型，即用户发出请求后，服务器响应，浏览器再更新页面的方式，转而采用异步方式进行数据交换。 AJAX的核心原理在于利用客户端的JavaScript库（如jQuery、axios等）通过XMLHttpRequest对象向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值