Ajax的使用详解

什么是Ajax？

简单说就是页面发送请求时，用户能够看到页面，不是空白的而传统的web应用是同步的，发送请求，未响应回来（页面上白色的，体验不好）Ajax能解决这个问题。页面不重新加载能完成局部页面更新

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式、快速动态应用的网页开发技术，无需重新加载整个网页的情况下，能够更新页面局部数据的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

Ajax使用

XMLHttp对象

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

使用的方法

创建XMLHttpRequest对象

var xhr =new XMLHttpRequest();

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

xhr.open("get","请求的url");

发送请求

xhr.send()

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

//给onreadystatechange这个属性附一个函数地址（回调）
     xhr.onreadystatechange = function () {

//  做状态判断,4表示响应结束,以及状态是200
     if(xhr.readyState == 4 && xhr.status==200){
//取响应内容，这个就是服务端响应的内容
     alert(xhr.responseText);
//添加到span标签中
                              document.getElementById("span").innerHTML=xhr.responseText;
          }
        }

案例实现

首先创建新的项目，依旧需要进行导包（servletjar包），其次就是在servlet进行响应时不能使用重定向和请求转发的方式进行（需要使用字符输出流进行）

//jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script>
      function but() {
      //  创建对象
        var xhr = new XMLHttpRequest();
        //给定请求方式和url
        xhr.open("get","ajax.do");
        //发送异步请求
        xhr.send();
        //给onreadystatechange这个属性附一个函数地址（回调）
        xhr.onreadystatechange = function () {

        //  做状态判断,4表示响应结束,以及状态是200
          if(xhr.readyState == 4 && xhr.status==200){
            //取响应内容，这个就是服务端响应的内容
            alert(xhr.responseText);
            //添加到span标签中
            document.getElementById("span").innerHTML=xhr.responseText;
          }
        }

      }
    </script>
  </head>
  <body>
  <h3>北京你好</h3>
  <hr/>
  <span id="span"></span>
  <input type="button" value="ok" onclick="but()">
  </body>
</html>

//创建servlet
package com.hhxx.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //响应数据不能使用（处理异步请求产生响应）重定向和请求转发，不是让浏览器处理响应
        //使用字符流删除流
        PrintWriter pw =resp.getWriter();
        pw.println("hello Ajax");
        pw.flush();
        pw.close();

    }
}

实现原理

实现异步的主要原理

我们需要通过一个事件来触发异步请求，从而会实例化xhr（ajax核心对象），通过这个对象调用send()方法发送请求，服务端收到请求进行响应（通过字符输出流的方式。谁来处理我们响应的内容？xhr通过回调的方式，调用xhr.onreadystatechage（调用onreadystatechage的函数，而我们的函数就在它调用的这个函数里）从而完成请求的实现

json使用

什么是json

是基于字符串的轻量级的数据交互格式，json是JavaScript数据类型的子集。在json之前会使用xml进行数据格式传输数据，而json出现之后则使用json传输，因为json比xml更小更快，易于解析

json格式特点

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

大括号表示 JSON 的字符串对象。{ }
属性和值用冒号分割。{"属性":"value"} 若value是数字不用加双引号
属性和属性之间用逗号分割。{"属性":"value","属性":"value",...} - 中括号表示数组。[{"属性":"value"...},{"属性":"value"...}]

json对象

{"userid":1,"username":"admin","sex":"male"}
[{"userid":1,"username":"admin"},{"userid":2,"username":"oldlu"}]

json数据类型

string:字符串，必须要用双引号引起来。
number:数值，与 JavaScript 的 number 一致，
object:JavaScript 的对象形式，{ key:value }表示方式，可嵌套。
array:数组，JavaScript 的 Array 表示方式[ value ]，可嵌套。
true/false:布尔类型，JavaScript 的 boolean 类型。
null:空值，JavaScript 的 null。

Jackson使用

