ajax

最新推荐文章于 2022-06-19 13:50:53 发布

crraxx

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量155

点赞数 2

分类专栏： java tomcat ajax 文章标签： ajax tomcat servlet

本文链接：https://blog.youkuaiyun.com/crraxx/article/details/115876236

版权

java 同时被 3 个专栏收录

35 篇文章

订阅专栏

tomcat

8 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

Ajax

全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），使用 Ajax，可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

实例1:ajax环境搭建

新建ajax1.jsp

<%--
  Created by IntelliJ IDEA.
  User: 云
  Date: 2021/4/16
  Time: 18:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--ajax(Asynchornous JavaScript and XML) 异步JavaScript和XML
    客户端与服务器同步交互
    当客户端与服务器同步交互时是不能进行其他操作的,需要等待服务器的响应期间,客户端操作,用户被打断
    客户端与服务器异步交互
    当客户端与服务器进行异步交互时并不影响客户端操作,使用浏览器中XMLHttpRequest对象以服务器交互的
    ,服务器响应回来的内容也是交给XMLHttpRequest,再刷新页面时不会刷新
    --%>
    <script type="text/javascript">
        function checkAccount(account) {
            //创建XMLHttpRequest对象
            var httpObj = new XMLHttpRequest();
            //使用XMLHttpRequest对象
            // httpObj.open("method,get/post",url,true,false)
            httpObj.open("get", "${path}/ajax1?account=" + account, true);
            httpObj.send();
            //从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
            httpObj.onreadystatechange = function () {
                if (httpObj.readyState == 4 && httpObj.status == 200) {
                    document.getElementById("msgid").innerText = httpObj.responseText;
                }
            }
        }
    </script>
</head>
<body>
账号<input type="text" name="account" onblur="checkAccount(this.value)">
<span id="msgid"></span><br>
密码<input type="password" name="password">
</body>
</html>

新建Ajax1Servlet

package webPro2;

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(name = "ajax1",urlPatterns ="/ajax1")
public class Ajax1Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String account = req.getParameter("account");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out= resp.getWriter();
        if(account.equals("admin")){
            out.print("账号已存在");
        }else{
            out.print("√");
        }
    }
    @Override
    protected void doPost (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String account = req.getParameter("account");
        String age = req.getParameter("age");
        System.out.println(account+":"+age);
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out= resp.getWriter();
        if(account.equals("admin")){
            out.print("账号已存在");
        }else{
            out.print("√");
        }
    }
}

运行结果:

在这里插入图片描述

实例2：ajax的post请求

新建ajax2.jsp

<%--
  Created by IntelliJ IDEA.
  User: 云
  Date: 2021/4/16
  Time: 18:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--ajax(Asynchornous JavaScript and XML) 异步JavaScript和XML
    客户端与服务器同步交互
    当客户端与服务器同步交互时是不能进行其他操作的,需要等待服务器的响应期间,客户端操作,用户被打断
    客户端与服务器异步交互
    当客户端与服务器进行异步交互时并不影响客户端操作,使用浏览器中XMLHttpRequest对象以服务器交互的
    ,服务器响应回来的内容也是交给XMLHttpRequest,再刷新页面时不会刷新
    --%>
    <script type="text/javascript">
        function checkAccount(account){
        //创建XMLHttpRequest对象
        var httpObj=new XMLHttpRequest();
        //使用XMLHttpRequest对象
       // httpObj.open("method,get/post",url,true/false)
        httpObj.open("post","${path}/ajax1",true);
        //在post方式中要设置请求头,内容提交格式为默认格式
        httpObj.setRequestHeader("content-type","application/x-www-form-urlencoded");
        httpObj.send("account="+account+"&age=10");
        //从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
        httpObj.onreadystatechange=function (){
            if(httpObj.readyState==4&httpObj.status==200){
                document.getElementById("msgid").innerText=httpObj.responseText;
            }
        }
 }
    </script>
</head>
<body>
<%--
enctype="multipart/form-data" 用于提交文件
 enctype="application/x-www-form-urlencoded" 表单默认提交样式(键等于值)
--%>
账号<input type="text" name="account" onblur="checkAccount(this.value)">
<span id="msgid"></span><br>
密码<input type="password" name="password">
</body>
</html>

运行结果:
在这里插入图片描述

实例3： json概述以及异步查询

新建User类

package bean;

