AJAX-老杜

最新推荐文章于 2025-05-18 03:42:29 发布
最新推荐文章于 2025-05-18 03:42:29 发布
阅读量158 收藏 1
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_66808283/article/details/131684774
版权

Ajax（Asynchronous Javascript And Xml）

  • 传统请求的缺点：

    • 发送一个请求就会前空掉原界面所有的内容
    • Ajax实现局部刷新

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSJMyRBF-1689150304234)(C:\Users\26332\AppData\Roaming\Typora\typora-user-images\image-20230709103508924.png)]

  • 什么是异步，什么是同步？

    • 异步：假设有他t1和t2线程，t1和t2线程并发
    • 同步：假设有他t1和t2线程，t2在执行的时候，必须等待t2线程执行到某个位置
    • Ajax是异步请求：在同一个浏览器页面，可以发送多个Ajax请求，这些Ajax请求之间不需要等待

XMLHttpRequest对象

链接：https://blog.youkuaiyun.com/jsdoulaoula/article/details/125889583

Ajax GET请求

发送Ajax get请求，前端jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Ajax</title>
  </head>
  <body>
  <script type="text/javascript ">
    //页面加载完成后调方法
    window.οnlοad=function () {
      document.getElementById("btn").onclick = function () {
        //1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //第二步：注册回调函数
        //这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变时被调用
        xhr.onreadystatechange = function () {
          //这里回调函数会被调用多次
          //0->1被调用一次
          //1->2被调用一次
          //2->3被调用一次
          //3->4被调用一次
          // console.log(xhr.readyState);
          //当XMLHttpRequest对象的状态是4的时候，表示响应结束
          //readyState是XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
          if (xhr.readyState == 4) {
            //status是浏览器响应的状态码。200：成功  400：找不到资源  500：服务器错误
            if (xhr.status == 200) {
              //取到要改变的元素
              var text= document.getElementById("textid")
              //responseText是将servlet的输出打到这里
              text.value=xhr.responseText;
            }
          }
        }
        //第三步：开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求)
        // open(method: string, url: string): void;
        // open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;
        //method：请求方法,url:请求地址,async：是否异步，username，password
        xhr.open("GET","/ajax2/ajaxtese",true)
        //发送请求
        xhr.send();
      }
    }
  </script>
  <input type="button" value="点击我" id="btn">
<%--  <span id="textid"></span>--%>
  <input type="text" id="textid">
  </body>
</html>

前端代码模板:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
</head>
<body>
<script type="text/javascript ">
    //页面加载完成后调方法
    window.οnlοad=function () {
        //1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        document.getElementById("btn").onclick = function () {
            //2.注册回调函数
            //这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变时被调用
            //在回调函数后设置textChangeFunction方法
            xhr.onreadystatechange = textChangeFunction
            //3.开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求)
            //method：请求方法,url:请求地址,async：是否异步，username，password
            xhr.open("GET","/ajax2/ajaxtese",true)
            //4.发送请求
            xhr.send();
        }
        //创建textChangeFunction方法
        function textChangeFunction(){
            //readyState是XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
            if (xhr.readyState == 4) {
                //status是浏览器响应的状态码。200：成功  400：找不到资源  500：服务器错误
                if (xhr.status == 200) {
                    //取到要改变的元素
                    var text= document.getElementById("textid")
                    //responseText是将servlet的输出打到这里
                    text.value=xhr.responseText;
                }
            }
        }
    }
</script>
<input type="button" value="点击我" id="btn">
<%--  <span id="textid"></span>--%>
<input type="text" id="textid">
</body>
</html>

后端Servlet代码：

