Ajax_Json
Ajax
1. 同步请求&异步请求
- 同步请求
- 请求方式【语法格式】
- <form action="#" method=""></form>
- <a href="#"></a>
- <img src="#">
- location.href = “”
- 等…
- 同步请求不足
- 浏览器向服务器发送请求后,如服务器未响应【响应之前网速慢】,容易出现“卡死”状态,降低用户体验度。
- 即使当前页面需要加载【刷新】少量数据,也必须刷新整个页面。增加服务器压力。
- 请求方式【语法格式】
- 异步请求
- 请求方式
- ajax
- 使用Ajax注意事项
- 使用异步请求,弥补同步请求不足。所以,一般在研发中,我们经常会遇到同步&异步共同使用。
- 使用Ajax也可以发送同步请求:【async:false】即可。
- 请求方式
2. Ajax简介
- ajax全称:Asynchronous Javascript And XML【异步JS和XML】
- ajax实际是:在不发生页面跳转,就可以使用JavaScript异步发送请求并接受响应【改写局部内容】的技术。
3. Ajax语法
回调函数:在特定情况下,会自动调用回目标位置的函数。
-
ajax标准语法
$.ajax({ type: "POST", //请求方式【GET|POST|PUT|DELETE】 url: "AjaxServlet", //设置请求URL路径 // data: "name=John&location=Boston", //请求参数 data: {"name":"gaohu","location":"beijing"}, //请求参数 dataType:"json", //预期服务器返回的数据类型【text|json】 success: function(rs){ //请求成功时回调函数 alert( "Data Saved: " + rs.location ); }, error:function () { //请求失败回调函数 alert("请求失败!"); } });
-
ajax简写语法
-
$.get(url,[data],[success:fn],[dataType]); //get请求
-
$.post(url,[data],[success:fn],[dataType]); //post请求
-
$.getJSON(url,[data],[success:fn]); //get请求,服务器预期返回JSON格式
-
Json
1. Json简介
- Json全称:JavaScript Object Notation【是JS提供的一种轻量级的数据交换格式】
- Json对象本质就是JavaScript对象,该对象可以在不同语言,不同生态之间进行数据传递。
- Json对象可以与字符串之间类型转换。
2. Json语法
-
语法格式:var jsonObj = {“key”:value,“key2”:value2,…}
-
建议key是string类型,value是javaScript支持的数据类型即可。
- js数据类型:string、number、boolean、undefined、null、数组、函数、对象
-
基本使用
var jsons = { "key1":"abc", // 字符串类型 "key2":1234, // Number "key3":[1234,"21341","53"], // 数组 "key4":{ // json类型 "key4_1" : 12, "key4_2" : "kkk" }, "key5":[{ // json数组 "key5_1_1" : 12, "key5_1_2" : "abc" }, { "key5_2_1" : 41, "key5_2_2" : "bbj" }] }; // alert(jsons.key1); //"abc" // alert(jsons.key3[2]); //53 // alert(jsons.key4.key4_2); //"kkk" // alert(jsons.key5[0].key5_1_2); //"abc" alert(jsons.key5[1].key5_2_1); //41
3. 使用Json在不同语言之间,数据交互问题
3.1 JavaScript语言
- Json对象转发为Json字符串
- var jsonString = JSON.stringify( jsonObj ):此方法可以把一个json对象转换成为json字符串
- Json字符串转换为Json对象
- var jsonObj = JSON.parse( jsonString ): 此方法可以把一个json字符串转换成为json对象
3.2 Java语言
使用Google下的Gson对象
-
Java对象【Bean|List|Map】转换为JsonString【json字符串】
- String jsonString = gson.toJson(Object obj);
-
JsonString转发为Java对象【Bean|List|Map】
-
Object obj = gson.fromJson(“jsonString”,Object.class);
- Object obj = gson.fromJson(“jsonString”,Type type);
-
示例代码
/** * JavaBean与jsonString转换问题 */ @Test public void testJavaBeanToJsonString(){ Gson gson = new Gson(); Student student = new Student(1001,"gaohu"); //student->jsonString // String jsonString = "{\"id\":1001,\"name\":\"gaohu\"}"; //第三方Gson String jsonString = gson.toJson(student); System.out.println("jsonString = " + jsonString); //jsonString->JavaBean Student student1 = gson.fromJson(jsonString, Student.class); System.out.println("student1 = " + student1); } /** * List */ @Test public void testListToJsonString(){ List<Student> list = new ArrayList<>(); list.add(new Student(1001,"gaohu")); list.add(new Student(1002,"gaohu2")); list.add(new Student(1003,"gaohu3")); //list->jsonString String jsonString = {{},{},{}} 或 [{},{},{}] Gson gson = new Gson(); String jsonString = gson.toJson(list); System.out.println("jsonString = " + jsonString); //jsonString->List<Student> // ArrayList arrayList = gson.fromJson(jsonString, ArrayList.class); // System.out.println(((Student)arrayList.get(0)).getName()); //错误的, com.google.gson.internal.LinkedTreeMap List<Student> list1 = gson.fromJson(jsonString,new TypeToken<List<Student>>(){}.getType()); for (Student student : list1) { System.out.println("student.getName() = " + student.getName()); } } /** * Map */ @Test public void testMapToJsonString() { Map<String,Student> map = new HashMap<>(); map.put("gaohu",new Student(1001,"gaohu")); map.put("gaohu2",new Student(1002,"gaohu2")); map.put("gaohu3",new Student(1003,"gaohu3")); //将map->jsonString Gson gson = new Gson(); String jsonString = gson.toJson(map); System.out.println("jsonString = " + jsonString); //jsonString->Map<String,Student> Map<String,Student> map1 = gson.fromJson(jsonString,new TypeToken<Map<String,Student>>(){}.getType()); Student student = map1.get("gaohu"); System.out.println("student = " + student.getName()); }