一、JSON
1.1 什么是JSON
JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。==易于人阅读和编写。同时也易于机器解析和生成。==它基于JavaScript Programming Language,Standard ECMA-262 3rd Edition - December 1999的一个子集。
JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯〈包括C，C++，C#，Java,JavaScript，Perl，Python等）。这些特性使JSON成为理想的数据交换语言。
1.2 JSON对象定义和基本使用
在标准的json格式中，json对象由在括号括起来，对象中的属性也就是json的 key是一个字符串，所以一定要使用双引号引起来。每组 key之间使用逗号进行分隔。
1.2.1、JSON的定义
// 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" }] };
1.2.2、JSON对象的访问
//访问JSON的属性 alert(jsonObj.key1); //12 alert(jsonObj.key2); // abc alert(jsonObj.key3); // true alert(jsonObj.key4);// 得到数组[11,"arr",false] // 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数组
就和普通的创建对象然后调用属性一样的方式
1.3 JSON中两个常用的方法
JSON对象和字符串对象的互转
JSON.stringify( json ); 此方法可以把一个json对象转换成为json字符串
JSON.parse( json string ); 此方法可以把一个json字符串转换成为json对象
// 把json对象转换成为 json字符串 var jsonObjString = JSON.stringify(jsonObj); // 特别像 Java中对象的toString alert(jsonObjString) // 把json字符串。转换成为json对象 var jsonObj2 = JSON.parse(jsonObjString); alert(jsonObj2.key1);// 12 alert(jsonObj2.key2);// abc
1.4 JSON在java中的使用
我们要使用json和java中使用，我们需要使用到一个第三方的包。它就是gson.jar
Gson是 Google 提供的用来在Java对象和JSON 数据之间进行映射的Java类库。可以将一个JSON 字符串转成一个Java 对象，或者反过来。
json 在 java 中的操作。常见的有三种情况。
1、java 对象和 json 的转换
2、java 对象 list 集合和 json 的转换
3、map 对象和 json 的转换
package com.atguigu.json; import com.atguigu.pojo.Person; import com.google.gson.Gson; import com.google.gson.reflect.TypeToken; import org.testng.annotations.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,"pyy好帅!"); // 创建Gson对象实例 Gson gson = new Gson(); // toJson方法可以把java对象转换成为json字符串 String personJsonString = gson.toJson(person); System.out.println(personJsonString); // fromJson把json字符串转换回Java对象 // 第一个参数是json字符串 // 第二个参数是转换回去的Java对象类型 Person person1 = gson.fromJson(personJsonString, Person.class); System.out.println(person1); } // 1.2.2、List 和json的互转 @Test public void test2() { List<Person> personList = new ArrayList<>(); personList.add(new Person(1, "lbj")); personList.add(new Person(2, "curry")); Gson gson = new Gson(); // 把List转换为json字符串 String personListJsonString = gson.toJson(personList); System.out.println(personListJsonString); List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType()); System.out.println(list); Person person = list.get(0); System.out.println(person); } // 1.2.3、map 和json的互转 @Test public void test3(){ Map<Integer,Person> personMap = new HashMap<>(); personMap.put(1, new Person(1, "kb")); personMap.put(2, new Person(2, "mady")); Gson gson = new Gson(); // 把 map 集合转换成为 json字符串 String personMapJsonString = gson.toJson(personMap); System.out.println(personMapJsonString); // 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); Person p = personMap2.get(1); System.out.println(p); } }
二、Ajax
2.1 什么是Ajax?
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。
ajax是一种浏览器异步发起请求。局部更新页面的技术。
什么是异步？
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果我们可以再来处理这个事。（当然，在其他语境下这个解释可能就不对了）
这个很重要，如果不是这样的话，我们点完按钮，页面就会死在那里，其他的数据请求不会往下走了。这样比等待刷新似乎更加讨厌。
（虽然提供异步通讯功能的组件默认情况下都是异步的，但它们也提供了同步选项，如果你好奇把那个选项改为false的话，你的页面就会死在那里）
通俗的理解
如你刚开始学习网页制做，一个页面一个页面的转跳，开新窗口，输入，关闭，原窗口要手动或自动的刷新。相比现在流行的网页很low是不是。
现在我写个回答，发布，页面不用完全刷新，直接加在页面下方，是不是感觉体验好了些？
ajax，异步javascript和xml，就是不关闭不转跳不刷新的情况下，在网页后台提交数据，部分更新页面内容，将网页的用户体验提升到接近原生程序的地步。
原生的Ajax请求
1、我们首先要创建XMLHttpRequest 对象
2、调用open方法设置请求参数
3、调用send方法发送请求
4、在send方法前绑定onreadystatechange 事件，处理请求完成后的操作。
创建一个html页面，发起请求
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 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="0" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlhttprequest = new XMLHttpRequest(); // 2、调用open方法设置请求参数 xmlhttprequest.open("GET","http://localhost:8080/Day11_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true); // 4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。 xmlhttprequest.onreadystatechange = function(){ if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) { alert("收到服务器返回的数据：" + xmlhttprequest.responseText); var jsonObj = JSON.parse(xmlhttprequest.responseText); // 把响应的数据显示在页面上 document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name; } } // 3、调用send方法发送请求 xmlhttprequest.send(); alert("我是最后一行的代码"); } </script> </head> <body> <!-- <a href="http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax">非Ajax</a>--> <button onclick="ajaxRequest()">ajax request</button> <button onclick="ajaxRequest()">ajax request</button> <button onclick="ajaxRequest()">ajax request</button> <button onclick="ajaxRequest()">ajax request</button> <button onclick="ajaxRequest()">ajax request</button> <div id="div01"> </div> <table border="1"> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </table> </body> </html>
创建一个AjaxServlet程序接受请求
package com.atguigu.servlet; import com.atguigu.pojo.Person; import com.google.gson.Gson; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class AjaxServlet extends BaseServlet { protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("Ajax请求过来了"); Person person = new Person(1, "curry"); try { Thread.sleep(3000); } catch (InterruptedException e) { e.printStackTrace(); } // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryAjax == 方法调用了"); Person person = new Person(1, "curry"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryGet == 方法调用了"); Person person = new Person(1, "curry"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryPost == 方法调用了"); Person person = new Person(1, "curry"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQueryGetJSON == 方法调用了"); Person person = new Person(1, "curry"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println(" jQuerySerialize == 方法调用了"); System.out.println("用户名：" + req.getParameter("username")); System.out.println("密码：" + req.getParameter("password")); Person person = new Person(1, "curry"); // json格式的字符串 Gson gson = new Gson(); String personJsonString = gson.toJson(person); resp.getWriter().write(personJsonString); } }
2.3 JQuery的Ajax请求
编写原生的JavaScript要写很多的代码。所以使用起来非常的不方便，我们一般会使用JavaScript 的框架来解决这个问题比如Jquery框架
四个Ajax请求方法
$.ajax方法
$.get方法
$.post方法
$.getJSON方法
一个表单序列化方法: serialize()表单序列化方法
如何使用上面的几个方法？
JQuery中和 Ajax请求有关的方法有四个;
$.ajax请求参数 url: 请求的地址 type : 请求的方式 get或 post data : 请求的参数 string 或json success: 成功的回调函数 dataType: 返回的数据类型 常用json或 text Jquery AjAx写法 $.ajax({ url:"servlet", type:"post",//get data:{}, async:true, cache:true, complete:function(){}, traditional:false, dataType:"json", success:function(data){}, error:function(){} }); $.post("servlet",{},function(data){},"json"); $.get("servlet",function(data){},"json");
2.4 使用场景
登录失败不跳转页面
注册实时提示用户名是否存在。
管理图片服务器，进行延时加载。
