当前位置：首页 > article >正文

ES6的简单介绍(第二部分)

article 2024/11/17 5:30:48

五异步编程

5.1 回调函数

5.1.1 概念

回调函数(callback function)，当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。你可以将其理解为 回头再调用的意思，其实回调函数就是普通函数，只不过名字起的特殊，根据应用场景而命名的而已。

回调函数通常用于事件处理、异步编程和处理各种操作系统和框架的API。

基本概念：

回调：指被传入到另一个函数的函数。
异步编程：指在代码执行时不会阻塞程序运行的方式。
事件驱动：指程序的执行是由外部事件触发而不是顺序执行的方式。

5.1.2 应用场景

回调函数是一种常见的编程技术，它可以在异步操作完成后调用一个预定义的函数来处理结果。回调函数通常用于处理事件、执行异步操作或响应用户输入等场景。

回调函数的作用是将代码逻辑分离出来，使得代码更加模块化和可维护。使用回调函数可以避免阻塞程序的运行，提高程序的性能和效率。另外，

回调函数还可以实现代码的复用，因为它们可以被多个地方调用。

回调函数的使用场景包括：

事件处理：回调函数可以用于处理各种事件，例如鼠标点击、键盘输入、网络请求等。

异步操作：回调函数可以用于异步操作，例如读取文件、发送邮件、下载文件等。

数据处理：回调函数可以用于处理数据，例如对数组进行排序、过滤、映射等。

插件开发：回调函数可以用于开发插件，例如 WordPress 插件、jQuery 插件等。

回调函数是一种非常灵活和强大的编程技术，可以让我们更好地处理各种异步操作和事件。

例子1:
let nums = [10, 20, 30, 40];
let f1 = (value, index) => console.log(value, index);
nums.forEach(f1)

例子2:
let f1 = () => { console.log("aaaaaa"); }
document.getElementById("btn").addEventListener("click", f1)

例子3： 定时器里的第一个参数：就是回调函数。  3秒后回头来调用该函数 
setTimeout(()=>{
   console.log("hello world")
},3000)

5.2 同步和异步

5.2.1 同步编程简介

所谓同步：就是程序按照代码的顺序执行，一次只执行一个任务，当前任务执行完毕，才能执行下一个任务。

1）同步编程的优点：

代码逻辑简单

在同步编程中，代码的执行顺序与编写顺序一致。这意味着开发者在编写程序时，可以按照其自然逻辑去组织代码。这样的一对一映射关系大大降低了程序逻辑的复杂性，使得代码更易维护和扩展。

强顺序控制

由于执行流程是按部就班的，同步编程确保了程序的严格顺序控制。某一任务必须完成后，才会执行下一个任务。这对于某些依赖于前一操作结果的任务特别有用。

易于理解和调试

对于开发者来说，同步代码通常更容易理解。而且在调试过程中，由于操作顺序固定且有序，开发者可以更准确地预测错误发生的位置及原因。

资源利用和管理

在同步编程模式下，资源管理相对简单。开发者不需要关注资源在不同线程或进程间的共享问题，可以避免多线程程序中的锁和同步机制，减少系统开销。

稳定性和一致性

由于程序的执行是串行的，避免了多线程编程中常见的竞态条件和副作用。这使得同步程序在运行时更加稳定，输出结果也更加一致。

2）同步编程的缺点

性能问题

同步编程会阻塞程序的执行，当某个操作耗时较长时，会导致程序的整体性能下降。特别是在处理大量的并发请求时，同步编程可能造成长时间的等待，无法充分利用系统资源。

处理并发问题的能力有限

由于同步编程是按照代码的执行顺序依次执行，无法在多个线程之间进行快速切换。因此，同步编程在处理大量的并发请求时可能无法很好地发挥其优势，导致性能瓶颈

代码复杂度增加

在同步编程中，由于每个操作都需要等待前一个操作完成，可能导致代码的嵌套层级较深，逻辑复杂。特别是在处理多个依赖性较强的操作时，代码的可读性和可维护性会受到一定的影响。

5.2.2 JavaScript的同步演示

