Marco's Javaの【JSON&AJAX】

121443 ワード
JSON AJAX Java JavaScript JQuery データベース
JSON
JSON(JavaScript Object Notation)は、軽量レベルのデータ交換フォーマットです.JSONはJavaScriptオブジェクトに表示されるデータのセットを文字列に変換することができ、JSONは固定文字列であるため、任意のプラットフォームで実行することができ、それ自体がプラットフォームをまたぐ特性を備えている.
Jsonのフォーマット
オブジェクトの書式設定
{}で囲まれた内容はオブジェクトを表し、データ構造は:{ key1 :value1, key2：value2}であり、Mapのキー値ペアに類似する
{
     "student":{
     "userName":"marco","sex":" ","age":18}}

解析対象の方法:
JSONObject jsonObject = new JSONObject(jsonStr);
jsonObject.getJSONObject("student");
Student stu = new Student ();
stu.setName(jsonObj .getString("name"));
stu.setSex(jsonObj.getString("sex"));
stu.setAge(jsonObj.getInt("age"));

配列フォーマット
[]括る内容は配列を表し、データ構造は:["java","javascript","android"]で、下付きで値を取ることができる(一般的にはオブジェクトを組み合わせて使用することができる)
{
     "students":[{
     "userName":"marco","sex":" ","age":18},{
     "userName":"sunnie","sex":" ","age":17}]}

解析配列:
JSONObject jsonObject = new JSONObject(jsonStr);
jsonObject.getJSONObject("students");
List<Person> list = new ArrayList<Person>();
for (int i = 0; i < jsonArray.length(); i++) {
     
	JSONObject jsonObj = (JSONObject) jsonArray.get(i);
	//   javaBean  
	Student stu = new Student ();
	stu.setName(jsonObj .getString("name"));
	stu.setSex(jsonObj.getString("sex"));
	stu.setAge(jsonObj.getInt("age"));
	list.add(stu );
}

JSON文字列の生成方法:JSOnObjectはtoStringメソッドを書き換えたので、そのJSOnObjectオブジェクトを直接印刷すればよい
System.out.println(jsonObject.toString());

FastJSON
Fastjsonはアリババが開発した高性能のJSON解析ツールの特徴である:1高速FAST(jacksonを含む他のJavaベースの解析器やジェネレータよりも速い)②強力(通常のJDKクラスをサポートするには任意のJava Bean Class、Collection、Map、Date、enumを含む)③ゼロ依存(JDKを除く他のクラスライブラリに依存していない)上記の栗は、以下のようにそれぞれ入手可能である
Student stu = JSON.parseObject(jsonStr, Student.class);//    
List<Student> list = JSON.parseArray(jsonStr, Student.class);//

とても簡潔ですね.以下は私がカプセル化したクラスでJSON文字列からJavaBeanへの移行を実現していますが、注意しなければならないのは
1.定義されたJavaBeanの属性名は、変換が必要なJSON形式の文字列の属性名に1つずつ対応する.各属性を統一的に生成するget/setメソッドを推奨
public class JsonToBean {
     
	public static void main(String[] args) {
     
		InputStream resource = JsonToBean.class.getClassLoader().getResourceAsStream("json.txt");
		BufferedReader br = new BufferedReader(new InputStreamReader(resource));
		String jsonStr;
		try {
     
			jsonStr = br.readLine();
			@SuppressWarnings("unchecked")
			Result<Data> result = JsonToBean.parseObject(jsonStr, Result.class);
			System.out.println(result.getAppCode());
			System.out.println(result.getDataType());
			System.out.println(result.getPageToken());
			System.out.println(result.getRetcode());
			System.out.println(result.getData());
		} catch (Exception e) {
     
			e.printStackTrace();
		}
	}
	
	private static class JsonToBeanInstance {
     
		private static final JsonToBean jsonToBean = new JsonToBean();
	}
	
	private  JsonToBean() {
     }
	
	public static JsonToBean getParser() {
     
		return JsonToBeanInstance.jsonToBean;
	}
 	