jdk没有内置操作JSON格式的数据API，因此需要借助第三方类库来处理json数据
这里以Jacson为例，使用之前需要下载3个jar包
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

在响应中通过json格式传递数据

在响应中使用jackson处理json步骤
1.添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
2.通过 jackson API 将 Java 对象转换 JSON 格式
3.修改响应头，响应类型为 application/json
4.将结果基于字符输出流推回客户端浏览器
5.在页面的中通过 JavaScript 的 JSON.parse()函数将 JSON 格式的数据转换为 JavaScript对象，json属于特殊格式的字符串结构，通过解析来操作js对象，从而方便的获取响应数据

通过json格式响应传递单个对象

需求:
定义一个 Users 类，包含 userid、username 属性。
实例化一个 Users 对象，通过 JSON 格式将 Users 对象响应到客户端浏览器。将 Users 对象中的数据插入到页面中。
省略Users类

/**
 * 通过json格式响应单个对象
 * */
@WebServlet("/single.do")
public class SingleObjectServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建users对象
        Users users =new Users();
        users.setUserid(1);
        users.setUsername("jack");
        //user对象不能用字符流进行输出（输出是对象的引用）
        //使用jackson的api将users对象转换为json格式的字符串对象
        ObjectMapper objectMapper =new ObjectMapper();
        String  string = objectMapper.writeValueAsString(users);
        System.out.println(string);
        //设置响应类型为application/json
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.println(string);
        pw.flush();
        pw.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script>
        function but() {
            //  创建对象
            var xhr = new XMLHttpRequest();
            //给定请求方式和url
            xhr.open("get","single.do");
            //发送异步请求
            xhr.send();
            //给onreadystatechange这个属性附一个函数地址（回调）
            xhr.onreadystatechange = function () {

                //  做状态判断,4表示响应结束,以及状态是200
                if(xhr.readyState == 4 && xhr.status==200){
                    //取响应内容，这个就是服务端响应的内容
                    alert(xhr.responseText);
                    //通过javascript的内置对象Jason的parse函数将json格式的字符串对象转换成JavaScript对象
                    //添加到span标签中
                   var obj = JSON.parse(xhr.responseText)
                    alert(obj.userid+" "+obj.username);
                    document.getElementById("span").innerHTML=obj.userid+"<br/>"+obj.username;
                }
            }

        }
    </script>
</head>
<body>
<h3>json格式的单个对象使用</h3>
<hr/>
<span id="span"></span>
<input type="button" value="ok" onclick="but()">
</body>
</html>

对于多个对象使用json格式响应，其实和单个大同小异，这里list是存储多个对象的集合，只需要注意：
1.依旧是通过创建ObjectMapper对象和调用writeValueAsString()方法

 ObjectMapper objectMapper =new ObjectMapper();
        //不管什么对象，都能转换成字符串
        String string = objectMapper.writeValueAsString(list);

2.在结果输出的时候使用循环和拼接进行输出

if (xhr.readyState == 4 && xhr.status==200){
                        alert(xhr.responseText);
                        var obj = JSON.parse(xhr.responseText);
                        var temp ="";
                        //由于是一个list对象需要进行遍历
                        for(i=0;i<obj.length;i++){
                            alert(obj[i].userid+" "+obj[i].username);
                            temp += obj[i].userid+" "+obj[i].username+"<br/>"
                        }
                        document.getElementById("span").innerHTML = temp;

                    }

在json中通过map传递数据

map属于通用型的数据，本身就有key和value的结构和json格式对象模型完全匹配，我们可以直接将一个Map对象转换为json字符对象。

public class MapModelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      //一个Map对象表示的是一个Jason格式对象
        Map<String,Object> map =new HashMap<>();
        map.put("userid",1);
        //不改变实体类
        map.put("url","map.do");

        ObjectMapper objectMapper =new ObjectMapper();
        String string =objectMapper.writeValueAsString(map);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        System.out.println(string);
        pw.println(string);
        pw.flush();
        pw.close();
    }
}