JavaScript编程语言，默认是单线程机制，也就是同步。我们来演示一个同步案例： 注册页面的填写和验证功能

1、准备一个注册页面

2、给用户名添加失去焦点事件

3、绑定事件处理函数，先验证正则表达式，然后验证用户名是否已经被占用

4、用户名提交到服务端，然后使用伪代码来模拟验证时间花了30秒左右

案例总结：

         当校验用户名是否已经被占用时，我们会向服务端发送一个请求操作。服务器在收到请求后，一定会出现下面三种状态中某一种。
        1. 验证成功：success
        2. 验证失败：fail
        3. 验证中： pending 还没有得到具体的结果(成功，失败)

        假设页面是同步行为，那么验证失败或者成功的这个时间段非常短，在一秒以内，那么对于用户的体验感是没有多大影响的，
        如果因为网络波动或者其他原因，服务器要经过5秒甚至30秒以上的时间才给浏览器反馈，那么用户也得等待5秒甚至30秒以上的时间后，才能填写后续的文本框内容。这样的用户体验特别不好！

什么叫好的用户体验？
        当验证用户名时，用户依然可以往下填写内容。这样的体验较好。用户行为和校验请求是异步的(同时进行的)。

还有一个问题待解决，就是页面总刷新的问题。

在登录页面中，我们使用转发技术做用户名或者密码校验时，会涉及到一个页面重新刷新的动作。因为服务器会将整个页面资源进行打包响应给浏览器，浏览器会重新加载整个完整的页面。如果页面资源比较多，那么一定会占用过多的网络传输IO。

代码如下：
RequestDispatcher rd = request.getRequestDispatcher("login.jsp")
rd.forward(request,response)

页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>     
</head>
<body>
    <div>
        <form action="" method="" >
                <fieldset class="wrap">
                    <legend>注册页面</legend>
                    用户名：<br>
                    <input type="text" name="username" id="username" placeholder="请输入用户名" onblur="checkUsername()"> 
                    <span id="username_msg"></span>
                    <br>
                    密码：<br>
                    <input type="password" name="password" id="password" placeholder="请输入密码"> <br>
                    确认密码：<br>
                    <input type="password" name="repassword" id="repassword" placeholder="请再次输入密码"> <br>
                    性别：
                    <input type="radio" name="gender" id="" value="f"> 女
                    <input type="radio" name="gender" id="" value="m"> 男 <br>
                    <input type="submit" value="注册">
                </fieldset>

        </form>
    </div>
</body>
<script>
    function checkUsername(){
        let username = $("username").value;
        let regex = /^[\w]{8,12}$/;
        if(!regex.test(username)){
            alert("您输入的用户名格式不是8-12个单词字符")
        }
        // 符合正则表达式，然后将数据发送到服务器进行验证是否已经被占用
        // 使用window里的XMLHttpRequest对象，发送同步请求
        var xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:8088/jsp_day03/checkUsername.do?username="+username,true)
        //绑定回调函数：请求成功或者失败时，会调用绑定的函数
        xhr.onreadystatechange=function(){
            if(xhr.readyState == 4 || xhr.status == 200){
                // 获取响应数据
                let txt = xhr.responseText;
                $("username_msg").innerText = txt;
            }
        }
        // 发送
        xhr.send(null);
    }
    function $(id){
        return document.getElementById(id);
    }
</script>
</html>

服务端代码

package com.Ajax;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.vo.Stock;

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;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
/*
服务端的代码： 注册页面在验证用户名是否已经被占用。
            如果占用，进行提示，用户名已经被占用，请重新输入
            如果没有被占用，提示，用户名可以使用
 */

@WebServlet(urlPatterns={"*.do"})
public class Myservlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter wr = resp.getWriter();
        // 解决跨域问题： 添加消息头
        resp.setHeader("Access-Control-Allow-Origin", "*");
        // 获取请求资源路径
        String uri = req.getRequestURI();
        System.out.println("uri"+uri);
        if (uri.contains("checkUsername.do")){
            String username = req.getParameter("username");
            System.out.println("注册页面传过来的用户名："+username);
            if("zhangsan".equals(username)){
                wr.println("用户名已经被占用，请重新输入");
            }else {
                wr.println("用户名可以使用");
            }
        } 
    }
}