package 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;
import java.io.PrintWriter;
@WebServlet("/ajaxtese")
public class ajaxservlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        out.print("看text里有值了");
    }
}

  • 怎么Ajax get请求如何提交数据呢？

    • get请求提交数据是在“请求行”上提交，格式是url?属性名=属性值&属性名=属性值…

    • 就在第三步的开启通道前获取数据对象，再开启通道是填写的路径将该数据对象按格式绑定上去

    • 前端代码:

      <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>Ajax</title>
  </head>
  <body>
  <script type="text/javascript ">
    //页面加载完成后调方法
    window.οnlοad=function () {
      document.getElementById("btn").onclick = function () {
        //1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //第二步：注册回调函数
        //这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变时被调用
        xhr.onreadystatechange = function () {
          //这里回调函数会被调用多次
          //0->1被调用一次
          //1->2被调用一次
          //2->3被调用一次
          //3->4被调用一次
          // console.log(xhr.readyState);
          //当XMLHttpRequest对象的状态是4的时候，表示响应结束
          //readyState是XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
          if (xhr.readyState == 4) {
            //status是浏览器响应的状态码。200：成功  400：找不到资源  500：服务器错误
            if (xhr.status == 200) {
              //取到要改变的元素
              document.getElementById("spanid").innerHTML=xhr.responseText;
              //responseText是将servlet的输出打到这里
            }
          }
        }
        //第三步：开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求)
        // open(method: string, url: string): void;
        // open(method: string, url: string, async: boolean, username?: string | null, password?: string | null): void;
        //method：请求方法,url:请求地址,async：是否异步，username，password
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        xhr.open("GET","/ajax2/ajaxtese?username="+username+"&password="+password,true)
        //发送请求
        xhr.send();
      }
    }
  </script>
  <input type="text" id="username"><br>
  <input type="password" id="password"><br>
  <input type="button" value="登录" id="btn"><br>
  <span id="spanid"></span><br>
  </body>
</html>

      后端代码：

      package 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;
import java.io.PrintWriter;
@WebServlet("/ajaxtese")
public class ajaxservlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        out.print("账号："+username+",密码："+password+"<br>登陆成功");
    }
}

Ajax GET请求的缓存问题

  • 对于低版本的IE浏览器，Ajax的get请求可能会走缓存，存在缓存问题

  • 对于现在的浏览器来说，大部分浏览器都不存在该问题

  • 什么是Ajax get请求的缓存问题呢？

    • 在HTTP协议中是这样规定get请求的：get请求会被缓存起来
    • 在HTTP协议中是这样规定post请求的：post请求会被缓存起来

  • GET请求缓存的优缺点：

    • 直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
    • 缺点：无法实时获取到服务器的资源

  • 什么时候会走缓存？

    • 第一：是一个GET请求
    • 第二：请求路径已经被浏览器缓存过了，第二人发送路径和缓存一模一样

  • 如果是低版本的IE浏览器，怎么解决Ajax GET请求的缓存问题呢？

    • 在url加一个时间戳，这样每次请求的url都不一样

    • usr?time=new Date().getTime()

Ajax POST请求

  • 要注意：若想使用POST请求提交form表单数据，则需要注意两点(与GET请求不同点)

    • 1.要在打开通道前设置请求头内容类型

      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    • 2.要将绑定的数据放到发送请求处

      //放到send()这个函数的小括号当中的数据，会自动在前驱图当中提交数据
var username=document.getElementById("usernameid").value;
var password=document.getElementById("passwordid").value;
xhr.send("username="+username+"&password="+password);

  • 全部代码：(后端Java代码不变)

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>发送Ajax POST请求</title>
  </head>
  <body>
    <script type="text/javascript">
      window.οnlοad=function (){
        document.getElementById("btnid").οnclick=function (){
          //创建XMLHttpRequest对象
          var xhr = new XMLHttpRequest();
          //注册回调函数
          xhr.onreadystatechange=function (){
            if (xhr.readyState==4){
              if (xhr.status==200){
                  document.getElementById("spanid").innerHTML=xhr.responseText;
              }
            }
          }
          //开启通道
          xhr.open("POST","/ajax/ajaxtext",true);
          //发送请求
          //怎么模拟Ajax提交form表单呢？设置请求头内容类型，必须在open之后
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          //放到sen()这个函数的小括号当中的数据，会自动在前驱图当中提交数据
          var username=document.getElementById("usernameid").value;
          var password=document.getElementById("passwordid").value;
          xhr.send("username="+username+"&password="+password);
        }
      }
    </script>
    username:<input type="text" id="usernameid"><br>
    password:<input type="password" id="passwordid"><br>
    <input type="button" value="登录" id="btnid"><br>
    <span id="spanid"> </span>
  </body>
</html>