	@SuppressWarnings("unchecked")
	public static <T> T parseObject(String jsonStr, Class<T> clazz) {
     
		Field[] fileds = clazz.getDeclaredFields();
		JSONObject jsonObject;
		T obj = null;
		try {
     
			jsonObject = new JSONObject(jsonStr);
			obj = clazz.newInstance();
			
			for (Field field : fileds) {
     
				String type = field.getType().getSimpleName();
				String fieldName = field.getName();
				field.setAccessible(true);
				if(type.equals("List")) {
     
					org.json.JSONArray jsonArray = jsonObject.getJSONArray(fieldName);
					List<T> list = new ArrayList<T>();
					for (int i = 0; i < jsonArray.length(); i++) {
     
						list.add((T)jsonArray.get(i));
					}
					field.set(obj,list);
				} else if(type.equals("String")) {
     
					field.set(obj,jsonObject.getString(fieldName));
				} else if(type.equals("boolean")) {
     
					field.set(obj,jsonObject.getBoolean(fieldName));
				} else if(type.equals("double")) {
     
					field.set(obj,jsonObject.getDouble(fieldName));
				} else if(type.equals("int")) {
     
					field.set(obj,jsonObject.getInt(fieldName));
				} else if(type.equals("long")) {
     
					field.set(obj,jsonObject.getLong(fieldName));
				} 	
			}
			
		} catch (IllegalAccessException e) {
     
			e.printStackTrace();
		} catch (InstantiationException e) {
     
			e.printStackTrace();
		} catch (JSONException e) {
     
			e.printStackTrace();
		} 
		return obj;
	}
}

AJAX
AJAX:Asynchronous JavaScript and XML(非同期JavaScriptとXML).AJAX技術の目的は、新しいページを再ロードせずに一部のページを更新できるようにすることである.バックグラウンドのサーバと少量のデータ交換を行うことで、ページの非同期更新を実現することである.
同期と非同期とは:
同期:要求の発行->サーバー処理の待機->処理が完了してクライアントに戻る
その間、クライアントブラウザは何もできません.待つしかありません.例えば、私たちは営業所を移動してチャージします.私たちはお金を払って、スペシャリストがチャージしてあげます.チャージが完了するのを待ってから離れる必要があります.
要求の発行
応答を返す
クライアント
サーバ
非同期:要求はJSイベントによってトリガーされます->サーバーで処理されます(ブラウザはまだ他のことができます)->処理完了
例えば、私たちはアリペイで通話料のチャージを行います.私たちが支払った後、アリペイのバックグラウンドは一時的に料金を差し引いて移動のバックグラウンドに要求を送ります.その間、お客様はアリペイを脱退して、他のことをすることができます.もしチャージに失敗したら、アリペイは支払いの失敗情報を返し、チャージの費用を返します.
JSイベントトリガコミット要求
バックグラウンドインタラクティブ送信リクエスト
バックグラウンドインタラクティブリターンリクエスト
応答を返す
クライアント
サーバ
サーバ
では、このようなメリットは何でしょうか.1)非同期インタラクションモードにより、ブラウザとサーバー間の伝送を最適化し、不要なデータ往復を低減した2)帯域幅占有を低減した3)データの変更によりページ全体がリフレッシュされず、ローカルのみがリフレッシュされ、お客様の体験度が向上した
XMLHttpRequestオブジェクト
XMLHttpRequestは、バックグラウンドでサーバとデータを交換するために使用されます.これは、Webページ全体を再ロードせずに、Webページの一部を更新できることを意味します.
jQuery ajaxメソッド
 $.ajax({
     
    url:'user.action',  //           
    type:'POST', //    ,GET POST
	async:true,    // false,    ,   true
 	//         ，   json  {key:value}，    "key= 
	// value&key2=valu2..."    
   	data: {
     "name":"zhangsan","age":20 },
    timeout:5000,    //    
    dataType:’text',    //       ：json/xml/html/script/jsonp/text
    //             ,data           
    success:function(data){
     
        console.log(data);
	},
	//             
    error:function(xhr,textStatus){
     
        console.log('  ');
        console.log(xhr);
        console.log(textStatus);
	}，
	//             ，           
	complete : function(xhr, text) {
     
		console.log("    ");
		console.log(xhr);
		console.log(text);
	}
});