5.2.3 异步编程简介

在传统的同步编程中，任务一般会逐一执行，导致后续任务必须等待前一个任务完成后才能开始。与之相对，异步编程允许程序在等待某些操作（如数据的读写或网络请求）完成时继续执行其他任务，从而有效减少等待时间和提高程序运行效率。

异步的任务，并不会像同步任务一样按照顺序执行，而是当一个异步任务被创建以后，他会被放入==任务队列==中进行等待，然后通过一定的机制，来让其回到主线程继续执行。

console.log("任务1--同步");
console.log("任务2--同步");
setTimeout(function () { console.log("任务3--异步"); }, 0)
console.log("任务4--同步");

异步编程的两大核心优势

提升执行效率

异步编程通过并行处理多个操作或任务，有效地利用系统资源，尤其是在涉及到I/O操作（如文件读写、网络请求等）的场景中，能显著减少程序的闲置时间，从而加速程序的整体运行速度。
改善用户体验

尽管异步编程带来了诸多好处，但它也引入了一些挑战，主要包括代码复杂性增加和调试难度提升。由于异步代码的执行顺序不像同步代码那样直观，因此维护和理解异步代码可能会更加困难。

不过，异步编程的优点远远大于缺点的。

异步编程的两个关键概念

事件循环

事件循环是异步编程的核心，负责管理和执行所有的异步任务。它不断检查是否有任务完成并准备执行回调函数，是异步编程能够实现的基础。
回调函数

回调函数是异步操作完成后被调用的函数。通过回调，程序可以在适当的时候响应异步操作的完成，执行相应的任务。

在JavaScript中，可以完成异步编程的有定时器，AJAX，以及ES6中引入的promise。

5.3 AJAX(并非是ES6中提出的概念，2005年提出的)

5.3.1 ajax的简介

ajax是asynchronous javascript and xml(异步的js和xml)的简写。

是一种用来改善用户体验的技术

其实质是使用XMLHttpRequest对象异步的向服务器发送请求

服务器返回部分数据(减少网络传输)，而不是一个完整的页面。

以页面无刷新的效果，更改页面的局部内容。

原理：

1. 当用户进行部分数据验证时，会调用ajax对象。
2. 通过ajax对象向服务器发送请求，同时绑定一个事件处理函数，
3. 当服务器处理完数据后，会返回部分数据，事件处理函数会接收到这一部分数据
4. 从而通过js来完成局部刷新。

总结：ajax，就是异步向服务器发送请求，以达到页面的局部刷新，而不是整个页面刷新的技术。大大改善了用户的体验度。

5.3.2 ajax对象

function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){ //兼容 IE7+, Firefox, Chrome, Opera, Safari
      xhr = new XMLHttpRequest();
   }else{  // 兼容 IE6, IE5 
      xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
}

5.3.3 常用属性和方法

open(method,url)

ajax创建请求，method是请求方式get/post ,url是地址

send()

ajax发送请求 get请求时，参数和参数值写到url上，传入null。

post请求，参数和参数值写到send()括号里。

onreadystatechange

发生任何状态变化时的事件控制对象。

1）绑定一个事件处理函数，该函数用来处理readystatechange事件

2）当ajax对象的readyState的值发生了改变，比如从0变成了1，就会产生readystatechange事件

readyState

表示ajax对象与服务器通信的状态

        0: 尚未初始化

        1:正在发送请求

        2：请求完成

        3：请求完成，ajax正在接受数据

        4：ajax接收数据成功

responseText

接收服务器返回的文本

responseHTML

接收服务区返回的HTML

status

服务器返回的HTTP响应的状态码

        200：表示请求成功

        202：请求被接收，但是处理未完成

        400：错误的请求

        404：资源未找到

        500：服务器代码有问题

5.3.4 ajax编写步骤

1）获取ajax对象：也就是获取XMLHttpRequest对象实例

function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
   }else{
      xhr = new ActiveXObject("Microsoft.XMLHttp");
   }
   return xhr;
}

2）绑定事件回调函数: 为ajax对象的onreadystatechange事件设置响应函数

