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

五异步编程

5.1 回调函数

5.1.1 概念

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

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

基本概念：

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

5.1.2 应用场景

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

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

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

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

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

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

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

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

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

javascript 复制代码

例子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秒左右

案例总结：

当校验用户名是否已经被占用时，我们会向服务端发送一个请求操作。服务器在收到请求后，一定会出现下面三种状态中某一种。

验证成功：success

验证失败：fail

验证中： pending 还没有得到具体的结果(成功，失败)

假设页面是同步行为，那么验证失败或者成功的这个时间段非常短，在一秒以内，那么对于用户的体验感是没有多大影响的，

如果因为网络波动或者其他原因，服务器要经过5秒甚至30秒以上的时间才给浏览器反馈，那么用户也得等待5秒甚至30秒以上的时间后，才能填写后续的文本框内容。这样的用户体验特别不好！

什么叫好的用户体验？

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

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

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

代码如下：

RequestDispatcher rd = request.getRequestDispatcher("login.jsp")

rd.forward(request,response)

页面代码：

html 复制代码

<!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>

服务端代码

java 复制代码

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 异步编程简介

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

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

javascript 复制代码

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对象异步的向服务器发送请求

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

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

原理：

当用户进行部分数据验证时，会调用ajax对象。

通过ajax对象向服务器发送请求，同时绑定一个事件处理函数，

当服务器处理完数据后，会返回部分数据，事件处理函数会接收到这一部分数据

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

5.3.2 ajax对象

javascript 复制代码

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对象实例

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

// 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 案例演示

html 复制代码

<!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>

服务端

java 复制代码

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

html 复制代码

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

百度CDN

html 复制代码

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

新浪CDN

html 复制代码

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

Google CDN

html 复制代码

<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，因为网络不稳定。

测试是否引用成功：

javascript 复制代码

<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方法代码演示：

html 复制代码

<%--
  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

html 复制代码

<%@ 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>

javascript 复制代码

<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()方法代码演示

javascript 复制代码

<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>

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

五 异步编程

5.1 回调函数

5.1.1 概念

5.1.2 应用场景

5.2 同步和异步

5.2.1 同步编程简介

5.2.2 JavaScript的同步演示

5.2.3 异步编程简介

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

5.3.1 ajax的简介

5.3.2 ajax对象

5.3.3 常用属性和方法

5.3.4 ajax编写步骤

5.3.5 案例演示

5.4 JQuery对Ajax的支持

5.4.1 JQuery简介

5.4.2 引入库

5.4.3 常用函数

五异步编程