异步请求 AJAX

Posted Al_tair

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了异步请求 AJAX相关的知识，希望对你有一定的参考价值。

AJAX

大家好呀，我是小笙，以下是我学习异步请求的笔记Ajax

异步请求 AJAX

概述

ajax在线文档

Ajax 是一种浏览器异步发起请求(指定发哪些数据)，局部更新页面的技术

Ajax 经典应用场景

  • 搜索引擎根据用户输入关键字，自动提示检索关键字
  • 动态加载数据，按需取得数据【树形菜单、联动菜单等】
  • 改善用户体验【输入内容前提示、带进度条文件上传等】
  • 电子商务应用【购物车、邮件订阅等】
  • 访问第三方服务【访问搜索服务、rss 阅读器】
  • 页面局部刷新

使用Ajax数据通讯框架图

优点：可以通过XMLHttpRequest对象，发送指定数据，速度快；可以异步发送请求（无需等待）；可以进行局部页面刷新，提高用户的体验

javascript 原生 Ajax 请求

应用实例-验证用户名是否存在

  1. 在输入框输入用户名
  2. 点击验证用户名, 使用 ajax 方式， 服务端验证该用户名是否已经占用了
  3. 如果该用户(tom) 已经占用, 以 json 格式返回该用户信息
  4. 对页面进行局部刷新, 显示返回信息

<%--
  Created by IntelliJ IDEA.
  User: 罗念笙
  version: 1.0
  Date: 2022/5/11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(function () 
                $("#btn").click(function () 
                    // 创建XMLHttpRequest对象【ajax引擎对象】
                    var xhttp = new XMLHttpRequest();

                    // open 请求行
                    // "POST" 指请求方法
                    // 中间的字符串指url
                    // true指的是异步请求,false指的是同步请求
                    xhttp.open("POST","<%= application.getContextPath()%>/checkUser",true);
                    // 一般使用 POST 发送请求时都必须设置该选项，否则服务器无法识别传递过来的数据
                    xhttp.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); // 设置为表单方式提交
                    // 真正的发送请求（本质就是http请求）
                    xhttp.send("username=" + $("#uname").val());

                    // 处理ajax请求
                    xhttp.onreadystatechange = function() 
                        console.log(xhttp);
                        if (this.readyState == 4 && this.status == 200) 
                            document.getElementById("div1").innerText = xhttp.responseText;
                        
                    ;
                )
            )
        </script>
    </head>
    <body>
        <h1>用户注册</h1>
        <form action="<%= application.getContextPath()%>/checkUser" method="post">
            用户名字  <input type="text" name="username" id="uname">
                    <input type="button" id="btn" value="验证用户名"/>
                    <input style="border-width: 0;color: red" type="text" id="myres"><br/>
            用户密码:<input type="password" name="password"><br/>
            电子邮件:<input type="text" name="email"><br/>
            <input type="submit" value="用户注册">
        </form>
        <h1>返回的 json 数据</h1>
        <div id="div1"></div>
    </body>
</html>

/**
 * @author Al_tair
 * @date 2022/5/11-16:59
 */
public class CheckUserServlet extends HttpServlet 
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
        req.setCharacterEncoding("utf-8");
        String username = req.getParameter("username");
        System.out.println(username);

        // 假定用户名为 tom被占用
        if("tom".equals(username))
            System.out.println("该用户有被占用");
            Gson gson = new Gson();
            User user = new User(1, "tom", "123456", "1079998564@qq.com");
            String userJson = gson.toJson(user);
            PrintWriter writer = resp.getWriter();
            writer.write(userJson);
            writer.flush();
            writer.close();
        else
            System.out.println("该用户没有被占用");
        
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException 
        doGet(req, resp);

JQuery 的 Ajax 请求

$.ajax 方法

● url： 请求的地址

● type : 请求的方式 get 或 post

● data : 发送到服务器的数据。将自动转换为请求字符串格式

● success: 成功的回调函数

● error: 失败后的回调函数

● dataType: 返回的数据类型 常用 json 或 text