public class User2 {
    private String name;
    private int age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

新建SearchUser

<%--
  Created by IntelliJ IDEA.
  User: 云
  Date: 2021/4/16
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%--异步查询,ajax的get请求--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${path}/js/jquery.1.8.3.min.js"></script>
    <script type="text/javascript">
        function searchUser() {
            var user = document.getElementById("userid").value;
            var httpObj = new XMLHttpRequest();
            httpObj.open("get", "${path}/ajax2?user=" + user, true);
            httpObj.send();
            //从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
            httpObj.onreadystatechange = function () {
                if (httpObj.readyState == 4 & httpObj.status == 200) {
                    //document.getElementById("showid").innerText=httpObj.responseText;
                    //var jsobj = httpObj.responseText;
                    var jsobj = $.parseJSON(httpObj.responseText);
                    document.getElementById("showid").innerText = jsobj.name + "::" + jsobj.age;
                }
            }
        }
    </script>

</head>
<body>
姓名<input type="text" id="userid" onkeydown="searchUser()">
<input type="button" value="查询" onclick="searchUser()">
<div id="showid">

</div>
</body>
</html>

新建Ajax2Servlet

package webPro2;

import bean.User2;
import com.google.gson.Gson;

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(name = "ajax2", urlPatterns = "/ajax2")
public class Ajax2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //注意传入的是user
        String name = req.getParameter("user");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        User2 user2 = new User2();
        user2.setName(name);
        user2.setAge(21);
/*
在java 语言与javaScript语言之间要进行数据交换
起初使用xml语言,由于此语言语法复杂,是重量级的.发展成json语言
json(javaScript Object Notation)轻量级的数据格式
导入gson包1.Ctrl+V 2.+libraries
 */
        Gson gson = new Gson();
        String s = gson.toJson(user2);
        System.out.println(s);
        out.print(s);

    }
}

运行结果:

在这里插入图片描述

实例3：异步查询多条数据

新建SearchUsers.jsp

<%--
  Created by IntelliJ IDEA.
  User: 云
  Date: 2021/4/16
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%--异步查询--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${path}/js/jquery.1.8.3.min.js"></script>
    <script type="text/javascript">
        function searchUser() {
            var user = document.getElementById("userid").value;
            var httpObj = new XMLHttpRequest();
            httpObj.open("get", "${path}/ajax3?user=" + user, true);
            httpObj.send();
            //从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
            httpObj.onreadystatechange = function () {
                if (httpObj.readyState == 4 & httpObj.status == 200) {
                    //把jsobj格式的字符串解析为JavaScript对象
                    var jsobjs = $.parseJSON(httpObj.responseText);
                    var str = "";
                    for (i = 0; i < jsobjs.length; i++) {
                        str += jsobjs[i].name + ":" + jsobjs[i].age + "<br>"
                    }
                    document.getElementById("showid").innerHTML = str;
                }
            }

        }
    </script>

</head>
<body>
姓名<input type="text" id="userid" onkeydown="searchUser()">
<input type="button" value="查询">
<div id="showid">

</div>
</body>
</html>

新建Ajax3Servlet

package webPro2;

import bean.User2;
import com.google.gson.Gson;

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;
import java.util.ArrayList;
import java.util.List;

//异步查询多条数据
@WebServlet(name = "ajax3", urlPatterns = "/ajax3")
public class Ajax3Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //注意传入的是user
        String name = req.getParameter("user");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        User2 user2 = new User2();
        user2.setName(name);
        user2.setAge(21);
        User2 user3 = new User2();
        user3.setName(name);
        user3.setAge(22);
        User2 user4 = new User2();
        user4.setName(name);
        user4.setAge(23);
        User2 user5 = new User2();
        user5.setName(name);
        user5.setAge(24);
/*
在java 语言与javaScript语言之间要进行数据交换
起初使用xml语言,由于此语言语法复杂,是重量级的.发展成json语言
json(javaScript Object Notation)轻量级的数据格式
导入gson包1.Ctrl+V 2.+libraries
*/
        List<User2> list = new ArrayList<>();
        list.add(user2);
        list.add(user3);
        list.add(user4);
        list.add(user5);
        Gson gson = new Gson();
        String s = gson.toJson(list);
        System.out.println(s);
        out.print(s);

    }
}

运行结果：
在这里插入图片描述

实例4：jqueryajax

新建jqueryajax.jsp

<%--
  Created by IntelliJ IDEA.
  User: 云
  Date: 2021/4/16
  Time: 18:46
  To change this template use File | Settings | File Templates.
--%>
<%--简写--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${path}/js/jquery.1.8.3.min.js"></script>
    <script type="text/javascript">
        /*function checkAccount(account) {
          $.get("${path}/ajax1",{account:account},function (res){
            $("#msgid").html(res);
          })
        }*/
        function checkAccount(account) {
            $.post("${path}/ajax1", {account: account}, function (res) {
                $("#msgid").html(res);
            })
        }
    </script>
</head>
<body>
账号<input type="text" name="account" onblur="checkAccount(this.value)">
<span id="msgid"></span>
<br>
密码<input type="password" name="password">
</body>
</html>

```运行结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210420215650994.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210420215714230.png)