function fn(){
   if(xhr.readyState==4 && xhr.status==200){
      var txt = xhr.responseText;
      //DOM操作
   }
}

3）创建请求：调用XMLHttpRequest对象的open方法

// get请求
xhr.open('get','xxx.do',true);

注意：true表示发送异步请求！   ajax发送异步请求时，用户仍然可以对当前页面做其他的操作


// post请求
xhr.open('post','xxx.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

注意：HTTP协议要求发送post请求时，必须有content-type消息头，但是默认情况下ajax对象不会添加消息头，所以要调用setRequestHeader方法，添加这个消息头。

4）发送请求：调用Ajax对象的send方法

get请求：
- send方法内传递null：
  
  xhr.send(null)
- 若要提交数据，则在open方法的“URL”后面追加
  
  比如xhr.open(‘get’，‘xxx.do?name=value&&name=value’，true)
post请求：
- xhr.send(name=value&&name=value);

5.3.5 案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <form action=""  >
                <fieldset class="wrap">
                    <legend>注册页面</legend>
                    用户名：<br>
                    <input type="text" name="username" id="username" placeholder="请输入用户名" > 
                    <span id="username_msg"></span>
                    <br>
                    密码：<br>
                    <input type="password" name="password" id="password" placeholder="请输入密码"> <br>
                    确认密码：<br>
                    <input type="password" name="repassword" id="repassword" placeholder="请再次输入密码"> <br>
                    性别：
                    <input type="radio" name="gender" id="" value="f"> 女
                    <input type="radio" name="gender" id="" value="m"> 男 <br>
                    <input type="button" value="注册-ajax的get请求" onclick="ajaxGet()">
                    <input type="button" value="注册-ajax的post请求" onclick="ajaxPost()">
                    <span id="register_msg"></span>
                </fieldset>

        </form>
    </div>
</body>
<script>
    function ajaxPost(){
        let username = $("username").value
        let password = $("password").value
        let genders = document.getElementsByName("gender");
        let gender="";
        for(g of genders){
            if(g.checked){
                gender = g.value
                break;
            }
        }
        // 第一步 获取xhr对象
        let xhr = getXhr();
        // 第二步，调用open方法，来设置请求方式，请求路径，第三个参数表示是否异步，true表示异步，false默认同步
        //        如果是post请求，那么请求参数要写在send方法中，而不是拼接到URL上
        xhr.open("post","http://localhost:8088/jsp_day03/ajaxPost.do");
        // 如果是post请求，必须设置消息头 content-type
        xhr.setRequestHeader("content-type","application/x-www/form-urlencoded");

        // 第三步：绑定回调函数
        xhr.onreadystatechange=function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 如果服务器发送过来的是普通文本，那么数据就会自动绑定到xhr的responseText属性上
                // 如果服务器发送过来的是HTML的各种标签，那么数据就会自动绑定到xhr的responseHTML属性上
                $("register_msg").innerText = xhr.responseText;
            }
        }
        // 第四步：发送，带上请求参数
        xhr.send("username="+username+"&password="+password+"&gender="+gender);
    }



    // ajax技术: 异步的向服务器发送请求，将服务器返回的数据在页面上进行局部刷新，来提高用户的体验感。
    // 1. 演示ajax的get请求方法 
    function ajaxGet(){
        // 第一步： 获取ajax对象
        let xhr = getXhr();
        // 获取每个文本框里的值
        let username = $("username").value
        let password = $("password").value
        let genders = document.getElementsByName("gender");
        let gender=null;
        for(g of genders){
            if(g.checked){
                gender = g.value
                break;
            }
        }
        // 第二步，调用open方法，设置请求方式，请求路径
        //        如果是get请求，请求参数要拼接到请求路径上
        let str = `username=${username}&password=${password}&gender=${gender}`;
        xhr.open("get","http://localhost:8088/jsp_day03/ajaxGet.do?"+str);
        //第三步：绑定回调函数,用于监听通信状态的改变
        xhr.onreadystatechange = function(){
            // 4表示成功接收服务器发送过来的数据
            // HTTP状态码200
            if(xhr.readyState === 4 && xhr.status === 200){
                // 从ajax对象上获取响应文本，或者是响应HTML。
                let txt = xhr.responseText;
                $("register_msg").innerText=txt;
            }else{
                // 当请求成功并且浏览器接受到服务端返回的数据时，我们只关心处理成功数据
                // 不再考虑其他情况，如果想要考虑其他各种错误状态，
                // 那么应该单独分析readyState或者是status的值，而不是直接一个else来处理其他的所有情况
                // 应该书写 else if(xhr.readyState == 3 .....)类似的这种情况
            }
        }
        // 第四步：发送
        xhr.send(null);
    }
    //封装一个函数，用户获取ajax对象：XMLHttpRequest
    function getXhr(){
        // 第一步： 获取ajax对象
        let xhr = null;
        if(window.XMLHttpRequest){//如果从window身上可以获取对象(即返回true)，表示浏览器支持XMLHttpRequest
            
            //获取xhr , 兼容浏览器 IE7+,chrome，Firefox，Opera，Safari
            xhr = new XMLHttpRequest();
        }else{//如果身上没有该属性，说明浏览器版本非常低，比如IE5,IE6
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
    }


    function $(id){
        return document.getElementById(id);
    }
</script>
</html>

服务端

package com.Ajax;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.vo.Stock;

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;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
/*
服务端的代码： 注册页面在验证用户名是否已经被占用。
            如果占用，进行提示，用户名已经被占用，请重新输入
            如果没有被占用，提示，用户名可以使用
 */

@WebServlet(urlPatterns={"*.do"})
public class Myservlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter wr = resp.getWriter();
        // 解决跨域问题： 添加消息头
        resp.setHeader("Access-Control-Allow-Origin", "*");
        // 获取请求资源路径
        String uri = req.getRequestURI();
        System.out.println("uri"+uri);
        if (uri.contains("checkUsername.do")){
            String username = req.getParameter("username");
            System.out.println("注册页面传过来的用户名："+username);
            if("zhangsan".equals(username)){
                wr.println("用户名已经被占用，请重新输入");
            }else {
                wr.println("用户名可以使用");
            }
        } else if (uri.contains("ajaxGet.do")) {
            //从ajax提交的路径上获取三个参数
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            String gender = req.getParameter("gender");
            System.out.println("注册页面传过来的用户名："+username+"\n密码："+password+"\n性别："+gender);
            //调用DAO 将三个参数保存到数据库中
            int num =(int) (Math.random()*10);
            if (num<7){
                wr.println("success");
            }else{
                wr.println("fail");
            }
        }else if (uri.contains("ajaxPost.do")){
            //从ajax提交的路径上获取三个参数
            String username = req.getParameter("username");
            String password = req.getParameter("password");
            String gender = req.getParameter("gender");
            System.out.println("注册页面传过来的用户名："+username+"\n密码："+password+"\n性别："+gender);
            //调用DAO 将三个参数保存到数据库中
            int num =(int) (Math.random()*10);
            if (num<7){
                wr.println("注册成功");
            }else{
                wr.println("注册失败");
            }
        } 
    }
}

