当前位置：首页 >

大话Ajax，详解~

发布时间：2023/12/16 54 豆豆

生活随笔收集整理的这篇文章主要介绍了大话Ajax，详解~ 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

Ajax

本节源码 kt5z

XMLHttpRequest对象

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为Ajax编程的核心对象。

Ajax的使用步骤

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求地址

xhr.open("get","http://www.baidu.com");

发送请求

xhr.send();

获取服务器端给客户端的响应数据

xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 2000){document.getElementById("span").innerHTML = xhr.readyState;alert(xhr.readyState);}}

好了，我们先来用实际代码来感受一下Ajax

先编写一个Servlet

@WebServlet("/alvin/MyServlet") public class MyServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter writer = response.getWriter();writer.println("hello Ajax");writer.flush();writer.close();} }

Jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html><head><title></title><base href="<%=request.getContextPath()+"/"%>"></head><body><script type="text/javascript">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MyServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);document.getElementById("span").innerHTML = xhr.responseText;}}}</script><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

JSON

JSON(JavaScriptObjectNotation) 是一种基于字符串的轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON是 JavaScript数据类型的子集。

在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快，更易解析。

JSON的语法规则

JSON是按照特定的语法规则所生成的字符串结构。

大括号表示JSON 的字符串对象。{}

属性和值用冒号分割。{"属性":"value"}

属性和属性之间用逗号分割。{"属性":"value","属性":"value",...}

中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]

Json

{“userid”:1,“username”:“admin”,“sex”:“male”}

数组

[{“userid”:1,“username”:“admin”},{“userid”:2,“username”:“oldlu”}]

Josn六种数据类型

string：字符串，必须要用双引号引起来。

number：数值，与JavaScript的number 一致。

object：JavaScript的对象形式，{key:value}表示方式，可嵌套。

array：数组，JavaScript的Array表示方式[value]，可嵌套。

true/false：布尔类型，JavaScript 的boolean 类型。

null：空值，JavaScript的null。

Jackson的使用

在JDK中并没有内置操作,JSON格式数据的API,因此使用处理JSON格式的数据需要借助第三方类库

几个常用的类库

Gson: 谷歌开发的 JSON 库，功能十分全面。

FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。

Jackson: 社区十分活跃且更新速度很快。被称为“最好的Json 解析器”

Jeson下载地址

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core

https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind

在响应中使用 Jackson处理 JSON格式数据的步骤：

添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar

通过 jacksonAPI将 Java对象转换 JSON格式

修改响应头，响应类型为application/json

将结果基于字符输出流推回客户端浏览器

在页面的中通过JavaScript的JSON.parse()函数将JSON格式的数据转换为JavaScript对象

通过Json格式在响应中传递单个对象

我们先建一个User实体类,用于后面的操作

public class User {private int userid;private String username;}//get set那些就不在文章里面写了 @WebServlet("/alvin/Single") public class SingleObjectServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//创建User对象User user = new User();user.setUserid(1);user.setUsername("alvin");//使用Jackson的APL将User对象转化为JSON格式的字符串对象ObjectMapper objectMapper = new ObjectMapper();//将User对象转换为JSON格式对象String string = objectMapper.writeValueAsString(user);//设置相应类型为application/jsonresponse.setContentType("application/json");PrintWriter writer = response.getWriter();writer.println(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的单个对象响应</title> </head> <body><script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/Single");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}}</script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

如果是多个对象呢?用List试试吧~

@WebServlet("/alvin/MoreObjectServlet") public class MoreObjectServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//创建第一个对象User user1 = new User(1,"张三");//创建第二个对象User user2 = new User(2,"alvin");//将多个对象放入到集合中List<User>list = new ArrayList<User>();list.add(user1); list.add(user2);//通过jackson将List转换为JSON格式的字符串对象ObjectMapper objectMapper = new ObjectMapper();String string = objectMapper.writeValueAsString(list);System.out.println(string);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的多个对象响应</title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MoreObjectServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象var parse = JSON.parse(xhr.responseText);var temp = "";for(var i = 0; i < parse.length; i++){alert(parse[i].userid + " " + parse[i].username);temp += parse.userid + "<br/>" + parse.username;;}document.getElementById("span").innerHTML = temp;}}} </script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

Ajax在JSON中通过Map传递数据

@WebServlet("/alvin/MapModelServlet") public class MapModelServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {Map<String,Object> map = new HashMap<String, Object>();map.put("userid",1);map.put("username","alvin");ObjectMapper objectMapper = new ObjectMapper();String string = objectMapper.writeValueAsString(map);System.out.println(string);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title></title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MapModelServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}} </script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

在 JSON 格式中可以直接使用 Map 作为传递数据的模型。因为 Map 结构本身就是 key与value的结构与JSON 格式对象模型完全匹配，所以我们可以直接将一个Map 对象转换为JSON 格式的字符串对象。这对于我们来说是一件非常方便的事情，如果我们返回的数据并没有对应的模型来存放数据，那么我们可以通过Map 来解决。

在请求中通过JSON格式传递数据

