- 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()的使用
ajax详解笔记之如何使用
最新推荐文章于 2022-02-10 10:13:11 发布