実はAjaxは私たちの日常生活の中で存在しています.例えば、アカウントのパスワードを登録している間に、問題に直面します.アカウントのパスワードを入力した後、入力が間違っていれば、現在のページはジャンプするのではなく、ページのある位置で注意文字の入力が間違っていることをポップアップします.再入力してください.考えてみてください.Ajaxがなければ、アカウントのパスワードを入力してエラーが発生した後、バックグラウンドはまずチェックします.正しくなければ、リダイレクトやlocationを使用します.href方式でページをジャンプしてリフレッシュするのは、お客様の体験度が悪いです.したがって、Ajaxを使用すると、この問題をうまく解決することができます.
次に、ケースシミュレーションでログインします.
項目要求1.Ajaxを使用してログイン機能2を実現する.検証コード検査3.Cookieテクノロジーを使用してアカウントのパスワードを覚える
まず、アカウントとパスワードを含むUserクラスを新規作成する必要があります.ここでは、他のフィールドを追加することができます.もちろん、データベースにもu_が必要です.userテーブル、フィールド値、およびUserのプロパティに対応します.書く前に、私たちはまず準備をします.簡易版Connection Pool接続プールを手書きでutilパッケージに入れました
public class ConnPool {
     
	private static String driver = null;
	private static String url = null;
	private static String userName = null;
	private static String password = null;
	private int minSize = 5;//       5
	private int maxSize = 10;//       10
	private static Properties pro = new Properties();
	
	//       ，       Connection
	private LinkedList<Connection> connPool = new LinkedList<Connection>();
	//         
	private int currentSize = 0;
	//      
	public static void main(String[] args) {
     
		ConnPool cp = new ConnPool();
		System.out.println(cp.getConnection());
		System.out.println(cp.getConnection());
		System.out.println(cp.getConnection());
	}
	//    
	static {
     
		try {
     
			pro.load(ConnPool.class.getClassLoader().getResourceAsStream("config.properties"));
			driver = pro.getProperty("driver");
			url = pro.getProperty("url");
			userName = pro.getProperty("username");
			password = pro.getProperty("password");
			Class.forName(driver);
		} catch (IOException e) {
     
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
     
			e.printStackTrace();
		}
	}
	
	public ConnPool() {
     
		for (int i = 0; i < minSize; i++) {
     
			Connection conn = this.createConn();
			connPool.add(conn);
			currentSize ++;
		}
	}

	//      (    )
	private  Connection createConn() {
     
		Connection conn = null;
		//              Connection
		try {
     								
			conn = DriverManager.getConnection(url, userName, password);
		} catch (SQLException e) {
     
			e.printStackTrace();
		}
		return conn;
	}
	
	public  Connection getConnection() {
     
		if(connPool.size() > 0) {
     
			Connection conn = connPool.getFirst();
			connPool.removeFirst();
			return conn;
		} else if(connPool.size()==0 && currentSize< 8) {
     
			currentSize++;
			connPool.addLast(this.getConnection());
			Connection conn = connPool.getFirst();
			connPool.removeFirst();
			return conn;
		}
		throw new RuntimeException("           ，   ");
	}
	
	public  void realse(Connection conn) {
     
		//ThreadLocal       connection
		connPool.add(conn);
	}
	//       
	public static void realse(PreparedStatement ps) {
     
		if(ps != null) {
     
			try {
     
				ps.close();
			} catch (SQLException e) {
     
				e.printStackTrace();
			}
		}
	}
	public  static void realse(ResultSet rs, PreparedStatement ps) {
     
		if(rs != null) {
     
			try {
     
				rs.close();
			} catch (SQLException e) {
     
				e.printStackTrace();
			}
		}
		realse(ps);
	}
}

サーブレットが戻すデータを格納するResultクラスを追加(主にlayuiフロントエンドの開発に適応するため)
public class Result {
     
	/**
	 *     
	 */
	private String code;
	/**
	 *     
	 */
	private String message;
	/**
	 *      
	 */
	private Object data;
	

	public Result(CodeMsg codeMsg) {
     
		super();
		this.code = codeMsg.getCode();
		this.message = codeMsg.getMessage();
	}
	
	public Result(CodeMsg codeMsg, Object data) {
     
		super();
		this.code = codeMsg.getCode();
		this.message = codeMsg.getMessage();
		this.data = data;
	}
	
	public Result(CodeMsg codeMsg, String errorMsg) {
     
		super();
		this.code = codeMsg.getCode();
		this.message = errorMsg;
	}
	
	public String getCode() {
     
		return code;
	}
	public void setCode(String code) {
     
		this.code = code;
	}
	public String getMessage() {
     
		return message;
	}
	public void setMessage(String message) {
     
		this.message = message;
	}
	public Object getData() {
     
		return data;
	}
	public void setData(Object data) {
     
		this.data = data;
	}
	/**
	 *   toString  ，    JSON           
	 */
	@Override
	public String toString() {
     
		return JSONObject.toJSONString(this);
	}
	
