Ajax学习

最新推荐文章于 2022-09-19 22:26:35 发布

weixin_46008168

最新推荐文章于 2022-09-19 22:26:35 发布

阅读量119

点赞数 1

分类专栏： web开发 java

本文链接：https://blog.csdn.net/weixin_46008168/article/details/106310079

版权

java 同时被 2 个专栏收录

65 篇文章 0 订阅

订阅专栏

web开发

14 篇文章 1 订阅

订阅专栏

Ajax简介

概念
Asynchronous Javascript and xml 异步的javascript 和 xml
1.异步和同步：客户端和服务器端相互通信的基础上来理解的。
图片理解：在这里插入图片描述
Ajax是一种无需重新加载整个页面的情况下，能够更新部分网页的技术。
通过后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新，这意味着可以不加载整个网页的前提下，对网页的某部分进行更新。
传统的网页（不使用ajax）如果需要更新内容，必须加载整个网页页面。
Ajax的使用场景，在以前做项目过程中，需要两个网页，其中一个网页上有一个数据，另一个网页需要对该数据进行定时访问，则用到了这个Ajax技术。
使用场景二,当我们在百度文本框输入内容的时候，百度会进行提示，这个技术也是使用了ajax的相关功能。例：在这里插入图片描述
打开F12会发现：

这里面就是百度上显示的json数据格式。
实现方式
1.原生的方式
第一先创建一个html页面，上面实现了异步请求；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
          //1.创建核心对象
          var xmlhttp;
          if(window.XMLHttpRequest){
              xmlhttp = new XMLHttpRequest();
          }else {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.建立连接
            /**
             * 参数：
             * 1.请求方式：GET POST
             *      get 方式请求参数在url后面拼接。send为空参
             *      post方式请求参数在send方法中定义
             * 2.请求的URL
             * 3.同步或异步请求 true（异步） false(同步)
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();
        }

        //4.接受并处理服务器的相应结果
    </script>
</head>
<body>
<input type="button" value="发布异步请求" onclick="fun()">
</body>
</html>

第二：创建一个HttpServlet的继承类

package cn.sainan114.web;

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;

/**
 * FileName: servlet
 *
 * @Author:luguobao Date: 9:17
 * Description:
 * History:
 * <author>   <time>   <version>   <desc>
 * 作者姓名    修改时间    版本号       描述
 */
@WebServlet("/ajaxServlet")
public class servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.获取请求参数
        String username = req.getParameter("username");
        //2.打印username
        System.out.println(username);
        //3.响应
        resp.getWriter().write("hello" + username);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}

当页面点击按钮的时候，控制台会有以下输出
在这里插入图片描述
异步和同步实验的差别测试：
当是异步请求时，在html页面上写一个文本输入框。此时，我在HttpServlet上面对程序进行休息五秒的操作，理论上，如果是异步请求的话，文本输入框还是可以输入数据的。如果是同步请求的话，这个文本输入框应该不能输入数据，因为他需要先等待服务器端的回应。在这里插入图片描述
异步可以实现数据输入

将这里改成同步以后：

此时，发现文本框不可以实现数据输入，要等五秒以后才可以。

发现前五秒数据无法输入。
异步请求接受服务器的响应结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
          //1.创建核心对象
          var xmlhttp;
          if(window.XMLHttpRequest){
              xmlhttp = new XMLHttpRequest();
          }else {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.建立连接
            /**
             * 参数：
             * 1.请求方式：GET POST
             *      get 方式请求参数在url后面拼接。send为空参
             *      post方式请求参数在send方法中定义
             * 2.请求的URL
             * 3.同步或异步请求 true（异步） false(同步)
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受并处理服务器的相应结果
            //获取方式xmlhttp.responseText
            //什么时候获取，当服务器响应成功再获取
            //当xmlhttp对象的就绪状态改变时，触发事件

            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    alert(xmlhttp.responseText);
                }
            }
        }



    </script>
</head>
<body>
<input type="button" value="发布异步请求" onclick="fun()">
<input>
</body>
</html>

当五秒过后，服务器返回数据的时候，会在页面中显示出来。
代码补充如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
          //1.创建核心对象
          var xmlhttp;
          if(window.XMLHttpRequest){
              xmlhttp = new XMLHttpRequest();
          }else {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          //2.建立连接
            /**
             * 参数：
             * 1.请求方式：GET POST
             *      get 方式请求参数在url后面拼接。send为空参
             *      post方式请求参数在send方法中定义
             * 2.请求的URL
             * 3.同步或异步请求 true（异步） false(同步)
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受并处理服务器的相应结果
            //获取方式xmlhttp.responseText
            //什么时候获取，当服务器响应成功再获取
            //当xmlhttp对象的就绪状态改变时，触发事件

            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    alert(xmlhttp.responseText);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="发布异步请求" onclick="fun()">
<input>
</body>
</html>

JQuery实现方式
语法: $. a j a x () 发送异步请求 / / 使用$ .ajax()发送异步请求
$.ajax({
url:“ajaxServlet1111” , // 请求路径
type:“POST” , //请求方式
//data: “username=jack&age=23”,//请求参数方式一
data:{“username”:“jack”,“age”:23},//请求方式二
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert(“出错啦…”)
},//表示如果请求响应出现错误，会执行的回调函数
dataType:“text”//设置接受到的响应数据的格式
});

具体实现：
1.先创建一个module
在这里插入图片描述
2.在web下导入js文件夹，js文件夹里面是jquery的js文件。

3.在web下面创建一个html文件

在该文件下书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <script>
        function fun() {
            $.ajax({
                url:"ajaxServlet1111" , // 请求路径
                type:"POST" , //请求方式
                //data: "username=jack&age=23",//请求参数方式一
                data:{"username":"jack","age":23},//请求方式二
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"text"//设置接受到的响应数据的格式
            });

        }
    </script>
<body>
    <input type="button" value="发送异步请求" οnclick="fun()"></input>

</body>
</html>

然后再创建一个HttpServlet实现类

package cn.sainan114;

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;

/**
 * FileName: JQuery
 *
 * @Author:luguobao Date: 11:24
 * Description:
 * History:
 * <author>   <time>   <version>   <desc>
 * 作者姓名    修改时间    版本号       描述
 */
@WebServlet("/ajaxServlet1111")
public class JQuery extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println(username);
        resp.getWriter().write("tom");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }
}

此时，重启，打开网页
发现如下错误：
在这里插入图片描述
看下这个错误要想到是否js数据没导入：

在html中进行导入数据

结果如下，成功引用了jquery。

使用 $. g e t () 来实现异步 g e t 请求语法：$ .get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
使用 $. p o s t () 来实现异步 g e t 请求语法：$ .post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
例：function fun(){
$.post(“ajaxServlet”,{username:“rose”},function(data){
alert(data);
},“text”);
}

json结合Springboot

首先，自己写一个查数据库接口；
在这里插入图片描述
我这里查出来效果是这样的；具体实现要看大家自己的；就是数据而已

然后，来一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <h1>hello world</h1>
    <button onclick="chenajx()">测试</button>
</body>
<script>
    $(document).ready(function ()
    {
        setInterval(function () {
            chenajx(chenaddresstp);
        }, 60000);
    });
    function chenajx(){
        $.ajax({
            type: "POST",
            url: "/test2",

            success: function (data) {
                alert(data);
                alert(data.devAddress);
               
                console.log(data.data);
            },
            error:function (ajaxobj) {
                if(ajaxobj.responseText!='')
                    alert(ajaxobj.responseText);
            }
        });
    }

</script>
</html>