AJAX

2021-11-04 本文已影响0人七喜丶

一、概述

javascript和xml -- 异步请求
在不中断用户对页面的情况下，实现和后台操作的数据交互，并利用服务器的响应数据进行页面的局部更新。

异步：用户对页面操作和请求是可以同时进行的（与同步不同）
更新：无需对整个页面进行刷新，所以后台向页面响应的数据无需包含全部，页面只需要添加部分内容，提高响应效率

二、ajax实现方式

2.1、原生js实现Ajax

代码：

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.获取请求参数
        String username = req.getParameter("username");

        //模拟服务器处理请求需要5秒钟
        /*try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/

        //2.判断姓名是否已注册
        if("zhangsan".equals(username)) {
            resp.getWriter().write("<font color='red'>用户名已注册</font>");
        }else {
            resp.getWriter().write("<font color='green'>用户名可用</font>");
        }
    }

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

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script>
    //1.为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function() {
        //2.创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        //3.打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","userServlet?username="+username,true);
        //xmlHttp.open("GET","userServlet?username="+username,false);

        //4.发送请求
        xmlHttp.send();

        //5.处理响应
        xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
</script>
</html>

解析：

核心对象：XMLHttpRequest
用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新
打开链接：open(method,url,async)
method：请求的类型 GET 或 POST
url：请求资源的路径
async：true(异步) 或 false(同步)
发送请求：send(String params)
params：请求的参数(POST 专用)
处理响应：onreadystatechange
readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪
status：200-响应已全部 OK
获得响应数据形式
responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据

2.2、jQuery实现Ajax
2.2.1、get | post请求方式

语法：
$.[ get | post ]("请求url",请求参数,function(data){
//data是服务器响应回来的数据
//在此处解析数据，进行页面局部更新
},"响应数据类型");

解释：
请求参数：
① 字符串格式，如： "username=zhangsan&pwd=123"
② json对象格式，如： {username:"zhangsan",pwd:"123"}

响应数据类型：告诉框架服务器响应的数据格式，框架内部会进行对象转换
text -- 默认值，框架内部不做处理，data是string格式
json -- 框架内部会将服务器响应的json格式字符串，转成json对象
xml -- 框架内部会将服务器响应的xml格式字符串，转成document对象

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的GET方式实现AJAX
        $.get(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );
    });
</script>
</html>

2.2.3、通用方式

语法：
$.ajax({
type:"请求方式",
url:"请求路径",
data:请求参数,
async:是否同步（Boolean）
success:function(result){
//result是服务器响应回来的数据
//在此处解析数据，进行页面局部更新
},
error:function () {
alert("操作失败...");
}
dataType:"响应数据类型"
});

解释：
和get相同

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <form autocomplete="off">
        姓名：<input type="text" id="username">
        <span id="uSpan"></span>
        <br>
        密码：<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.为用户名绑定失去焦点事件
    $("#username").blur(function () {
        let username = $("#username").val();
        //2.jQuery的通用方式实现AJAX
        $.ajax({
            //请求资源路径
            url:"userServletxxx",
            //是否异步
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("操作失败...");
            }
        });
    });
</script>
</html>

AJAX

一、概述

二、ajax实现方式

猜你喜欢

热点阅读