JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式, 易于人阅读和编写,
JSON建构于两种结构:
(1)“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。
(2)值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。
ajax已成为一种热门的js异步执行的技术,但是在前端页面传递参数时,一般有两种方式,一种是将参数组装成字符串,通过Get或者Post方式发送除去,这种方式适合于参数不多,内容不丰富的情况。另外一种是要传递丰富的参数,一般就要使用连接字符串的方式将它组装成一定格式的xml内容,既不方便阅读,也很麻烦,这时,JSON就体现出它的优势,结合JSON-Java library,在后台服务可以很容易的解析请求的参数值。下面就实现一个从前台页面发送一些json格式的字符串给后台,后台解析后返回一些信息在前台页面展示的功能。
1 创建前台页面index.jsp里调用ajax请求,js如下
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript">
//创建xmlhttp对象
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//创建Person类有参构造器
function Person(name,age,gender,birthday){
this.age = age;
this.gender = gender;
this.name = name;
this.birthday = birthday;
}
//创建一个Person的对象
function getPerson(){
return new Person("coco",25,true,"1988-08-08");
}
//发起ajax请求
function doJSON(){
var person = getPerson();
//使用json.js库里的stringify()方法将person对象转换成Json字符串
var personAsJSON = JSON.stringify(person);
alert( " Car object as JSON:\n " + personAsJSON);
var url = "JSONExample?timeStamp="+new Date().getTime();
createXMLHttpRequest();
xmlHttp.open("POST",url,true );
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type" ,"application/x-www-form-urlencoded");
xmlHttp.send(personAsJSON);
}
function handleStateChange() {
if (xmlHttp.readyState == 4 ) {
if (xmlHttp.status == 200 ) {
parseResults();
}
}
}
function parseResults() {
var responseDiv = window.document.getElementById("responseDiv");
var content = xmlHttp.responseText
responseDiv.value = content;
}
</script>
在这段js中,构造了一个Person对象,然后调用Json.js库的stringify方法,将person对象组装成Json格式的字符串发送到后台处理的servlet,当收到后台处理后返回的数据时,在页面里进行展示。
2 后台处理的Servlet,内容如下:
public class JSONExample extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String json = readJSONStringFromRequestBody(req);
// Use the JSON-Java binding library to create a JSON object in Java
JSONObject jsonObject = null ;
String responseText = null;
try{
//将json字符串转化为JsonObject对象
jsonObject = new JSONObject(json);
String gender = jsonObject.getBoolean("gender")?"男":"女";
responseText = "You name is " + jsonObject.getString( "name" ) + " age is "
+ jsonObject.getInt( "age" ) + " gender is " + gender
+ " birthday is " + jsonObject.getString( "birthday" );
System.out.println("responseText="+responseText);
}
catch (Exception pe) {
System.out.println( " ParseException: " + pe.toString());
}
//设置字符集,和页面编码统一,否则有可能乱码
resp.setCharacterEncoding("utf-8");
resp.setContentType( "text/xml" );
resp.getWriter().print(responseText);
}
//读取前段post方法传递过来的信息
private String readJSONStringFromRequestBody(HttpServletRequest request) {
StringBuffer json = new StringBuffer();
String line = null ;
try {
BufferedReader reader = request.getReader();
while ((line = reader.readLine()) != null ) {
json.append(line);
}
}
catch (Exception e) {
System.out.println( "Error reading JSON string: " + e.toString());
}
return json.toString();
}
}
在这个java类里,主要就是将从前端页面里得到的json字符串转换成JSONObject,然后调用它相应的方法,根据key值得到value值。
3 servlet在web.xml里注册
<servlet>
<servlet-name>JSONExample</servlet-name>
<servlet-class>
com.sinye.json.JSONExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>JSONExample</servlet-name>
<url-pattern>/JSONExample</url-pattern>
</servlet-mapping>
这样,就完成了一个结合json的ajax简单例子,更多内容可以去json的官网:http://www.json.org/。另外,在这里面使用的json.js和json.jar都可以从官网招到,如果闲麻烦,可以直接在这里下载
分享到:
相关推荐
在.NET中使用AJAX技术来做服务器端和客户端交互,用JSON做为在异步应用程序中发送和接收信息的数据格式。
如需了解最流行的前端框架,与后台交互的ajax+json,那么这将是一个很好的一个实例。大家也可以去我的博客,查看此介绍!
php+ajax+json的简单实例,包含了json的重要语句,有了这个你学习json就容易多了!
AjaxJson 实例 讲解 最基本的用法 给初学者 有很大帮助 这是 本人老师的实例 呵呵
php基于jquery的ajax技术传递json数据简单实例.docx
jquery_ajax_json简单实例jquery_ajax_json简单实例
主要是用到jquery的ajax,java中的hibernate4的调用mysql数据和struts2地址重定向,并把数据转换成json数据,经过html页面中的javascript调用后台数据,有添加,修改,删除,查询等简单功能,适用于有ajax初学者,...
ajax实例应用,json实现的许多功能
ajax,jQuery 例子大全,json例子,入门到精通的都在里面。 还有javascript帮助文档
ajax请求复杂的json数据实例,下载看看下载看看下载看看
Ajax(json) 开发实例 学习Ajax 的号东西,别错过哦
java生成json数据 ajax请求数据并解析json
jquery ajax用json传值实例 适用于初学者,将页面文件拖到网站项目中即可,包含了传入值传出值,可以根据此代码扩展为自己的代码,一看就明白,有备注
关于Ajax的学习,通过对本例的学习,会发现ajax对json的引用,对ajax的机制也有很大的帮助
js json ajax jsp 跨域訪問的例子 我的文章里有說明的哦
struts2使用jquery整合ajax、json用户登录实例源码
MVC3+Json+Ajax操作实例源码 源码描述: 该源码的目的是开发一个应用程序,用到了MVC3,JQuery,json脚本 为简单起见,这个例子用静态列表用来代替数据库。 源码你可以学习到: 如何使用jQuery JavaScript的confirm或...
这是前台用jsp页面,并应用jquery、easyui、ajax、struts2技术,以json数据格式传输的一个登录例子
jquery ajax json 的例子
使用Ajax动态加载JSON文件的实例源码