5.4 JQuery对Ajax的支持

5.4.1 JQuery简介

原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率,

它提供的 API 易于使⽤且兼容众多浏览器，这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

它也是一个过时的库

所有的库都是为了解决我们开发时的痛点而存在的操作。jQuery解决的问题主要有两个:简化DOM操作，解决浏览器兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡。DOM操作和浏览器兼容性早已不是什么大问题了，再加上React、Vue、Angular这些大型框架的出现，在实际项目中使用jQuery的机会可以说是少之又少。

因此，在这里我们仅介绍一下，JQuery库里对Ajax支持的部分。

5.4.2 引入库

第一种方式：引用本地(服务器)的JS文件

第二种方式：使用CDN(内容分发网络，即公共服务器)

字节跳动CDN

<head>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
</head>

百度CDN

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

新浪CDN

<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

Google CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

使用CDN的优势：

1.调用的库在公共服务器上，减少自身服务器的压力。因为我们服务不需要通过我们自身服务器去加载文件。
2.使用人数多，可能很多的网站都在使用这个东西，可以使用到浏览器的缓存，比如a网站使用这个库，b网站也使用，那么用户访问a网站的时候，他会去加装文件，当他去访问b网站的时候，就不用去加装这个文件了。那也可以进一步提快我们的加装速度。