我们除了可以在响应中通过 JSON 格式来传递数据以外，在请求中也可以使用 JSON 格式传递数据。如果在请求中使用 JSON 格式传递数据，那么提交方式需要使用 POST 方式，通过 JavaScript 中的 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式数据。通过 send方法将参数传递到 Servlet中，在 Servlet 中通过字符输入流获取 JSON格式数据。

@WebServlet("/alvin/RequestJosnServlet") public class RequestJosnServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//通过字符输入流从请求体中获取提交的JSON格式的数据String string = request.getReader().readLine();//使用Jackson将JSON格式的字符串对象转换成Java对象ObjectMapper objectMapper = new ObjectMapper();User user = objectMapper.readValue(string,User.class);System.out.println(user.getUserid() + " " + user.getUsername());response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(user);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的单个对象响应</title> </head> <body> <script type="text/javascript" charset="UTF-8">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);var xhr = new XMLHttpRequest();xhr.open("post","alvin/Single");//发送xhr.send(content);alert(content);xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通过javaScript的内置对象JSON中的parse函数将JSON格式的字符串对象转换成JavaScirpt对象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}} </script>ID<input name="userid" id="userid"/><br/>姓名<input name="username" id="username"/><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-ddhh:mm:ss")

Jackson工具类

package com.alvin.util;import java.util.List;import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson.databind.ObjectMapper;/*** JSON转换工具类*/ public class JsonUtils {// 定义jackson对象private static final ObjectMapper MAPPER = new ObjectMapper();/*** 将对象转换成json字符串。* <p>Title: pojoToJson</p>* <p>Description: </p>* @param data* @return*/public static String objectToJson(Object data) {try {String string = MAPPER.writeValueAsString(data);return string;} catch (JsonProcessingException e) {e.printStackTrace();}return null;}/*** 将json结果集转化为对象* * @param jsonData json数据* @param clazz 对象中的object类型* @return*/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* <p>Title: jsonToList</p>* <p>Description: </p>* @param jsonData* @param beanType* @return*/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方法的使用

$.ajax()使用

在JQuery 中提供了对Ajax 的封装，让我们在使用Ajax技术时变得更加容易。在 JQuery中提供了很多的基于Ajax发送异步请求的方法,如：$.ajax()、$.get()、$.post()、$.getJSON()。

@WebServlet("/alvin/jqueryAjaxServlet") public class jqueryAjaxServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter writer = response.getWriter();writer.print("hello Jquery Ajax");writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {$.ajax({type:"post",url:"alvin/jqueryAjaxServlet",success:function (result) {$("#span").html(result);}});}</script> </head> <body><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>

$.ajax()中提交数据

在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种是通过name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在Servlet 中都是通过request.getParameter 方法根据 name获取 value的。

@WebServlet("/alvin/DataServlet") public class DataServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userId = request.getParameter("id");String userName = request.getParameter("name");PrintWriter writer = response.getWriter();writer.print(userId + " " + userName);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/DataServlet",data:"id=" + userid + "&name=" + username,success:function (result) {$("#span").html(result);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

提交JSON格式数据

在$.ajax()中提交 JSON格式的数据需要使用 post方式提交，通过 JSON.stringify()函数将JavaScript对象转换成JSON 格式的字符串。在Servlet 中通过字符输入获取提交的 JSON格式的数据。

@WebServlet("/alvin/JSONServlet") public class JSONServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String string = request.getReader().readLine();PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/JSONServlet",data:JSON.stringify({id:userid,name:username}),success:function (result) {$("#span").html(result);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.ajax()处理响应中的JSON格式数据

$.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是JSON字符串转换完的 JavaScript对象。不需要在使用JSON.parse()做格式的转换处理。

@WebServlet("/alvin/JSONConnverServlet") public class JSONConnverServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("application/json");String string = request.getReader().readLine();PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/JSONConnverServlet",dataType:"json",data:JSON.stringify({id:userid,name:username}),success:function (result) {alert(result.id + " " + result.name);$("#span").html(result.id + " " + result.name);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.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))

这里面使用的的还是DataServlet,前面写过了

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.get("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {$("#span").html(result);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.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))

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.post("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {$("#span").html(result);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

$.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格式。

@WebServlet("/alvin/GetJSONServlet") public class GetJSONServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userId = request.getParameter("id");String userName = request.getParameter("name");Map<String,String> map = new HashMap<String, String>();map.put("userid",userId);map.put("username",userName);//使用前面写的工具类String string = JsonUtils.objectToJson(map);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.getJSON("alvin/GetJSONServlet","id=" + userid + "&name=" + username,function (result) {//根据map的键alert(result.userid + " " + result.username)$("#span").html(result.userid + " " + result.username);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

serialize()方法的使用

将form表单中的数据自动拼接成 name=value&name=value结构。

语法结构

varparam=$(“form”).serialize();

param的值为：name=value&name=value

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var param = $("#form").serialize();$.ajax({type:"post",url:"alvin/DataServlet",data:param,success:function (result) {$("#span").html(result);}});}</script></head><body><form id="form">ID:<input type="text" name="id" id="userid"/><br/>姓名:<input type="text" name="name" id="username"/><br/></form><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>

总结

以上是生活随笔为你收集整理的大话Ajax，详解~的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇： Hulu校招补录已开始，1年内工作经验也
下一篇：【EXLIBRIS】名副其实