	/**
	 *      code        
	 * @return
	 */
	public boolean isSuccess() {
     
		return "200".equals(this.code);
	}
}

次に、CodeMessage情報を格納する列挙を新規に作成します.
public enum CodeMsg {
     
	SUCCESS("200","SUCCESS"),
	LOGIN_ERROR("10001","USERNAME OR PASSWORD INCORRECT"),
private final String code;
	private final String message;
		
	private CodeMsg(String code, String message) {
     
		this.code = code;
		this.message = message;
	}
	public String getCode() {
     
		return code;
	}
	public String getMessage() {
     
		return message;
	}
}

準備が完了したら、UserDaoレイヤインタフェースを新規作成します.
public interface UserDao {
     
	//      
	public User query(String userName,String password);
}

新しいUserDaoImpl(UserDaoレイヤインタフェースの実装クラス)
public class UserDaoImpl extends BaseDao implements UserDao{
     
	private ConnPool connPool = new ConnPool();//       
	/**
	 *           user       ，     ，   user  ，    null
	 */
	public User query(String userName, String password) {
     
		Connection conn = connPool.getConnection();
		String sql = "select id as id, user_name as userName, password as password, real_name as realName where user_name = ? and password = ?";
		List<User> users = this.queryData(conn, User.class, sql, userName, password);
		connPool.realse(conn);
		return users.size() > 0?users.get(0):null;
	}

次に、新しいUserService(Serviceレイヤインタフェース)を作成します.
public interface UserService {
     
	Result login(String userName, String password);
}

新しいUserServiceImpl(UserServiceレイヤインタフェースの実装クラス)
public class UserServiceImpl implements UserService{
     
	@SuppressWarnings("unused")
	private UserDao userDao;
	
	public UserServiceImpl() {
     
		userDao = new UserDaoImpl();
	}
	@Override
	public Result login(String userName, String password) {
     
		User user = userDao.query(userName, password);
		Result result = new Result(CodeMsg.LOGIN_ERROR);
		if(user != null) {
     
			result = new Result(CodeMsg.SUCCESS, user);
		}
		return result;
	}
}

このログイン機能には認証コードが追加され、パスワードを覚える操作が追加されているので、私は単独でサーブレットを作成して認証コードを生成しました.
@WebServlet(name = "IdentifyCode", urlPatterns = "/identifyCode.do")
public class IdentifyCode extends HttpServlet{
     

	private static final long serialVersionUID = 6452075665545332363L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     
		BufferedImage img = new BufferedImage(100, 46, BufferedImage.TYPE_INT_RGB);
		Graphics graphics = img.getGraphics();
		graphics.setColor(Color.WHITE);
		graphics.fillRect(0,0, 200, 100);
		this.setInterferingLine(Color.LIGHT_GRAY, graphics);
		//       
		graphics.setColor(Color.RED);
		graphics.setFont(new Font("  ", Font.ITALIC | Font.BOLD, 22));
		//drawString(str , x,y): str :          x          y        
		String code = this.getRandomCode(4);
		graphics.drawString(code,25,30);
		req.getSession().setAttribute("identifyCode", code);
		//            
		resp.setHeader("Pragma", "no-cache");
		resp.setHeader("Cache-Control", "no-cache");
		resp.setHeader("Expires", "0");
		ImageIO.write(img, "jpg", resp.getOutputStream());
	}
	public void setInterferingLine(Color color,Graphics graphics) {
     
		graphics.setColor(color);
		Random random = new Random();
		for (int i = 0; i < 5; i++) {
     
			graphics.drawLine(random.nextInt(100), random.nextInt(46), random.nextInt(100), random.nextInt(46));
		}
	}
	
	public String getRandomCode(int m) {
     
		String[] str = new String[]{
     "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i",
				"j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D",
				"E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y",
				"Z" };
		String code = "";
		Random random = new Random();
		for (int i = 0; i < m; i++) {
     
			int index = random.nextInt(62);
			code = code + str[index];
		}
		return code;
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     

	}
	
}

