- Ajax 简介
Ajax 即 “Asynchronous Javascript And XML” （异步 JavaScript 和 XML），是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。通过在后台与服务器进行少量数据交换， Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。
- Ajax 的使用
- XMLHttpRequest 对象
XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript 、 VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。
- Ajax 的使用步骤
- 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest(); - 给定请求方式以及请求地址
xhr.open("get","http://www.example.com"); - 发送请求
xhr.send(); -
获取服务器端给客户端的响应数据
xhr.onreadystatechange = function(){ //0:open()没有被调用 //1:open()正在被调用 //2:send()正在被调用 //3:服务端正在返回结果 //4:请求结束，并且服务端已经结束发送数据到客户端 if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById("span").innerHTML=xhr.responseText; alert(xhr.responseText); } }
- 创建 XMLHttpRequest 对象
- Ajax 的运行原理
- XMLHttpRequest 对象
-
JSON 详解
-
JSON 简介JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类型的子集。
-
为什么要使用 JSON在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。 JSON 比 XML 更小、更快，更易解析。
-
JSON 格式的特征
-
JSON 的语法规则JSON 是按照特定的语法规则所生成的字符串结构。大括号表示 JSON 的字符串对象。 { }属性和值用冒号分割。 {" 属性 " : "value"}属性和属性之间用逗号分割。 {" 属性 ":"value" , " 属性 ":"value",...}中括号表示数组。 [ {" 属性 ":"value"...},{" 属性 ":"value"...} ] [{"userid":1,"username":"admin"},{"userid":2,"username":"oldlu"}]
-
JOSN 的 6 种数据类型string ：字符串，必须要用双引号引起来。number ：数值，与 JavaScript 的 number 一致，object ： JavaScript 的对象形式， { key:value } 表示方式，可嵌套。array ：数组， JavaScript 的 Array 表示方式 [ value ] ，可嵌套。true/false ：布尔类型， JavaScript 的 boolean 类型。null ：空值， JavaScript 的 null 。
-
-
Jackson 的使用在 JDK 中并没有内置操作 JSON 格式数据的 API ，因此使用处理 JSON 格式的数据需要借助第三方类库。几个常用的 JSON 解析类库：Gson: 谷歌开发的 JSON 库，功能十分全面。FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器”
-
Jackson 简介Jackson 是一种解析 JSON 格式数据的 API ，也是最流行，速度最快的 JSON API 。在SpringMVC 中默认使用 Jackson API 处理 JSON 格式的数据。Jackson 下载地址：https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotationshttps://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-corehttps://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
-
在响应中通过 JSON 格式传递数据在响应中使用 Jackson 处理 JSON 格式数据的步骤：添加 jackson-annotations.jar 、 jackson-core.jar 、 jackson-databind.jar通过 jackson API 将 Java 对象转换 JSON 格式修改响应头，响应类型为 application/json将结果基于字符输出流推回客户端浏览器在页面的中通过 JavaScript 的 JSON.parse() 函数将 JSON 格式的数据转换为 JavaScript对象
-
通过 JSON 格式在响应中传递单个对象需求：定义一个 Users 类，包含 userid 、 username 属性。实例化一个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。将 Users 对象中的数据插入到页面中。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script> function but() { var ajax=new XMLHttpRequest(); ajax.open("get","single.do"); ajax.send(); ajax.onreadystatechange=function(){ if(ajax.readyState == 4 && ajax.status == 200){ alert(ajax.responseText); //通过js的内置对象JSON中的parse函数解析拿过来的json格式字符串对象成为js对象 var obj= JSON.parse(ajax.responseText); document.getElementById("span").innerHTML=obj.userid+obj.username; } } } </script> </head> <body> <h3>json对象的单个格式响应</h3> <hr/> <span id="span"></span> <input type="button" value="ok" onclick="but()" /> </body> </html>@WebServlet("/single.do") public class SingleObjectServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Users users=new Users(); users.setUserid(1); users.setUsername("weiwei"); //利用jackson的API将user对象转换为json格式的字符串对象 ObjectMapper objectMapper=new ObjectMapper(); String string= objectMapper.writeValueAsString(users); //设置响应类型 resp.setContentType("application/json"); PrintWriter pw=resp.getWriter(); pw.print(string); pw.flush(); pw.close(); } } -
通过 JSON 格式在响应中传递多个对象需求：定义一个 Users 类，包含 userid 、 username 属性。实例化多个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。将 Users 对象中的数据插入到页面中。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script> function but() { var ajax=new XMLHttpRequest(); ajax.open("get","multiple.do"); ajax.send(); ajax.onreadystatechange=function(){ if(ajax.readyState == 4 && ajax.status == 200){ alert(ajax.responseText); //通过js的内置对象JSON中的parse函数解析拿过来的json格式字符串对象成为js对象 var obj= JSON.parse(ajax.responseText); var temp=""; //obj现在是一个数组 for(i=0;i<obj.length;i++){ alert(obj[i].userid+""+obj[i].username) temp+=obj[i].userid+""+obj[i].username } document.getElementById("span").innerHTML=temp; } } } </script> </head> <body> <h3>json对象的多个格式响应</h3> <hr/> <span id="span"></span> <input type="button" value="ok" onclick="but()" /> </body> </html>@WebServlet("/multiple.do") public class MultipleObjectServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Users users1=new Users(); users1.setUserid(1); users1.setUsername("weiwei"); Users users2=new Users(); users1.setUserid(2); users1.setUsername("gege"); //将多个对象放入集合中 List<Users> list=new ArrayList<>(); list.add(users1); list.add(users2); ObjectMapper objectMapper=new ObjectMapper(); String string= objectMapper.writeValueAsString(list); resp.setContentType("application/json"); PrintWriter pw=resp.getWriter(); pw.print(string); pw.flush(); pw.close(); } } -
在 JSON 中通过 Map 传递数据在 JSON 格式中可以直接使用 Map 作为传递数据的模型。因为 Map 结构本身就是 key与 value 的结构与 JSON 格式对象模型完全匹配，所以我们可以直接将一个 Map 对象转换为JSON 格式的字符串对象。这对于我们来说是一件非常方便的事情，如果我们返回的数据并没有对应的模型来存放数据，那么我们可以通过 Map 来解决。
@WebServlet("/map.do") public class MapModelServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //一个map对象表示的是一个json对象的格式 Map<String,Object> map=new HashMap<>(); map.put("userid",1); map.put("url","map.do"); ObjectMapper objectMapper=new ObjectMapper(); String string= objectMapper.writeValueAsString(map); System.out.println(string); resp.setContentType("application/json"); PrintWriter pw=resp.getWriter(); pw.print(string); pw.flush(); pw.close(); } }<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script> function but() { var ajax=new XMLHttpRequest(); ajax.open("get","map.do"); ajax.send(); ajax.onreadystatechange=function(){ if(ajax.readyState == 4 && ajax.status == 200){ alert(ajax.responseText); //通过js的内置对象JSON中的parse函数解析拿过来的json格式字符串对象成为js对象 var obj= JSON.parse(ajax.responseText); document.getElementById("span").innerHTML=obj.userid+obj.url; } } } </script> </head> <body> <h3>json对象的map格式响应</h3> <hr/> <span id="span"></span> <input type="button" value="ok" onclick="but()" /> </body> </html>
-
-
在请求中通过 JSON 格式传递数据我们除了可以在响应中通过 JSON 格式来传递数据以外，在请求中也可以使用 JSON 格式传递数据。如果在请求中使用 JSON 格式传递数据，那么提交方式需要使用 POST 方式,通过 JavaScript 中的 JSON.stringify() 函数将 JavaScript 对象转换为 JSON 格式数据。通过 send方法将参数传递到 Servlet 中，在 Servlet 中通过字符输入流获取 JSON 格式数据。在请求中使用 Jackson 处理 JSON 格式数据的步骤：添加 jackson-annotations.jar 、 jackson-core.jar 、 jackson-databind.jar在页面的 JavaScript 中通过 JSON.stringify() 函数将 JavaScript 对象转换为 JSON 格式的数据将请求方式修改为 POST 方式通过 send() 函数将 JSON 格式的数据提交到服务端。在 Servlet 中通过字符输入流读取请求体中 JSON 格式的数据,tomcat只能解析key=value&&key=value的字符串,而json的是key:value,key:value 所以不用req.getParameter来解析,而是用字符输入流读取到,通过 jackson API 将获取到的 JSON 格式的数据转换为 Java 对象
@WebServlet("/json.do") public class RequestJSONServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //1.通过字符输入流从请求体中获取提交的json格式的数据 req.setCharacterEncoding("utf-8"); String s=req.getReader().readLine(); //2.使用jackson将json格式的字符串对象转换成java对象 ObjectMapper objectMapper=new ObjectMapper(); Users users= objectMapper.readValue(s, Users.class); System.out.println(users.getUserid()+""+users.getUsername()); resp.setContentType("application/json"); PrintWriter pw=resp.getWriter(); pw.print("ok"); pw.flush(); pw.close(); } }<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script> function but() { var id= document.getElementById("userid").value; var name=document.getElementById("username").value; var obj={ userid:id, username:name } var content=JSON.stringify(obj); alert(content); var ajax=new XMLHttpRequest(); ajax.open("post","json.do"); ajax.send(content); ajax.onreadystatechange=function(){ if(ajax.readyState == 4 && ajax.status == 200){ alert(ajax.responseText); document.getElementById("span").innerHTML=ajax.responseText } } } </script> </head> <body> <h3>test</h3> <hr/> 用户id:<input name="userid" id="userid"/><br/> 用户姓名:<input name="username" id="username"/><br/> <span id="span"></span> <input type="button" value="ok" onclick="but()" /> </body> </html> -
Jackson 的常用注解
-
@JsonProperty此注解用于属性上，作用是把该属性的名称序列化为另外一个名称，如把 username 属性序列化为 name ， @JsonProperty("name") 。
-
@JsonIgnore此注解用于属性或者方法上（一般都是定义在属性上），用来完全忽略被注解的字段和方法对应的属性，返回的 json 数据即不包含该属性。
-
@JsonFormat此注解用于属性或者方法上（一般都是定义在属性上），可以方便的把 Date 类型属性的值直接转化为我们想要的样式。如：@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss")
-
-
Jackson 工具类的使用
public class JsonUtils { // 定义 jackson 对象 private static final ObjectMapper MAPPER = new ObjectMapper(); // 将对象转换成 json 字符串。 public static String objectToJson(Object data) { try { String string = MAPPER.writeValueAsString(data); return string; } catch (JsonProcessingException e) { e.printStackTrace(); }return null; } //将 json 结果集转化为对象 public static <T> T jsonToPojo(String jsonData, Class<T> beanType) { try { T t = MAPPER.readValue(jsonData, beanType); return t; } catch (Exception e) { e.printStackTrace(); } return null; } //将 json 数据转换成 pojo 对象 list public static <T> List<T> jsonToList(String jsonData, Class<T> beanType) { JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType); try { List<T> list = MAPPER.readValue(jsonData, javaType); return list; } catch (Exception e) { e.printStackTrace(); } return null; } }
-
-
- Jquery 的 Ajax 使用
在 JQuery 中提供了对 Ajax 的封装，让我们在使用 Ajax 技术时变得更加容易。在 JQuery中提供了很多的基于 Ajax 发送异步请求的方法，如： $.ajax() 、 $.get() 、 $.post() 、 $.getJSON() 。
- $.ajax()的使用
- 语法结构 $.ajax({name:value,name:value......})
-
$.ajax()在异步请求中提交数据 在 $.ajax() 方法中通过 data 属性来存放提交的数据，支持 JSON 格式的数据
-
提交普通格式数据
在 data 属 性 中 我 们 可 以 通 过 两 种 方 式 来 指 定 需 要 提 交 的 数 据 。 一 种 是 通 过name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在 Servlet 中都是通过 request.getParameter 方法根据 name 获取 value 的。-
通过标准格式指定提交数据
data:”name=value&name=value.....”在 Servlet 中通过 request.getParameter 来获取提交的数据。 -
通过 JavaScript 对象指定提交数据,并不是jsondata:{userid:100,username:”oldlu”}在 Servlet 中通过 request.getParameter 来获取提交的数据。
-
-
提交 JSON 格式数据在 $.ajax() 中提交 JSON 格式的数据需要使用 post 方式提交，通过 JSON.stringify() 函数将JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符输入流获取提交的 JSON 格式的数据。data:JSON.stringify({name:value,name:value......})在 Servlet 中通过 req.getReader().readLine() 来获取提交的数据。
-
-
$.ajax() 处理响应中的 JSON 格式数据$.ajax() 方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是一个 JSON 格式的数据，那么 dataType 的值为“ JSON ” , 在回调函数中我们得到的直接就是JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse() 做格式的转换处理。
-
$.get()的使用 $.get() 方法是 $.ajax() 方法基于 get 方式发送异步请求的简化版
-
语法结构$.get(url,function(result))$.get(url,data,function(result))
-
通过标准格式指定提交数据 $.get(url,”name=value&name=value”,function(result))
-
通过 JavaScript 对象指定提交数据 $.get(url,{userid:1,username:”oldlu”,......},function(result))
-
-
$.post() 的使用$.post() 方法是 $.ajax() 方法基于 post 方式发送异步请求的简化版。
- 语法结构
$.post(url,function(result))$.post(url,data,function(result))
- 通过标准格式指定提交数据 $.post(url,”name=value&name=value”,function(result))
-
通过 JavaScript 对象指定提交数据$.post(url,{userid:1,username:”oldlu”,......},function(result))
- 语法结构
-
$.getJSON() 的使用$.getJSON() 方法是 $.ajax() 方法基于 get 方式发送异步请求，并将响应结果中 JSON 格式的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是 JSON 格式类型。$.getJSON() 方法和 resp.setContentType(“application/json”) 是一起使用的。
-
语法结构$.getJSON(url,function(result))$.getJSON(url,data,function(result))
-
通过标准格式指定提交数据$.getJSON(url,”name=value&name=value”,function(result))要求返回的数据格式必须是 JSON 格式。
-
通过 JavaScript 对象指定提交数据$.getJSON(url,{userid:1,username:”oldlu”,......},function(result))要求返回的数据格式必须是 JSON 格式。
-
- serialize()方法的使用
将 form 表单中的数据自动拼接成 name=value&name=value 结构。
- 语法结构
var param = $(“form”).serialize();param 的值为： name=value&name=value
- 语法结构
- $.ajax()的使用
09-19
7949
7949
12-10
207
207
07-22
07-22
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