AJAX经典案例-验证用户名是否可用

  • 实现一个案例：使用Ajax POST请求实现用户注册的时候，用户名是否可用

    • 实现步骤：

      • 在前端，用户输入用户名之后，失去焦点事件blur发生，然后发送Ajax POST请求，提交用户名
      • 在后端，接收到用户名，连接数据库，根据用户名在表中搜索
      • 如果用户名存在
        • 后端响应信息：对不起，用户名已存在（在前端页面以红色字体展示）
      • 如果用户名不存在
        • 后端响应信息：用户名可使用（在前端以绿色字体展示）
    • //前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户注册</title>
  </head>
  <body>

  <script type="text/javascript" charset="UTF-8">
    window.οnlοad=function (){
      //将username框失去焦点事件绑定方法
      document.getElementById("usernameid").οnblur=function (){
        //创建XMLHttpRequest
        var xhr = new XMLHttpRequest;
        //注册回调函数
        xhr.onreadystatechange=function (){
          //如果请求状态结束则进入
          if (xhr.readyState==4){
            //如果浏览器请求成功
            if (xhr.status==200){
              document.getElementById("spanid").innerHTML=xhr.responseText;
            }
          }
        }
        //开启通道
        xhr.open("POST","/userOrder/usernameTest",true);
        //设置请求头内容类型
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //绑定数据发送到后端
        var username = document.getElementById("usernameid").value;
        xhr.send("username="+username)
      }
    }
  </script>
    useranme:<input type="text" id="usernameid"><span id="spanid"></span> <br>
    password:<input type="password" id="passwordid"><br>
    <input type="submit" value="登录"><br>
  </body>
</html>

      //后端代码
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;
import java.io.PrintWriter;
import java.sql.*;

@WebServlet("/usernameTest")
public class testUsername extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        response.setContentType("text/html");
        //获取前端传来的用户名
        String username = request.getParameter("username");
        Connection conn=null;
        PreparedStatement ps=null;
        ResultSet rs=null;
        //注册驱动
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        //创建连接
            conn= DriverManager.getConnection("jdbc:mysql://localhost:3306/mvc","root","123456");
            String sql="select * from user where username=?";
            ps=conn.prepareStatement(sql);
            ps.setString(1,username);
            rs=ps.executeQuery();
            if (rs.next()){
                out.print("<font size=\"2px\" color=\"red\">用户名重复</font>");
            }else {
                out.print("<font size=\"2px\" color=\"green\">用户名合法</font>");
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            if (conn!=null){
                try {
                    conn.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (ps!=null){
                try {
                    ps.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (rs!=null){
                try {
                    rs.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
        }
    }
}

基于JSON的数据交换

  • 在WEB前端中，如何将一个json格式的字符串转换成json对象（外层的双引号和里面的双引号冲突了，所以加个\来进行转译）

    • var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
var jsonObj = JSON.parse(jsonStr)
console.log(jsonObj.username)
console.log(jsonObj.password)

  • 在后端拼接JSON格式的字符串，响应给前端的浏览器

    • json.append("[");
while (rs.next()) {
    // 获取每个学生的信息
    String name = rs.getString("name");
    String age = rs.getString("age");
    String addr = rs.getString("addr");
    // 拼接json格式的字符串
    // {"name":"   王五    ","age":    20      ,"addr":"      北京大兴区     "},
    json.append("{\"name\":\"");
    json.append(name);
    json.append("\",\"age\":");
    json.append(age);
    json.append(",\"addr\":\"");
    json.append(addr);
    json.append("\"},");
}
jsonStr = json.substring(0, json.length() - 1) + "]";

  • 拼接JSON格式的字符串太痛苦，可以使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串

    • List<Student> studentList = new ArrayList<>();
while (rs.next()) {
    // 取出数据
    String name = rs.getString("name");
    int age = rs.getInt("age");
    String addr = rs.getString("addr");
    // 将以上数据封装成Student对象
    Student s = new Student(name, age, addr);
    // 将Student对象放到List集合
    studentList.add(s);
}
// 将List集合转换成json字符串
jsonStr = JSON.toJSONString(studentList);

    • 注意：使用fastjson需要引入fastjson-1.2.2.jar

基于XML的数据交换

  • 注意：如果服务器端响应XML的话，响应的内容类型需要写成：

    • response.setContentType("text/xml;charset=UTF-8");

  • 基于XML的数据交换，前端代码:

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XML完成数据交换</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            // 1.创建XMLHTTPRequest对象
            var xhr = new XMLHttpRequest();
            // 2.注册回调函数
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 服务器端响应了一个XML字符串，这里怎么接收呢？
                        // 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以自动封装成document对象（文档对象）
                        var xmlDoc = this.responseXML
                        //console.log(xmlDoc)
                        // 获取所有的<student>元素，返回了多个对象，应该是数组。
                        var students = xmlDoc.getElementsByTagName("student")
                        //console.log(students[0].nodeName)
                        var html = "";
                        for (var i = 0; i < students.length; i++) {
                            var student = students[i]
                            // 获取<student>元素下的所有子元素
                            html += "<tr>"
                            html += "<td>"+(i+1)+"</td>"
                            var nameOrAge = student.childNodes
                            for (var j = 0; j < nameOrAge.length; j++) {
                                var node = nameOrAge[j]
                                if (node.nodeName == "name") {
                                    //console.log("name = " + node.textContent)
                                    html += "<td>"+node.textContent+"</td>"
                                }
                                if (node.nodeName == "age") {
                                    //console.log("age = " + node.textContent)
                                    html += "<td>"+node.textContent+"</td>"
                                }
                            }
                            html += "</tr>"
                        }
                        document.getElementById("stutbody").innerHTML = html
                    }else{
                        alert(this.status)
                    }
                }
            }
            // 3.开启通道
            xhr.open("GET", "/ajax/ajaxrequest6?t=" + new Date().getTime(), true)
            // 4.发送请求
            xhr.send()
        }
    }
