• javaweb01

    Ajax 

     ajax：异步刷新（局部刷新），前端技术。给后台发请求。
     异步：整个页面不会全部刷新，只有某个局部在刷新。
     实例 ： 验证用户名是否存在。
    使用ajax发送请求,不能通过后台跳转页面,
    只能通过js跳转,如果需要

    ajax和form表单不能同时使用()
    ajax: 不跳页面
    form :一定会跳转

    只有post请求有请求体
    ajax发起请求,后台给出的响应会回到ajax的响应处理函数中

       readyState：
        0：      xhr被创建成功，open方法未调用
        1：      open被调用，建立的连接
        2：      send被调用，可以获取状态行和响应头
        3：      可以拿到响应体，响应体加载中
        4：      响应体下载完成，可以直接使用responseText。
                 代表请求可以正常发送，响应能够正常接收。

    axios : 对原生ajax的一个封装,应用了大量的ES6语法,promise语法

    1,get请求  后台没有对应的对象来封装 (参数之间没有什么关系), 不能有私密数据
    2, post请求, 后台都是有对象跟着,参数可以封装成一个对象,比如  user的id,name,属性

    * axios发送get请求，
    *   请求中如果有参数，还是一个默认的以文档里的形式发送，和之前的任何一种请求方式没有任         何区别。
    * axios发送post请求，
    *   请求中如果有参数，会把post请求的请求体转成json串，然后再发给后台。

       4种发请求的方式： 

        1、地址栏
        2、a标签
        3、form表单
        4、location.href或window.open()

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.     账号:　<input type="text" id="username"> <span id="msg">span> <br>
    9.         <input type="button" onclick="valid()" value="验证">
    10.  
    11. <script>
    12.     //ajax 异步刷新
    13.     function valid(){
    14.         let username = document.querySelector("#username").value;
    15.         let msg = document.querySelector("#msg");
    16.         //js 原生的ajax,XMLHttpRequest是ajax的支持对象
    17.         let xhr = new XMLHttpRequest();
    18.         //设置请求的方式和地址
    19.         // 发送 GET 请求
    20.         xhr.open("GET","valid2.do?username="+username);
    21.         // 发送 post请求,需要设置请求头信息
    22.         xhr.open("POST","valid2.do");
    23.         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    24.          //发请求,并且设置请求体
    25.         xhr.send("username="+username+"&password=123456");
    26.         xhr.onreadystatechange = function (){
    27.             if(this.readyState===4){
    28.                 switch (this.responseText){
    29.                     case "1":
    30.                         msg.innerHTML="用户名可用";
    31.                         break;
    32.                     case 0:
    33.                         msg.innerHTML="用户名已存在";
    34.                 }
    35.  
    36.             }
    37.         }
    38.     }
    39. script>
    40. body>
    41. html>

    jquery 的ajax

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. 账号：<input type="text" id="username"><span id="msg">span>
    10. <button id="validBtn">验证button>
    11.  
    12. <script src="static/js/jquery-3.0.0.min.js">script>
    13. <script>
    14.     $(function() {
    15.         $("#validBtn").click(function() {
    16.             let username = $("#username").val();
    17.             let password = "123456";
    18.  
    19.             // formData构建一个表单数据对象
    20.             // formData是JS的内置对象，和JQuery无关，和Vue无关
    21.             let formData = new FormData();
    22.             formData.append("username",username);
    23.             formData.append("password",password);
    24.  
    25.             // 发送ajax请求
    26.             // 3.完整写法
    27.             $.ajax({
    28.                 url: "valid.do",
    29.                 type: "post",
    30.                 data: formData,
    31.                 success : function(res) {
    32.                     console.log(res);
    33.                 },
    34.                 error : function(res) {
    35.                     console.log(res);
    36.                 }
    37.             });
    38.  
    39.  
    40.             // 2.发送post请求
    41.             // $.post("valid.do","username=" + username,function (data) {
    42.             //     if(data == "1") {
    43.             //         $("#msg").html("用户名可用...")
    44.             //     }
    45.             //     if(data == "0") {
    46.             //         $("#msg").html("用户名已存在...")
    47.             //     }
    48.             // });
    49.  
    50.             // 1.发送get请求
    51.             // $.get("valid.do?username=" + username,function(data) {
    52.             //     // data就是后台回来的响应体
    53.             //     console.log(data);
    54.             //     if(data == "1") {
    55.             //         $("#msg").html("用户名可用...")
    56.             //     }
    57.             //     if(data == "0") {
    58.             //         $("#msg").html("用户名已存在...")
    59.             //     }
    60.             // });
    61.         });
    62.     })
    63. script>
    64.  
    65. body>
    66. html>

    转发和重定向的区别?

    1、请求次数

    重定向是浏览器向服务器发送一个请求并收到响应后再次向一个新地址发出请求，转发是服务器收到请求后为了完成响应跳转到一个新的地址；重定向至少请求两次，转发请求一次；

    2,重定向两次请求不共享数据,转发一次请求共享数据

    3,重定向可以跳转到任意url,转发只能跳转本站点资源

    4,重定向是客户端行为,转发是服务器端行为

  • 相关阅读:
    计算机毕业设计 SSM老年公寓管理系统 养老院公寓管理系统 公寓住宿信息管理系统Java Vue MySQL数据库 远程调试 代码讲解
    SpringMVC面试题
    面试整理一
    把请求头信息添加到请求报文中，然后发送请求到淘宝，显示回复信息
    Java和前端都不好找工作，计算机毕业可以干嘛？
    Linux：多行shell命令转成单行命令形式的方法
    idea+tomcat+mysql 从零开始部署Javaweb项目（保姆级别）
    干洗店软件，洗鞋店收银管理系统小程序app
    最佳 DeFi 代币模型：治理代币 or 生产性代币 or veToken？
    Oracle 21 C 安装详细操作手册，并配置客户端连接
  • 原文地址：https://blog.csdn.net/qq_56951318/article/details/126685321