JSONの基本的な使い方

10908 ワード

JSON(JavaScript Object Notation)は、軽量級のデータ交換フォーマットです.簡単に言えば、JSONは、JavaScriptオブジェクトに表示されているデータのセットを文字列に変換し、関数間でこの文字列を簡単に伝達したり、非同期アプリケーションで文字列をWebクライアントからサーバ端末プログラムに転送したりすることができる.この文字列はちょっと変わっていますが、JavaScriptは説明しやすく、JSONは「名前/値ペア」より複雑な構造を表しています.たとえば、配列および複雑なオブジェクトを表すことができ、キーおよび値の単純なリストだけではない.
     JSONはjavascriptの元のフォーマットなので、特別なAPIパッケージやツールバッグは必要ありません.
     実例一:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">

	function testJson(){
		var user = 
		{
			"name":"tom",
			"age":11,
			"info":{"tel":"lf","cellphone":"1223"},
			"address":
				[
			    	{"city":"lf","postcode":"111"},
			    	{"city":"bj","postcode":"222"},
				]
		}
			
		alert(user.name);
		alert(user.info.cellphone);
		alert(user.address[1].postcode);		
	}
</script>
</head>
<body>
	<input type="button" value="TestJson" onclick="testJson()">
</body>
</html>
     直接テストを実行できます.
     実例二:
   次の例は前のバックグラウンドがどうやってインタラクションしているかの例です.まず環境を合わせて、Mavenプロジェクトを作成します.test、具体的な作成プロセスはもはや無駄ではなく、pom.xmlファイル:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.tgb</groupId>
  <artifactId>json_test</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>json_test Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.0</version>
      <scope>test</scope>
    </dependency>
	<dependency>
		<groupId>commons-lang</groupId>
		<artifactId>commons-lang</artifactId>
		<version>2.4</version>
	</dependency>
	 <dependency>
		<groupId>commons-beanutils</groupId>
		<artifactId>commons-beanutils</artifactId>
		<version>1.7.0</version>
	</dependency>  
	<dependency>
		<groupId>commons-collections</groupId>
		<artifactId>commons-collections</artifactId>
		<version>3.2</version>
	</dependency>	
	<dependency>
		<groupId>commons-logging</groupId>
		<artifactId>commons-logging</artifactId>
		<version>1.1.1</version>
	</dependency>
	<dependency>
		<groupId>net.sf.ezmorph</groupId>
		<artifactId>ezmorph</artifactId>
		<version>1.0.6</version>
	</dependency>
	<dependency>
        <groupId>net.sf.json-lib</groupId>
        <artifactId>json-lib</artifactId>
        <version>2.4</version>
        <classifier>jdk15</classifier>
    </dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-webmvc</artifactId>
		<version>3.0.4.RELEASE</version>
	</dependency>
                
  </dependencies>
  <build>
    <finalName>json_test</finalName>
  </build>
</project>
      Web.xmlの構成は以下の通りです
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>json_test</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>springMVC</servlet-name>
  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  	<load-on-startup>1</load-on-startup>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>springMVC</servlet-name>
  	<url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>
      SpringMVCのプロファイルとweb.xmlファイルは同じディレクトリで、springMVC-servlet.xml:
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans 
	http://www.springframework.org/schema/beans/spring-beans.xsd
	http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context-3.0.xsd
	http://www.springframework.org/schema/mvc
	http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
	
	<context:component-scan base-package="com.tgb.json" />

	<mvc:annotation-driven />
	 
	<mvc:resources location="/js/" mapping="/js/**"/>
</beans>
SpringMVCに関するものも多くありません.これは言うべきポイントではないからです.プロジェクトにはJqueryも使われますので、みんなでjqueryバッグをダウンロードしてwebapp/jsに包んでください.
     バックグラウンドコードの作成を開始します.まずPOJOクラスUserを作成します.
package com.tgb.json;

public class User {

	private String username;
	
	private int age;

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}
}
     そしてTestJsonクラスを作成し、このクラスでUserオブジェクト、Listセット、Mapをそれぞれテストする三つの方法を書きました.
package com.tgb.json;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestJson {
	
	@RequestMapping("logon.do")
	public String logon(HttpServletRequest request,HttpServletResponse response){
		return "/test/addUser";
	}
	
	//  User  
	@RequestMapping("/test/json1")
	public void returnUser(HttpServletRequest request,HttpServletResponse response) throws Exception{
		
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		User u1 = new User();
		u1.setUsername("tom1");
		u1.setAge(11);
	
		//Json    
		JSONObject jsonObject = JSONObject.fromObject(u1);
		//  ajax  
		out.print(jsonObject);
	}
	
	//  List
	@RequestMapping("/test/json2")
	public void returnList(HttpServletRequest request,HttpServletResponse response) throws Exception{
		
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		//  List
		List<User> list = new ArrayList<User>();
		
		User u1 = new User();
		u1.setUsername("tom1");
		u1.setAge(11);
	
		User u2 = new User();
		u2.setUsername("jack");
		u2.setAge(22);
		
		list.add(u1);
		list.add(u2);
		//Json  list
		JSONArray jsonArray = JSONArray.fromObject(list);
		//  ajax  
		out.print(jsonArray);
	}
	
	//  Map
	@RequestMapping("/test/json3")
	public void returnMap(HttpServletRequest request,HttpServletResponse response) throws Exception{
		
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		Map<String,User> map = new HashMap<String,User>();
		
		User u1 = new User();
		u1.setUsername("tom1");
		u1.setAge(11);
	
		User u2 = new User();
		u2.setUsername("jack");
		u2.setAge(22);
		
		map.put("u1", u1);
		map.put("u2", u2);
		
		//Json  map
		JSONObject jsonObject = JSONObject.fromObject(map);
		//  ajax  
		out.print(jsonObject);
	}	
}
     バックグラウンドコードの作成を完了しました.ページではバックグラウンドから送られてきたJsonデータを取得し、それを表示して、ページtestJson.jspを作成します.
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="json_test/../js/jquery-1.7.1.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	
	//  User  
	function getJsonObject(){
		$.ajax({
			type:"POST",
			url:"/json_test/test/json1",
			dataType:"json",
			success:function(json){
				alert(json.username);
				alert(json.age);
			},
			error:function(){
				alert("    !");
			}
		});
	}
	
	//  List  
	function getJsonList(){
		$.ajax({
			type:"POST",
			url:"/json_test/test/json2",
			dataType:"json",
			success:function(json){
				alert(json[0].username);
				alert(json[1].age);
			},
			error:function(){
				alert("    !");
			}
		});
	}	
	
	//  Map  
	function getJsonMap(){
		$.ajax({
			type:"POST",
			url:"/json_test/test/json3",
			dataType:"json",
			success:function(json){
				alert(json.u1.username);
				alert(json.u2.age);
			},
			error:function(){
				alert("    !");
			}
		});
	}	
</script>
</head>
<body>
	<input type="button" value="  User  " onclick="getJsonObject()"><br/>
	<input type="button" value="  List" onclick="getJsonList()"><br/>
	<input type="button" value="  Map" onclick="getJsonMap()">
</body>
</html>
     これらの例を通して、Jsonの大体の用途を説明できます.彼とXMLの連絡と違いは自分で調べられます.