</script>
<button id="btn">显示学生列表</button>
<table width="500px" border="1px">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="stutbody">
    <!--<tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>20</td>
    </tr>
    <tr>
        <td>2</td>
        <td>lisi</td>
        <td>22</td>
    </tr>-->
    </tbody>
</table>
</body>
</html>

AJax乱码问题

Ajax的异步与同步

版权声明：本文为优快云博主「蓦然回首却已人去楼空」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/jsdoulaoula/article/details/125889583

Ajax代码封装

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 or false
     * */
    JQuery.ajax=function (jsonArgs){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4){
                if (xhr.status==200){
                    //工具类封装只考虑了JSON格式
                    var jsonObj=JSON.parse(this.responseText);
                    //调用成功函数
                    jsonArgs.success(jsonObj)
                }
            }
        }
        if (jsonArgs.type.toUpperCase()=="POST"){
            xhr.open("POST",jsonArgs.url,jsonArgs.async);
            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()

测试前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript" src="js/JQuery-1.0.0.js"></script>
<script type="text/javascript">
    window.onload=function (){
        document.getElementById("btn").onclick=function (){
            var username=document.getElementById("username").value
            $.ajax({
                type:"POST",
                url:"/ajax/ajaxrequest",
                data:"username="+username,
                async:true,
                //响应回来之后，拿到响应的数据
                success:function (json){
                    document.getElementById("mydiv").innerHTML=json.username
                }
            })
        }
    }


</script>

<button id="btn">发送Ajax请求</button><br>
用户名：<input type="text" id="username"><br>
<div id="mydiv"></div>
</body>
</html>

测试后端代码

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;

@WebServlet("/ajaxrequest")
public class servletTest extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        response.getWriter().print("{\"username\":\""+username+"\"}");
    }
}