不推荐国外的CDN，因为网络不稳定。

测试是否引用成功：

<script>
   alert($)
   //console.log($)      $是Jquery对象，如果打印出来内容，就说明引用成功
</script>

5.4.3 常用函数

1）load()

作用：向服务器发送请求，并将服务器返回的数据添加被选中的元素中。
语法：$(selecter).load(URL,Data [,callback] )
URL: 向服务器发送的请求路径
              Data: 请求参数
                    可以是字符串形式：“username=zhangsan&age=22”
                      可以是对象形式：{"username":"zhangsan","age":23}
                      有请求参数时，发送post，否则发送get

2）get()/post()

作用：get()和 post()方法分别用于通过HTTP GET 和POST 请求向服务器发送请求。
语法：
        $.post(URL，data，callback，dataType)
        URL：发送请求的 URL字符串。
        data：可选的，发送给服务器的字符串或 key/value 键值对。
        callback：可选的，请求成功后执行的回调函数。
        dataType：可选的，从服务器返回的数据类型。默认：智能推断（可以是html,text,xml, json, script）。

注意：get()可能返回浏览器缓存数据，post()不会返回缓存数据

3）ajax()

ajax()
   用法：$obj.ajax({});
       url：请求地址
       data:请求参数
       type:请求方式
       dataType:返回的数据类型
       success:正常时的回调函数
       error:错误时的回到函数
       async:true默认值，当值为false时，发送同步请求

jquery的load方法代码演示：

<%--
  Created by IntelliJ IDEA.
  User: 86159
  Date: 2024/9/19
  Time: 14:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery</title>
    <%--
        jQuery： 是一个js框架，里面封装了大量的函数方法，可以更加方便快捷的操作DOM对象、
        事件处理、Ajax等各种操作。

        现在：jquery用的比较少，因为功能更加强大的JS框架非常多，比如Vue、React、Argular、bootstrap等。

        引入的方式：
            第一种：可以引用本地下载好的js文件。
            第二种： 使用CDN
    --%>
<%--    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>--%>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script>
<%--        测试引入是否成功： 打印$即可，$是jquery的对象  --%>
//         alert($);
//         window.onload=function (){
//             alert("点击了a标签");
//         }
            $(function (){   // $(function){.....}是jQuery的写法，相对于window.onload，即加载完毕后，就立即执行
                $("a").toggle(function (){
                    $(this).next().show();
                    //jquery对象调用get方法转成dom对象
                    //alert($(this)[0].nodeName);
                    // 获取a连接的内容
                    // alert($(this).text());
                    // 修改a标签的内容
                    // $(this).text("3000");
                    //获取下一个标签对象并传值
                    // 获取用户名称  eq(index)获取数组中的指定索引index的jquery对象
                    let username = $(this).parent().parent().children().eq(1).text();
                    // alert(username);
                    //load 方法： 谁调用了load方法，服务器的数据就返回给谁
                    $(this).next().load("getSalary.do","username="+username);
                },function (){
                    $(this).next().hide();
                })
            })
    </script>
</head>
<body>
    <table border="1px solid red" width="60%" align="center" cellpadding="0" cellspacing="0">
        <tr><td>用户ID</td><td>用户名称</td><td>用户工资</td></tr>
        <tr><td>1001</td><td>zhangsan</td><td><a href="#" >获取工资</a><span></span></td></tr>
        <tr><td>1002</td><td>lisi</td><td><a href="#">获取工资</a><span></span></td></tr>

    </table>

</body>
</html>

get/post()代码演示：

知识百科：

