文章总结目录

1. Ajax的异步与同步

1.1 同步与异步概念

  • 同步：指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去，不能同时执行进程。

  • 异步：指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有信息返回的时候会通知进程进行处理，这样就可以提高执行的效率了，即异步是我们发出的一个请求，该请求会在后台自动发出并获取数据，然后对数据进行处理，在此过程中，我们可以继续做其他操作，不管它怎么发出请求，不关心它怎么处理数据，也可称之为并发数据。

1.2 Ajax在代码上的实现

// 假设这个是ajax请求1
// 如果第三个参数是false：这个就表示“ajax请求1”不支持异步，也就是说ajax请求1发送之后，会影响其他ajax请求的发送，只有当我这个请求结束之后，你们其他的ajax请求才能发送。
// false表示，不支持异步。我这个请求发了之后，你们其他的请求都要靠边站。都等着。你们别动呢，等我结束了你们再说。
xhr1.open("请求方式", "URL", false)
xhr1.send()

// 假设这个是ajax请求2
// 如果第三个参数是true：这个就表示“ajax请求2”支持异步请求，也就是说ajax请求2发送之后，不影响其他ajax请求的发送。
xhr2.open("请求方式", "URL", true) 
xhr2.send()

1.3 Ajax同步与异步使用的场景

例如：

  • 用户注册

    • 用户名需要发送ajax请求进行校验

    • 邮箱地址也需要发送ajax请求校验

    • 其他的也可能需要发送ajax请求。。。

    • 并且最终注册按钮的时候，也是发送ajax请求进行注册。

      • 那么显然，注册的Ajax请求和校验的ajax请求不能异步，必须等待所有的校验ajax请求结束之后，注册的ajax请求才能发。

2. Ajax代码的封装

2.1 Ajax代码封装的原因

  • AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。

2.2 如何实现Ajax代码的封装

  • 手动封装一个工具类，这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字，叫做jQuery。（我这里封装的jQuery只是一个前端的库，和后端的java没有关系，只是为了方便web前端代码的编写，提高WEB前端的开发效率）

  • 手写的jQuery源代码【存在bug,简单理解】

  • 开发时需要注意的内容：

    • 在判断是一个元素节点之后，将生成的变量改为全局变量,返回的是一个jQuery对象（全局变量已经满足可以随时使用，这里就需要返回一个jQuery（相当于一个类，可以使用jQuery调用对象的函数【blur,onclick…】）
    • 使用typeof()判断变量类型是字符串时是：string
    • $ == jQuery是将jQuery的名字变成了‘$’
function jQuery(selector){
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }

    // 静态的方法，发送ajax请求
    /**
     * 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
     *      请求的方式(type)：GET/POST
     *      请求的URL(url)：url
     *      请求时提交的数据(data)：data
     *      请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
     */
    jQuery.ajax = function(jsonArgs){
        // 1.
        var xhr = new XMLHttpRequest();
        // 2.
        xhr.onreadystatechange = function(){
            if (this.readyState == 4) {
                if (this.status == 200) {
                    // 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
                    var jsonObj = JSON.parse(this.responseText)
                    // 调用函数
                    jsonArgs.success(jsonObj)
                }
            }
        }

        if (jsonArgs.type.toUpperCase() == "POST") {
            // 3.
            xhr.open("POST", jsonArgs.url, jsonArgs.async)
            // 4.
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(jsonArgs.data)
        }

        if (jsonArgs.type.toUpperCase() == "GET") {
            xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
            xhr.send()
        }

    }
}
$ = jQuery

// 这里有个细节，执行这个目的是为了让静态方法ajax生效。
new jQuery()

2.3 Ajax代码封装的使用样例

  • 前端页面：
    • html代码编写
    • js代码就是用上面的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试自己编写的jQuery库</title>
</head>
<body>
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">

    $(function () {
        $("#btn").click(function () {
            $.ajax({
                type: "POST",
                url: "/ajax/ajaxrequest11",
                async: true,
                data: "username=" + $("#username").val(),
                success: function (json){
                    $("#mydiv").html(json.username)
                }
            })
        })
    })
</script>

用户名：<input type="text" id="username" ><br>
<input type="button" id="btn" value="发送Ajax get请求">
<div id="mydiv"></div>
</body>
</html>
  • 后端代码
package com.lcl.ajax.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

/**
 * @Author Administration
 * @PackageName NewWeb
 * @Package com.lcl.ajax.servlet
 * @Date 2022/8/19 14:42
 * @Description: 测试自己编写的jQuery库
 */
@WebServlet("/ajaxrequest11")
public class AjaxRequest11Servlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");

        response.getWriter().print("{\"username\":\""+username+"\"}");
    }
}
# ajax # jquery # javascript
Logo
MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

cover

【CodeBuddy + 自制MCP】给AI装上翅膀，快速绘制思维导图

avatar MCP技术社区

如何将普通HTTP API接口改造为MCP服务器

创建.proto通过本文的四步改造法，你可获得：✅ 配置更新延迟降低90%✅ 网络带宽消耗减少70%✅ 服务端资源占用下降60%✅ 原生支持百万级节点连接升级到MCP不仅是协议转换，更是配置分发模式的架构进化。立即行动，让你的微服务配置管理进入实时推送时代！更多Istio进阶技巧请关注专栏【Service Mesh深度实践】

avatar MCP技术社区

npm 与 npx 区别详解。以及mcp中npx加载原理。

场景推荐工具原因项目必需依赖（如 React）npm需要长期存在 node_modules构建工具/脚手架npx偶尔执行且需最新版本命令行工具npx避免全局安装造成版本冲突💡黄金法则npm用于管理依赖，npx用于执行命令！当遇到mcp这类工具时，大胆使用 npx 吧！

avatar MCP技术社区