最後にUserServiceletクラスを構築し、ページにパスワードを覚える機能を追加しました.この機能は、前に述べたCookieテクノロジーで実現できます.
@WebServlet(urlPatterns = "/userServlet.do")
public class UserServlet extends HttpServlet {
     
	
	private static final long serialVersionUID = 522964361071245256L;
	private UserService userSvc = new UserServiceImpl();
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
		doPost(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
     
		String method = request.getParameter("method");
		System.out.println("method: " + method);
		if("login".equals(method)) {
     
			this.login(request, response);
		}
	}
	/**
	 *                    
	 * @param request
	 * @param response
	 * @throws IOException
	 */
	private void login(HttpServletRequest request, HttpServletResponse response) throws IOException {
     
		Map<String, String[]> parames= request.getParameterMap();
		String resultStr = CheckParamUtil.checkEmpty(parames, "userName","password");
		if(resultStr != null) {
     
			Result error = new Result(CodeMsg.PARAM_ERROR, resultStr);
			response.getWriter().print(error.toString());
		}
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		String identifyCode = request.getParameter("identifyCode");
		String code = (String) request.getSession().getAttribute("identifyCode");
		String rememberPwd = request.getParameter("rememberPwd");
		//         
		if(!code.equals(identifyCode)) {
     
			Result error = new Result(CodeMsg.CHECK_CODE_ERROR);
			ServletUtil.print(error, response);
			return;
		}	
		Result result = userSvc.login(userName, password);
		if(result.isSuccess()) {
     
			//  cookie         
			Cookie uname = new Cookie("userName", userName);
			Cookie pwd = new Cookie("password", password);
			Cookie remember = new Cookie("rememberPwd", rememberPwd);
			if("keep".equals(rememberPwd)) {
     
				uname.setMaxAge(60*60*24*3);
				pwd.setMaxAge(60*60*24*3);
				remember.setMaxAge(60*60*24*3);
			} else {
     
				uname.setMaxAge(0);
				pwd.setMaxAge(0);
				remember.setMaxAge(0);
			}
			response.addCookie(uname);
			response.addCookie(pwd);
			response.addCookie(remember);
			//      
			AlreadyEntryListener.isEntered(request.getSession(), userName);
			//           
			User user = (User) result.getData();
			Role role = userSvc.searchRoleById(user.getId());//       role   session 
			request.getSession().setAttribute("user", user);
			request.getSession().setAttribute("role", role);
			result = new Result(CodeMsg.SUCCESS);
			ServletUtil.print(result, response);
			return;
		} 
		result = new Result(CodeMsg.LOGIN_ERROR);
		response.getWriter().print(result.toString());
		return;
	}

コアが来た!!フロントエンドコードが多く、柄も多いので、自分の想像を自分で発揮して、自分のページを作成することができます.
<script type="text/javascript">
		/*  JQuery  button  */
       	$("#login-btn").click(function() {
     
       		var userName = $("#userName").val();
       		var password = $("#password").val();
       		console.log(userName + " " + password);
       		var identifyCode = $("#identifyCode").val();
       		var rememberPwd = $("#remember").val();
       		var hint = $("#hint");//            
       		if(userName == null || userName == "") {
     
       			hint.text("USER NAME CAN'T BE NONE");
       			$("#userName").css({
     "border":"1px solid red"});
       			return;
       		}
       		if(password == null || password == "") {
     
       			hint.text("PASSWORD CAN'T BE NONE");
       			$("#password").css({
     "border":"1px solid red"});
       			return;
       		}
       		if(identifyCode == null || identifyCode == "") {
     
       			hint.text("IDENTIFYCODE CAN'T BE NONE");
       			$("#identifyCode").css({
     "border":"1px solid red"});
       			return;
       		}
       		var data = {
     "userName":userName,"password":password,"identifyCode":identifyCode,"rememberPwd":rememberPwd};
       		$.post("userServlet.do?method=login",data,function(data) {
     //  Ajax  post          
 					/*               JSON      ，            JSON  */
 					var result = $.parseJSON(data);
 					console.log(result.code);
       			if(result.code == '200') {
     
       				location.href = "main.jsp";//        code 200，         
       			} else {
     
       				hint.text(result.message);//              
       			}
       		})
       	})
       		/*       ，    */
          	$("#identifyCodeImg").click(function() {
     
          		/*         ，     UUID，               ，                  ，        */
      			$(this).attr("src","identifyCode.do?" + new Date());
      		})
       </script>
Dialogflow v1とv2のInline Editorを使った会話サンプル
Dialogflow のチュートリアルが間違ってた話