Parse JSON with Fastjson and implement no jump refresh of the page via Js&ajax

Last Update:2016-10-21 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1.json is an excellent data format, often used in mobile development and web development, in this example, through a small case study of how to parse the Jason data format through Alibaba's Open source framework Fastjson, and to achieve no jump refresh via JS

2, create a new Web project, this is my project: I wrote it directly in the servlet.

Note that the Guide pack, I came here to a lot of useless packages, in fact the main package is the following several:

This three package is a must, others are common packages for developing basic web

3. Create a domain:

Package com.keson.domain;

Import Com.thoughtworks.xstream.annotations.XStreamAlias;

@XStreamAlias ("Employee")
public class Employee {
@XStreamAlias ("no")
Private Integer No;
@XStreamAlias ("name")
private String name;
@XStreamAlias ("Age")
Private Integer age;
@XStreamAlias ("Gender")
Private String gender;
@XStreamAlias ("Job")
Private String job;
Public Integer Getno () {
return no;
}
public void Setno (Integer no) {
this.no = no;
}
Public String GetName () {
return name;
}
public void SetName (String name) {
THIS.name = name;
}
Public Integer Getage () {
return age;
}
public void Setage (Integer age) {
This.age = age;
}
Public String Getgender () {
return gender;
}
public void Setgender (String gender) {
This.gender = gender;
}
Public String Getjob () {
return job;
}
public void Setjob (String job) {
This.job = job;
}
}

Note: domain must be annotated with @xstreamalias ("employee") in order to convert domain to JSON data format, the property name is the same as the name of the identifier inside the annotation

3,. This is a servlet:

public class Jsonservlet extends HttpServlet {
protected void doget (HttpServletRequest request,
HttpServletResponse response) throws Servletexception, IOException {
DoPost (request, response);
}
protected void DoPost (HttpServletRequest request,
HttpServletResponse response) throws Servletexception, IOException {
Employee Employee =new employee ();
Employee=getemployee ();
XStream XStream = new XStream (new Domdriver ());
xstream.autodetectannotations (true);
Response.setheader ("Cache-control", "No-cache");
Response.setcontenttype ("Text/json; Charset=utf-8 ");
printwriter writer = Response.getwriter ();
String Jsonresult = json.tojsonstring (employee, false);
System.out.println (Jsonresult);
Writer.write (Jsonresult);
Writer.close ();
}

public static Employee GetEmployee () {
Employee Employee=new employee ();
Employee.setno (1);
Employee.setname ("Keson");
Employee.setage (20);
Employee.setgender ("M");
Employee.setjob ("software engineer");
return employee;
}
}

The data here I am through forgery, of course, if there is a database can be implemented through JDBC or other persistence layer framework, here is just an example, so the data forgery easier

The red part is how the object is converted into JSON data through Java code, which is basically possible.

4.jsp page:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "Utf-8"%>
<%@ taglib uri= "Http://java.sun.com/jsp/jstl/core" prefix= "C"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<script type= "Text/javascript" >
var Root_path = "${pagecontext.request.contextpath}";
</script>
<script type= "Text/javascript" src= "${pagecontext.request.contextpath}/js/show.js" ></script>
<body>
<table border= "1px" >
<tr>
<td>no</td>
<td>name</td>
<td>age</td>
<td>gender</td>
<td>job</td>
</tr>
<tr>
<td><input type= "text" id= "no_id" ></td>
<td><input type= "text" id= "name_id" ></td>
<td><input type= "text" id= "age_id" ></td>
<td><input type= "text" id= "gender_id" ></td>
<td><input type= "text" id= "job_id" ></td>
</tr>
&LT;TR&GT;&LT;TD colspan= "5" ><input type= "button" value= "Submit" onclick= "submitbtn ()" ></td></tr>
</table>
</body>

The JSP page here is very simple and concise, I am through the JS to achieve data interaction, so in the JSP page does not write any JS code

5.js Code:

function submitbtn () {
Reqeustdetail ();
}

function Createxmlhttprequest () {
var xmlHttp;

if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
} else if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
} else {
XmlHttp = null;
Window.alert ("Cannot support XMLHttpRequest");
}
return xmlHttp;
}

function Reqeustdetail () {
var xmlHttp = Createxmlhttprequest ();
var url =root_path+ "/json";

if (xmlHttp) {
Xmlhttp.open ("POST", url, True);
Xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate = = = 4) {
if (xmlhttp.status = = = 200) {
Parsemessage (xmlHttp);
} else {
Window.alert ("Error number:" + xmlhttp.status
+ ", error describe:" + xmlhttp.statustext);
}
}
};
Xmlhttp.send (NULL);
}
}
function Parsemessage (xmlHttp) {
var jsondoc = xmlhttp.response;
//var obj = eval (' (' +jsondoc+ ') ');

var obj=function ("Return" +jsondoc) ();

var No_id=document.getelementbyid ("no_id");
var Name_id=document.getelementbyid ("name_id");
var Age_id=document.getelementbyid ("age_id");
var Gender_id=document.getelementbyid ("gender_id");
var Job_id=document.getelementbyid ("job_id");
no_id.value=obj.no;
Name_id.value=obj.name;
Age_id.value=obj.age;
Gender_id.value=obj.gender;
Job_id.value=obj.job;
}

This is through the AJAX implementation of asynchronous requests, through the JS document.getElementById to get and assign value, in fact, the AJAX part is basically applied, the color part is to achieve the logic, the yellow part is how to parse json by JS, very simple

6, Test

This is the original page effect:

When click Submit page will not jump refresh, you can observe the URL is not changed, the final result is to bring the data, and the response is very fast, in the case of large amounts of data, the effect may be more obvious, the results such as:

Parse JSON with Fastjson and implement no jump refresh of the page via Js&ajax

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More