请求中通过json格式传递数据

请求中传递数据，提交方式需要使用Post

请求中使用JackSon处理JSON格式数据步骤

添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
在页面的 JavaScript 中通过 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式的数据
js对象{属性名:值，属性名:值}
json对象{"userid":1,"username":"admin"}
将请求方式修改为 POST 方式（tomcat不会处理）
通过 send()函数将 JSON 格式的数据提交到服务端。
在 Servlet 中通过字符输入流读取请求体中 JSON 格式的数据
通过 jackson API将获取到的 JSON 格式的数据转换为 Java 对象
具体实现

servelt:
**
 * 在请求中通过json格式传递数据
 * */
@WebServlet("/json.do")
public class RequestJSONServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //通过字符输入流从请求体中获取提交的json格式数据
        req.setCharacterEncoding("utf-8");
       String s = req.getReader().readLine();
       //使用Jackson将JSON格式字符串对象转换成java对象
        ObjectMapper objectMapper =new ObjectMapper();
        //json对象有哪些属性，返回Users对象
        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;
            //定义js对象，属性名要和对应属性的名字相同（这里是Users类）
            var obj ={userid:id,username:name}
            //将js对象转换成json格式的对象
            var content =JSON.stringify(obj);
            alert(content);
            //  创建对象
            var xhr = new XMLHttpRequest();
            //给定请求方式和url
            xhr.open("post","json.do");
            //发送异步请求，传递到servlet中
            xhr.send(content);
            //给onreadystatechange这个属性附一个函数地址（回调）
            xhr.onreadystatechange = function () {

            //  做状态判断,4表示响应结束,以及状态是200
            if(xhr.readyState == 4 && xhr.status==200){
            //取响应内容，这个就是服务端响应的内容
                alert(xhr.responseText);
                document.getElementById("span").innerHTML=xhr.responseText;
                }
            }

        }
    </script>
</head>
<body>
<h3>在请求中通过json格式传递数据</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>

常用注解

@JsonProperty
此注解用于属性上，作用是把该属性的名称序列化为另外一个名称，如把 username 属性序列化为 name，@JsonProperty("name")。其实就是给json改名
@JsonIgnore
此注解用于属性或者方法上(一般都是定义在属性上)，用来完全忽略被注解的字段和方法对应的属性，返回的 json 数据即不包含该属性。多个注解时有@JsonIgnore则会忽略所有注解
@JsonFormat
此注解用于属性或者方法上(一般都是定义在属性上)，可以方便的把 Date 类型属性的值直接转化为我们想要的样式。如:@JsonFormat(pattern="yyyy-MM-dd hh:mm:ss")

jackson工具类使用

我们在使用jackson时，每次都需要调用一些对象如：ObjectMapper，因此将重复对象做工具类的封装方便每次的调用

/**
 * JSON转换工具类
 */
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技术更加方便。

$.ajax()使用

常用的语法结构$({})

data: 规定发送到服务器的数据
success():当请求成功运行的函数
type：规定请求类型（post或get）
url：规定发送请求的的url，默认是当前页面

$.ajax()异步中请求提交数据

$.ajax()方法中通过data属性来存放提交的数据，支持JSON格式的数据
在date属性中有两种方式提交数据数据，标准格式和js对象来指定提交数据。无论使用哪种方式在Servlet中通过request.getParameter方式获取name来获取value

通过标准格式指定提交数据
data:”name=value&name=value.....”
通过JavaScript对象指定提交数据
data:{
userid:100
username:jay
}

代码实例

/**
 * 在$.ajax()方法提交数据
 * */