tomcat的热部署： jsp页面的代码一旦被改变，tomcat可以监听到，然后就会主动进行重新部署
tomcat的热部署设置：将update action 和 frame deactivation 改为update classes and resources

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jQuery对Ajax的支持：get/post/ajax</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <style>
        #d1{
            width: 450px;
            height: 280px;
            background-color: black;
            margin-top: 50px;
        }
        #d2{
            color: white;
            background-color: purple;
            height: 35px;
            text-align: center;
        }
        #d3 > table{
            color: white;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2">股票实时行情</div>
        <div id="d3">
            <table width="100%" style="border-collapse: collapse">
                <tr><th>代码</th><th>名称</th><th>价格</th></tr>
                <tbody id="tb1"></tbody>
            </table>
        </div>
    </div>
</body>

</html>

<script>
    $(function (){
        setInterval(function (){
            f1();
        },3000);

        // 页面一旦加载完毕，就立即执行此处的代码
        /*
            get/post(): 参数都是一样的
            里面四个参数：
                第一个： url, 向服务端发送的请求路径
                第二个： data, 向服务端发送的参数,通常都是键值对形式,或者json字符串。
                第三个： callback, 请求成功时，服务端并返回数据后的回调函数
                第四个： dataType, 服务端发送的数据类型: json.html,text,script,xml

            get()方法会将数据缓存到浏览器端(第二次可能直接过去的是缓存数据，不一定是服务端发送过来的)，
            post()没有缓存(每次获取的都是服务端发送过来的数据)。
        */
        function f1(){
            $.get("http://localhost:8088/jsp_day03/getStock.do",
                "username=zhangsan",
                function(data){  //回调函数的形参，就是用来接收服务端发送过来的数据
                    // let full = null;
                    $("#tb1").empty();
                    for (let i=0;i<data.length;i++){
                        // console.log("ada")
                        <%--let tr=`<tr><td>${data[i].code}</td><td>${data[i].name}</td><td>${data[i].price}</td></tr>`;--%>
                        // $("tb1").text("<tr><td>"+data[i].code+"</td><td>"+data[i].name+"</td><td>"+data[i].price+"</td></tr>");
                        // alert(data[i]);
                        $("#tb1").append("<tr><td>"+data[i].code+"</td><td>"+data[i].name+"</td><td>"+data[i].price+"</td></tr>");
                    }
                },
                "json"
            )
            /*
            $.post("http://localhost:8088/jsp_day03/getStock.do",
                "username=zhangsan",
                function(data){  //回调函数的形参，就是用来接收服务端发送过来的数据
                    // let full = null;
                    $("#tb1").empty();
                    for (let i=0;i<data.length;i++){
                        // console.log("ada")
                        <%--let tr=`<tr><td>${data[i].code}</td><td>${data[i].name}</td><td>${data[i].price}</td></tr>`;--%>
                        // $("tb1").text("<tr><td>"+data[i].code+"</td><td>"+data[i].name+"</td><td>"+data[i].price+"</td></tr>");
                        // alert(data[i]);
                        $("#tb1").append("<tr><td>"+data[i].code+"</td><td>"+data[i].name+"</td><td>"+data[i].price+"</td></tr>");
                    }
                },
                "json"
            )
            */
            
        }
    })
</script>

ajax()方法代码演示

<script>
    $(function (){
        setInterval(function (){
            f1();
        },3000);

        // 页面一旦加载完毕，就立即执行此处的代码
        
        function f1(){
            $.ajax({
                url:"getStock.do",
                data:"username=zhangsan",
                type:"post",
                dataType:"json",
                success:function (data){
                    $("#tb1").empty();
                    // for (let i=0;i<data.length;i++){
                    //     $("#tb1").append("<tr><td>"+data[i].code+"</td><td>"+data[i].name+"</td><td>"+data[i].price+"</td></tr>");
                    // }
                    let full = null;
                    for (d of data){
                        let a = "<tr><td>"+d.code+"</td><td>"+d.name+"</td><td>"+d.price+"</td></tr>"
                        full+=a;
                    }
                    // text() : 用于获取或者set元素里的文本内容text
                    // html() : 用于获取或者set元素里的html内容
                    $("#tb1").html(full);
                    // $("#tb1").append(full);
                },
                error:function (){
                    //比如404异常，500 都会执行到此处。
                    alert("请求失败");
                },
                async:true
            })
        }
    })
</script>

查看全文

http://www.kler.cn/a/324127.html