老杜：分享Java零基础小白学习方法和Java学习路线 课程笔记
qq_36952655的博客
01-14 2187
一、学习前的准备 1、一个好的学习方法 合格程序员需要具备两个能力：指法速度（左手ASDF 右手JKL; 形成肌肉记忆）、编程思想 编程思想的形成： 课程知识的理解消化、反向验证结论（尝试推翻课堂结论）比作业更重要 2、一个好的截图工具 Snipaste 3、一个好的笔记软件 OneNote 笔记只记重点结论 简笔笔记 4、一台好一点的电脑 建议配置：酷睿i7九代以上，至少16G内存 二、开启你的学习之旅（学习路线） JavaSE——java语言的基础、是java最基本的库，基础语法
老杜Vue实战教程完整版笔记（四）Vue与AJAX
whgha的博客
04-27 287
学习の地止：https://www.bilibili.com/video/BV17h41137i4。
Ajax-老杜
jsdoulaoula的博客
07-21 1142
写在前面，此文只能满足想知道ajax是如何一步步实现和框架下封装的是什么。想快速实现，直接去看VUE等框架如何实现即可。 传统请求存在的问题 页面全部刷新导致了用户的体验较差。 传统的请求导致用户的体验有空白期。（用户的体验是不连贯的） 四、XMLHttpRequest对象 XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。创建XMLHttpRequest对象
AJAX笔记
qwerasdctds的博客
07-31 425
AJAX笔记
老杜Servlet笔记.zip
06-09
哔哩哔哩上老杜的Servlet笔记。 2020-5-05 Servlet学习 Tomcat 服务器配置 2020-5-08 UML 2020-5-08 Servlet学习 2020-5-09 Servlet学习 2020-5-10 Servlet学习 2020-5-11 Servlet学习---Cookie 2020-5-11 Servlet中的路径 2020-5-11 Servlet学习---Session 2020-5-17 监听器学习 2020-5-17 IDEA中的Maven的简单使用 2020-5-18 JavaWeb学习 2020-5-19 JavaWeb学习 2020-5-21 JavaWeb学习 JSP，EL，JSTL，Filter， 2020-5-23 MVC、三层设计 2020-5-24 数据分页展示
HTML-老杜-笔记
yiersano的博客
05-29 709
HTML 文章目录1、系统结构：2、什么是HTML？怎么开发HTML？怎么运行HTML？3、HTML是谁制定的？4、HTML格式5、HTML基本标签6、实体符号7、表格7.1建表7.2、表格合并7.3、thead tbody tfoot8、背景图片和颜色9、图片10、超链接 热链接11、列表12、表单行12.1、创建表单及提交12.2、用户注册页面12.3、下拉列表支持多选12.4、file控件，hidden控件12.5 、readonly和disabled控件12.6、input控件的maxlength属
AJAX2022最新版【老杜】
m0_62890270的博客
08-30 817
XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。创建XMLHttpRequest对象 XMLHttpRequest对象的方法发送AJAX get请求，前端代码： 发送AJAX get请求，后端代码： AJAX get请求如何提交数据呢？AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。 实现一个案例：使用AJAX P
AJAX---B站学习笔记总结
qq_39314972的博客
04-11 211
AJAX学习笔记总结 交互概念（同步和异步） 概念： 实现方式： 1.原生的JS实现方式 //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else...
Ajax跨域问题
helpluozhao123的博客
11-03 3759
ajax 是不能跨域。那么怎么解决前端发送请求的跨域问题呢。超详细，1、设置响应头、2、通过jsonp 3、通过调用jQuery封装的jsonp 4、httpclient 5、nginx
AJAX学习笔记——AJAX的异步与同步
weixin_62117675的博客
11-12 364
AJAX学习笔记——AJAX的异步与同步 （大多是情况下使用异步，只有在极个别的情况下使用同步）
动力节点老杜Ajax教程配套学习笔记分享
07-24
原生的ajax虽然在实际开发中很少编写，但如果想将js高级框架底层学明白，那ajax的原理是必须要求精通的。 本套ajax视频对ajax底层实现原理讲解非常透彻，对ajax发送异步请求的每一步都进行了透彻的分析，让你彻底搞...
JavaWeb动力节点
05-23
AJAX（Asynchronous JavaScript and XML）用于异步数据交换，jQuery是简化JavaScript操作的库。 9. **系统架构**： C/S（Client/Server）和B/S（Browser/Server）架构是两种常见的系统设计模式，C/S适合速度要求高...
javaweb老杜
03-16
它涵盖了多个技术栈，包括但不限于 Servlet、JSP、AJAX、jQuery、MyBatis 和 Spring 系列框架等[^1]。 #### 2. 开发环境搭建指南 在实际开发过程中，通常会使用 IDE 工具（如 IntelliJ IDEA 或 Eclipse）来创建项目...
上集：一个前端的血泪复仇记 —— 静态部署的胜利
十步杀一人-千里不留行
05-17 971
在《上集：一个前端的血泪复仇记 —— 静态部署的胜利》中，作者分享了在部署一个前后端分离的小项目时遇到的挑战和解决方案。项目后端使用Spring Boot，前端使用Next.js。在部署过程中，前端静态资源的处理成为主要难题。作者通过将Next.js生成的静态文件直接放入Spring Boot的static目录，简化了部署流程。然而，Spring Security的默认配置阻止了对这些静态资源的访问，导致403错误。通过调整SecurityConfig和WebConfig，作者成功解决了这一问题。此外，前端
如何选择合适的企业级商城系统前端状态管理方案？
万米商云的博客
05-14 541
在复杂的电商场景中，前端状态管理是保障系统高性能、可维护性和数据一致性的核心环节。面对商品数据实时更新、多模块状态共享、高并发请求等挑战，如何选择合适的状态管理方案？
MySQL、FastAPI 和 React 构建一个完整的全栈待办事项应用
最新发布
No trade is free, but my contents are.
05-18 532
MySQL 数据库：存储待办事项FastAPI 后端：提供 RESTful APIReact 前端：用户界面。
Vuetify框架使用(一)之v-snackbar 组件封装及全局使用
小破孩的博客
05-15 378
Vuetify框架使用(一)之v-snackbar 组件封装及全局使用
Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】
2401_87493916的博客
05-15 436
Weblogic中存在一个SSRF漏洞，利用该漏洞可以发送任意HTTP请求，进而攻击内网中redis、fastcgi等脆弱组件。
web第二次课后作业--设计一个注册登录系统
2302_80908433的博客
05-15 253
【代码】web第二次课后作业--设计一个注册登录系统
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值