准备
新建模块16_json_ajax_i18n，并创建Tomcat实例
1、什么是JSON?
JSON (JavaScript object Notation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对json的支持(包括C,2++,C,Java, JavaSeript, Perl, Python 等)。这样就使得JSON成为理想的数据交换格式。
json是一种轻量级的数据交换格式。
轻量级指的是跟xml做比较。
数据交换指的是客户端和服务器之间业务数据的传递格式 ;
1.1、JSON在JavaScript中的使用。
1.1.1、json的定义
json是由键值对组成，并且由花括号(大括号)包围。每个键由引号引起来，键和值之间使用冒号进行分隔, 多组键值对之间进行逗号进行分隔。
1.1.2、json的访问
json本身是一个对象。
json中的key我们可以理解为是对象中的一个属性。
json中的key访问就跟访问对象的属性一样;json对象.key
1.1.3、json的两个常用方法
json的存在有两种形式
一种是，对象的形式存在，我们叫它json对象。
一种是，字符串的形式存在，我们叫它json字符串。
一般我们要操作json中的数据的时候，需要json对象的格式。
一般我们要在客户端和服务器之间进行数据交换的时候，使用json字符串。
JSON.stringify()
把json对象转换成为json字符串
JSON.parse()
把json字符串转换成为json对象
演示
新建web/script/复制JQuery.js
新建web/json.html
<!DoCTYPE html PUBLIC "-//w3c//DTD HTML 4.@1 Transitional//en" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="pragma" content="no-cache"/> <meta http-equiv="cache-control" content="no-cache"/> <meta http-equiv="Expires" content="e"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //json的定义 var jsonObj={ "key1":12, "key2":"abc", "key3":true, "key4":[11,"arr",false], "key5":{ "key5_1":551, "key5_2":"key5_2_value", }, "key6":[{ "key6_1_1":6611, "key6_1_2":"key6_1_2_value", },{ "key6_2_1":6621, "key6_2_2":"key6_2_2_value", }] }; //json的访问 // alert(typeof (jsonObj));// object json就是一个对象 // alert(jsonObj.key1);//12 // alert(jsonObj.key2); // alert(jsonObj.key3); // alert(jsonObj.key4);//得到数组 //json中数组值的遍历 // for (var i=0;i<jsonObj.key4.length;i++){ // alert(jsonObj.key4[i]); // } // alert(jsonObj.key5.key5_1);//551 // alert(jsonObj.key5.key5_2);//key5_2_value // alert(jsonObj.key6);//得到JSON数组 //取出来的每一个元素都是JSON对象 // var jsonItem=jsonObj.key6[0]; // alert(jsonItem.key6_1_1);//6611 // alert(jsonItem.key6_1_2);//key6_1_2_value //json对象转字符串 // alert(jsonObj);//object var jsonObjString=JSON.stringify(jsonObj);//特别像Java中对象的toString // alert(jsonObjString);//{"key1":12,"key2":"abc","key3":true,"key4":[11,"arr",false], // "key5":{"key5_1":551,"key5_2":"key5_2_value"},"key6":[{"key6_1_1":6611,"key6_1_2":"key6_1_2_value"}, // {"key6_2_1":6621,"key6_2_2":"key6_2_2_value"}]} // json字符串转json对象 var jsonObj2=JSON.parse(jsonObjString); alert(jsonObj2.key1);//12 alert(jsonObj2.key2);//abc </script> </head> <body> </body> </html>
1.2、JSON在java中的使用
导包gson.jar于WEB-INF/lib，并Add as Library
gson-2.2.4.jar免费下载
1.2.1. javaBean和json的互转
1.2.2. list和json的互转
1.2.3. map 和json的互转
演示
新建src/com.pojo/Person
package com.pojo; public class Person { private Integer id; private String name; public Person() { } public Person(Integer id, String name) { this.id = id; this.name = name; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } @Override public String toString() { return "Person{" + "id=" + id + ", name='" + name + '\'' + '}'; } }
新建com/json/PersonListType
package com.json; import com.google.gson.reflect.TypeToken; import com.pojo.Person; import java.util.ArrayList; public class PersonListType extends TypeToken<ArrayList<Person>> { }
新建com/json/PersonMapType
package com.json; import com.google.gson.reflect.TypeToken; import com.pojo.Person; import java.util.HashMap; public class PersonMapType extends TypeToken<HashMap<Integer,Person>> { }
新建com/json/JsonTest
package com.json; import com.google.gson.Gson; import com.google.gson.reflect.TypeToken; import com.pojo.Person; import org.junit.Test; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class JsonTest { // 1.2.1. javaBean和json的互转 @Test public void test1(){ Person person=new Person(1,"我好帅"); //创建Gson对象实例 Gson gson=new Gson(); //toJson方法可以把java对象转换成为JSON字符串 String personJsonString = gson.toJson(person); System.out.println(personJsonString);//{"id":1,"name":"我好帅"} //fromJson方法可以把JSON字符串转回java对象 //第一个参数是JSON字符串 //第二个参数是转换回去的java对象类型 Person person1 = gson.fromJson(personJsonString, Person.class); System.out.println(person1);//Person{id=1, name='我好帅'} } // 1.2.2.list和json的互转 @Test public void test2(){ List<Person> personList=new ArrayList<>(); personList.add(new Person(1,"国哥")); personList.add(new Person(2,"康师傅")); Gson gson=new Gson(); //把List转换为JSON字符串 String personListJsonString = gson.toJson(personList); System.out.println(personListJsonString);//[{"id":1,"name":"国哥"},{"id":2,"name":"康师傅"}] //错误的 // List<Person> list = gson.fromJson(personListJsonString, personList.getClass()); // System.out.println(list);//[{id=1.0, name=国哥}, {id=2.0, name=康师傅}] // Person person = list.get(0);//ClassCastException // System.out.println(person); List<Person> list = gson.fromJson(personListJsonString,new PersonListType().getType()); System.out.println(list);//[{id=1.0, name=国哥}, {id=2.0, name=康师傅}] Person person = list.get(0); System.out.println(person);//Person{id=1, name='国哥'} } // 1.2.3，map 和json的互转 @Test public void test3(){ Map<Integer,Person> personMap=new HashMap<>(); personMap.put(1,new Person(1,"我好帅")); personMap.put(2,new Person(2,"你也好帅")); Gson gson=new Gson(); String personMapJsonString = gson.toJson(personMap); System.out.println(personMapJsonString);//{"1":{"id":1,"name":"我好帅"},"2":{"id":2,"name":"你也好帅"}} // Map<Integer,Person> personMap2 =gson.fromJson(personMapJsonString, new PersonMapType().getType()); Map<Integer,Person> personMap2 =gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());//匿名内部类对象 System.out.println(personMap2);//{1=Person{id=1, name='我好帅'}, 2=Person{id=2, name='你也好帅'}} Person person = personMap2.get(1); System.out.println(person);//Person{id=1, name='我好帅'} } }
2、AJAX请求
2.1、什么是AJAX请求
AJAX即“Asynchronous Javascript And XML"(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会改变
局部更新不会舍弃原来页面的内容
异步就是自己进行自己的，不要等其他执行
2.2、原生的Ajax请求的实例
api
