JSON简介
JSON是一种轻量级数据交换格式,基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
例:
var obj={shuxing1:'123',shuxing2:'qwe'}; //js对象 var json='["shuxing1":"123","shuxing2";"qwe"]'; //JSON字符串 var jsonarr=[["a":"1"],{"c":"3”1];//JSON数组
JSON可理解为是一种严格的js对象的格式,JSON的属性名必须用双引号括起来,如果值是字符串,也必须用双引号括起来。
JSONP
JSONP (JSON WITH Padding) 是一种可避免引发跨域拒绝问题的传递json数据的方法。一种表现形式就是服务器后台在传递json数据前,先将json数据包裹在一个js函数名里,前端页面需要有这个js函数的同名函数,以便在接收到jsonp数据后能够正确处理。
json不能跨域直接获取,于是就将json包裹在一个合法的js语句中作为js文件传过去。这就是json和jsonp的区别,json是想要的数据,jsonp是实现跨域获取json数据的一种方法。
json返回的是一串数据;而jsonp返回的是脚本代码(包含一个函数调用)。
以登录验证为例,通过jsonp实现前后端数据通信。前端用js/jq实现,后端用servlet实现。
1、定义User类:bean/User
package bean; public class User { private int id; private String email; private String pswd; private String loginName; private String realName; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getPswd() { return pswd; } public void setPswd(String pswd) { this.pswd = pswd; } public String getLoginName() { return loginName; } public void setLoginName(String loginName) { this.loginName = loginName; } public String getRealName() { return realName; } public void setRealName(String realName) { this.realName = realName; } }
2、定义Servlet类:servlet/UserServlet
package servlet; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import bean.User; import net.sf.json.JSONObject; public class UserServlet extends HttpServlet{ /** * */ private static final long serialVersionUID = 1L; public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Connection con=null; PreparedStatement pstmt=null; ResultSet rs=null; User user=null; try{ Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://localhost:3306/my_db?useUnicode=true"; url+="&characterEncoding=utf-8&serverTimezone=Asia/Shanghai"; con=DriverManager.getConnection(url,"root",""); pstmt=con.prepareStatement("select * from user where email=?"); pstmt.setString(1,(String)request.getSession().getAttribute("USERINSESSION")); rs=pstmt.executeQuery(); if(rs.next()){ user=new User(); user.setId(rs.getInt("id")); user.setEmail(rs.getString("email")); user.setLoginName(rs.getString("loginName")); user.setRealName(rs.getString("realName")); } Map<String, Object> dataMap = new HashMap<String, Object>(); dataMap.put("obj", user); JSONObject jsonObject = JSONObject.fromObject(dataMap); String funString = request.getParameter("callback"); response.setCharacterEncoding("UTF-8"); PrintWriter writer = response.getWriter(); writer.write(funString+"("+jsonObject+")"); writer.close(); }catch(Exception e){ }finally{ if(rs!=null) try { rs.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } if(pstmt!=null) try { pstmt.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } if(con!=null) try { con.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } }
3、部署class文件到站点
4、配置servlet应用(/WEB-INF/web.xml)
<?xml version="1.0" encoding="UTF-8"?> <web-app> <servlet> <servlet-name>UserServlet</servlet-name> <servlet-class>servlet.UserServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UserServlet</servlet-name> <url-pattern>/user</url-pattern> </servlet-mapping> </web-app>
5、js实现
$.ajax({ type:'GET', async:true, url:'/user', dataType:'jsonp', success:function(result){ if(null==result.obj) window.location="/user/login.html"; else $('#beValid').append(result.obj.email); }, });