@WebServlet("/data.do")
public class DataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取Date提交的数据

        String userid =req.getParameter("id");
        String username =req.getParameter("name");
        PrintWriter pw = resp.getWriter();

        pw.print("userid="+userid+"  username="+username);
        pw.flush();
        pw.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function but() {
            //获取浏览器输入的值
            var userid =$("#userid").val();
            var username =$("#username").val();
            $.ajax({
                type:"get",
                url:"data.do",
                //标准方式
                //data:"id="+userid+"&name="+username,

                //js对象
                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 格式的数据。
data:JSON.stringify({name:value,name:value......})
在 Servlet 中通过 req.getReader().readLine()来获取提交的数据。

需要修改jsp中的type：post
将js格式转换为json格式，以上面的案例为例，将date：后面的内容放入函数中 JSON.stringify()

data:JSON.stringify({
                    id:userid,
                    name:username
                }),

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

js格式对象：{userid=aa username=111}
json格式对象：{"id":"aa","name":"111"}
通过添加dataType：“json”，将json格式转换为js格式对象

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

/**
 * 提交json格式数据在页面中自动转换类型
 *以json格式提交数据需要通过字符输入流进行接收
 * 若是以标准类型或者js对象提交的话直接获取相应的值
 * */
@WebServlet("/jsonConvert.do")
public class jsonConvertServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json");
        //字符输入流获取的就是json的数据
        req.setCharacterEncoding("utf-8");
        String s = req.getReader().readLine();
        resp.setCharacterEncoding("utf-8");
        PrintWriter pw =resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function but() {
            //获取浏览器输入的值
            var userid =$("#userid").val();
            var username =$("#username").val();
            $.ajax({
                //必须使用post提交
                type:"post",
                url:"jsonConvert.do",
                //json格式转换成js对象
                dataType:"json",
                //标准方式
                //data:"id="+userid+"&name="+username,

                //js对象转换成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>

$.get()的使用

该方法是$.ajax()方法基于 get 方式发送异步请求的简化版。

语法结构 $.get(url,function(result))，不需要再使用$.ajax()
$.get(url,data,function(result))

通过标准格式指定提交数据 $.get(url,”name=value&name=value”,function(result))

通过 JavaScript 对象指定提交数据 $.get(url,{userid:1,username:”oldlu”,......},function(result))

function but() {
            //获取浏览器输入的值，data存放提交的数据
            var userid = $("#userid").val();
            var username = $("#username").val();
            //标准格式数据提交
            // $.get("data.do", "id="+userid+"&name="+username,function (result) {
            // $("#span").html(result);
            // });

            //js对象格式,提交数据
            $.get("data.do", {id:userid,name:username},function (result) {
                $("#span").html(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()的使用

相当于简化了dateType设置
$.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 格式。

/**
 * getJSON方法传递数据并返回JSON格式数据
 * */
@WebServlet("/getJson.do")
public class GetJSONServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        //这里的名称要与jsp中date存放的名称保持一致
        String userid =req.getParameter("id");
        String username =req.getParameter("name");
        Map<String ,String> map =new HashMap<>();
        map.put("userid",userid);
        map.put("username",username);
        //转换成Json格式字符串对象
        String s=JsonUtils.objectToJson(map);
        resp.setContentType("appliction/json");
        PrintWriter pw =resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function but() {
            //获取浏览器输入的值，data存放提交的数据
            var userid = $("#userid").val();
            var username = $("#username").val();
            //标准格式数据提交
            $.getJSON("getJson.do", "id="+userid+"&name="+username,function (result) {
            //    这个userid的key要与map(getJSONServlet)中的key相同,返回的是js对象
                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 结构。

语法结构
var param = $(“form”).serialize();
param 的值为:name=value&name=value

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        function but() {
            //获取浏览器输入的值，data存放提交的数据
            // var userid =$("#userid").val();
            // var username =$("#username").val();

            //使用serializa()方法拼接，需放入from表当中,拼接的是name-value，所以标签中要使用name名，名与servlet的名一致
            var param = $("#form").serialize();
            alert(param);

                //标准方式提交数据
                //data:"id="+userid+"&name="+username,
                $.get("data.do",param,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>

悲观者正确，乐观者成功