注意： . g e t 请 求 ， .get 请求， .get请求，.post 请求和 . g e t J S O N 本 质 都 是 使 用 .getJSON本质都是使用 .getJSON本质都是使用.ajax 方法实现异步请求

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">
            $(function () 
                $("#btn").click(function () 
                    // 发出Ajax请求
                    $.ajax(
                            // 请求地址
                        	url:"<%= application.getContextPath()%>/checkUser",
                        	// 请求方法
                            type:"POST",
                            // 发送到服务器的数据
                            data:
                        		 // JSON格式
                        		 username:$("#uname").val(),
                                  date: new Date()
                		   ,
                            error:function () 
                                alert("error");
                            ,
                            success:function () 
                               alert("success");
                            ,
                            // 返回数据类型 
                            dataType:"json"
                    )
                )
            )
        </script>
    </head>
    <body>
        <h1>用户注册</h1>
        <form action="<%= application.getContextPath()%>/checkUser" method="post">
            用户名字  <input type="text" name="username" id="uname">
                    <input type="button" id="btn" value="验证用户名"/>
                    <input style="border-width: 0;color: red" type="text" id="myres"><br/>
            用户密码:<input type="password" name="password"><br/>
            电子邮件:<input type="text" name="email"><br/>
            <input type="submit" value="用户注册">
        </form>
        <h1>返回的 json 数据</h1>
        <div id="div1"></div>
    </body>
</html>

$ .get 请求和$ .post 请求(使用较多)

  • url: 请求的 URL 地址
  • data: 请求发送到服务器的数据
  • success: 成功时回调函数
  • type: 返回内容格式，xml, html, script, json, text
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function()
            $("#btn").click(function()
                $.post(
                    "<%= application.getContextPath()%>/checkUser",
                    
                        username:$("#uname").val(),
                        date: new Date()
                    ,
                    function (data,status,XHttp) 
                        if("" == data.name)
                            $("#myres").val("用户可用");
                        else
                            $("#myres").val("用户被占用");
                        
                        $("#div1").html(JSON.stringify(data));
                    ,
                    "json"
                )
            
                $.get(
                        "<%= application.getContextPath()%>/checkUser",
                        
                            username:$("#uname").val(),
                            date: new Date()
                        ,
                        function (data,status,XHttp) 
                            if("" == data.name)
                                $("#myres").val("用户可用");
                            else
                                $("#myres").val("用户被占用");
                            
                            $("#div1").html(JSON.stringify(data));
                        ,
                        "json"
                    )
            )
        )
    </script>
</head>
<body>
<h1>用户注册</h1>
<form action="<%= application.getContextPath()%>/checkUser" method="post">
    用户名字  <input type="text" name="username" id="uname">
    <input type="button" id="btn" value="验证用户名"/>
    <input style="border-width: 0;color: red" type="text" id="myres"><br/>
    用户密码:<input type="password" name="password"><br/>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

$.getJSON

  • url: 请求发送的哪个 URL
  • data: 请求发送到服务器的数据
  • success: 请求成功时运行的函数
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript" src="./jquery3.6.0/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function()
            $("#btn").click(function()
                // 注意：如果发出get方法的请求并且返回的数据格式是Json格式，就可以使用getJSON
                $.getJSON(
                    "<%= application.getContextPath()%>/checkUser",
                    
                        username:$("#uname").val(),
                        date: new Date()
                    ,
                    function (data,status,XHttp) 
                        if("" == data.name)
                            $("#myres").val("用户可用");
                        else
                            $("#myres").val("用户被占用");
                        
                        $("#div1").html(JSON.stringify(data));
                    ,
                )
            )
        )
    </script>
</head>
<body>
<h1>用户注册</h1>
<form action="<%= application.getContextPath()%>/checkUser" method="post">
    用户名字  <input type="text" name="username" id="uname">
    <input type="button" id="btn" value="验证用户名"/>
    <input style="border-width: 0;color: red" type="text" id="myres"><br/>
    用户密码:<input type="password" name="password"><br/>
    电子邮件:<input type="text" name="email"><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

以上是关于异步请求 AJAX的主要内容，如果未能解决你的问题，请参考以下文章

js中请求数据的$post和$ajax区别（同步和异步问题）

ajax异步刷新请求数据

Ajax异步请求

JavaScrpit中异步请求Ajax实现

Ajax的异步请求数据

jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）