Ajax基础

news2024/11/27 10:45:36

Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写

Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据 

XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式，而现在比较常用的是JSON 

Ajax 其实就是浏览器与服务器之间的一种异步通信方式 

使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新 

  • 慕课网注册检测
  • 慕课网搜索提示 

搭建Ajax开发环境

Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax，个人使用phpstudy

Ajax的基本用法

Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数 

不论是 XMLHttpRequest，还是 Ajax，都没有和具体的某种数据格式绑定 

Ajax的使用步骤

  • 1创建xhr对象
  • 2监听事件，处理响应
  • 3准备发送请求
  • 4发送请求
// 2.Ajax 的使用步骤
    // 2.1.创建 xhr 对象
    const xhr = new XMLHttpRequest();

    // 2.2.监听事件，处理响应
    // 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理

    // xhr.addEventListener('readystatechange', () => {}, false);

    xhr.onreadystatechange = () => {
       if (xhr.readyState !== 4) return;

    //   // HTTP CODE
    //   // 获取到响应后，响应的内容会自动填充 xhr 对象的属性
    //   // xhr.status：HTTP  200 404
    //   // xhr.statusText：HTTP 状态说明 OK Not Found
       if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
         // console.log('正常使用响应数据');
         console.log(xhr.responseText);
       }
    };

    // readystatechange 事件也可以配合 addEventListener 使用，不过要注意，IE6~8 不支持 addEventListener
    // 为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr
    // 由于兼容性的原因，最好放在 open 之前

    // 2.3.准备发送请求
    // xhr.open(
    //   'HTTP 方法 GET、POST、PUT、DELETE',
    //   '地址 URL https://www.imooc.com/api/http/search/suggest?words=js ./index.html ./index.xml ./index.txt',
    //   true
    // );

    // 调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作

    // 2.4.发送请求
    // 调用 send() 正式发送请求

    // send() 的参数是通过请求体携带的数据 如果是get请求 参数为null（为了兼容性）也可以不写（不建议）
    // xhr.send(null);

readystatechange 事件监听 readyState 这个状态的变化,它的值从 0 ~ 4，一共 5 个状态

  • 0：未初始化。尚未调用 open()
  • 1：启动。已经调用 open()，但尚未调用 send()
  • 2：发送。已经调用 send()，但尚未接收到响应
  • 3：接收。已经接收到部分响应数据 
  • 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了
// 3.使用 Ajax 完成前后端通信
    const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.responseText);
            console.log(typeof xhr.responseText);
        }
    };
    xhr.open('GET', url, true);
    xhr.send(null);

GET请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <!--<form action="https://www.imooc.com/api/http/search/suggest?words=js" method="get">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <input type="submit" value="提交" />
 </form>-->
<script>
  // 1.携带数据
  // GET 请求不能通过请求体携带数据，但可以通过请求头携带
  // const url =
  //   'https://www.imooc.com/api/http/search/suggest?words=js&username=alex&age=18';
  // const xhr = new XMLHttpRequest();

  // xhr.onreadystatechange = () => {
  //   if (xhr.readyState != 4) return;

  //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  //     console.log(xhr.responseText);
  //   }
  // };

  // xhr.open('GET', url, true);

  // xhr.send(null);

  // 不会报错，但不会发送数据
  // xhr.send('sex=male');

  // 2.数据编码
  // 如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后再发送给后端，不然会造成乱码问题
  // 可以使用 encodeURIComponent() 编码
  const url = `https://www.imooc.com/api/http/search/suggest?words=${encodeURIComponent(
          '前端'
  )}`;
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () => {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.responseText);
    }
  };

  xhr.open('GET', url, true);

  xhr.send(null);
</script>
</body>
</html>

注意事项：ajax的get请求与form表单get请求相似，只不过form表单get请求action属性后面不能加参数加了也没用（看下面截图就明白了相当于没加） 

POST请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>POST 请求</title>
</head>
<body>
<!--<form
        action="https://www.imooc.com/api/http/search/suggest?words=js"
        method="post"
>
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>-->

<script>
  // 1.携带数据
  // POST 请求主要通过请求体携带数据，同时也可以通过请求头携带
  const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.responseText);
    }
  };

  xhr.open('POST', url, true);

  // 如果想发送数据，直接写在 send() 的参数位置，一般是字符串
  xhr.send('username=alex&age=18');

  // 不能直接传递对象，需要先将对象转换成字符串的形式
  // xhr.send({
  //   username: 'alex',
  //   age: 18
  // });
  // [object Object]

  // 2.数据编码
  // xhr.send(`username=${encodeURIComponent('张三')}&age=18`);
</script>
</body>
</html>

注意事项：ajax的post请求与form表单post请求相似，form表单post请求action属性后面可以加参数（看下面截图就明白了）

JSON(JAVASCRIPT OBJECT NOTATION)

JSON(js对象表示法)是Ajax发送和接收数据的一种格式

JSON有3种形式，每种形式的写法都和JS中的数据类型很像，可以很轻松的和JS中的数据类型互相转换  JS->JSON->Java/PHP 

  • 简单值形式 对应着JS中的基本数据类型（数字、字符串、布尔值、null）
  • JSON中没有undefined值 JSON中字符串必须使用双引号 JSON中不能注释
  • 对象形式 JSON 的对象形式就对应着 JS 中的对象
  • JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号 JSON 中只要涉及到字符串，就必须使用双引号 不支持 undefined
  • 数组形式 JSON 的数组形式就对应着 JS 中的数组
  • 数组中的字符串必须用双引号 JSON 中只要涉及到字符串，就必须使用双引号 不支持 undefined
const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.responseText);
      console.log(typeof xhr.responseText);
    }
  };

  // xhr.open('GET', './plain.json', true);
  // xhr.open('GET', './obj.json', true);
  xhr.open('GET', './arr.json', true);

  xhr.send(null);

JSON.parse()：将json格式的字符串转化为js中对应的数据类型

JSON.stringify()：将js中对应的数据类型转化为json格式的字符串

使用JSON.parse()和JSON.stringify()封装localStorage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>JSON 的常用方法</title>
</head>
<body>
<script type="module">
  // 1.JSON.parse()
  // JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值
  // 一定要是合法的 JSON 字符串，否则会报错
  // const xhr = new XMLHttpRequest();

  // xhr.onreadystatechange = () => {
  //   if (xhr.readyState != 4) return;
  //
  //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  //     console.log(xhr.responseText);
  //     console.log(typeof xhr.responseText);
  //
  //     console.log(JSON.parse(xhr.responseText));
  //     console.log(JSON.parse(xhr.responseText).data);
  //   }
  // };

  // // xhr.open('GET', './plain.json', true);
  // // xhr.open('GET', './obj.json', true);
  // xhr.open('GET', './arr.json', true);

  // xhr.open(
  //   'GET',
  //   'https://www.imooc.com/api/http/search/suggest?words=js',
  //   true
  // );

  // xhr.send(null);

  // 2.JSON.stringify()
  // JSON.stringify() 可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串
  // console.log(
  //   JSON.stringify({
  //     username: 'alex',
  //     age: 18
  //   })
  // );

  // const xhr = new XMLHttpRequest();
  //
  // xhr.open(
  //   'POST',
  //   'https://www.imooc.com/api/http/search/suggest?words=js',
  //   true
  // );
  // xhr.send(
  //   JSON.stringify({
  //     username: 'alex',
  //     age: 18
  //   })
  // );

  // 3.使用 JSON.parse() 和 JSON.stringify() 封装 localStorage
  import { get, set, remove, clear } from './storage.js';

  set('username', 'alex');
  console.log(get('username'));

  set('zs', {
    name: '张三',
    age: 18
  });
  console.log(get('zs'));

  remove('username');
  clear();
</script>
</body>
</html>

const storage = window.localStorage;

// 设置
const set = (key, value) => {
  // {
  //   username: 'alex'
  // }
  storage.setItem(key, JSON.stringify(value));
};

// 获取
const get = key => {
  // 'alex'
  // {
  //   "username": "alex"
  // }
  return JSON.parse(storage.getItem(key));
};

// 删除
const remove = key => {
  storage.removeItem(key);
};

// 清空
const clear = () => {
  storage.clear();
};

export { set, get, remove, clear };

 

跨域

不同域：只要协议/域名/端口号任何一个不一样，就是不同域

阻止跨域请求，其实是浏览器本身的一种安全策略--同源策略

其他客户端或服务器都不存在跨域被阻止的问题

跨域解决方案(了解即可)

  • CORS跨域资源共享（优先使用）
  • JSONP
const url='https://www.imooc.com/api/http/search/suggest?words=js'
    const xhr=new XMLHttpRequest();
    xhr.onreadystatechange=()=>{
      if (xhr.readyState!==4) return;
      if ((xhr.status>=200&&xhr.status<300)||xhr.status===304){
        console.log(xhr.responseText);
      }
    }
    xhr.open('GET',url,true);
    xhr.send(null);

    // Access-Control-Allow-Origin: *
    // 表明允许所有的域名来跨域请求它，* 是通配符，没有任何限制

    // 只允许指定域名的跨域请求
    // Access-Control-Allow-Origin: http://127.0.0.1:5500

    // 2.使用 CORS 跨域的过程
    // ① 浏览器发送请求
    // ② 后端在响应头中添加 Access-Control-Allow-Origin 头信息
    // ③ 浏览器接收到响应
    // ④ 如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
    // ⑤ 如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
    // ⑥ 如果允许跨域，通信圆满完成
    // ⑦ 如果没找到或不包含想要跨域的域名，就丢弃响应结果

    // 3.CORS 的兼容性
    // IE10 及以上版本的浏览器可以正常使用 CORS

    // https://caniuse.com/

    // JSONP
<script>
// 1.JSONP 的原理
      // script 标签跨域不会被浏览器阻止
      // JSONP 主要就是利用 script 标签，加载跨域文件

      // 2.使用 JSONP 实现跨域
      // 服务器端准备好 JSONP 接口
      // https://www.imooc.com/api/http/jsonp?callback=handleResponse

      // 手动加载 JSONP 接口或动态加载 JSONP 接口
      const script = document.createElement('script');
      script.src =
        'https://www.imooc.com/api/http/jsonp?callback=handleResponse';
      document.body.appendChild(script);

      // 声明函数
      const handleResponse = data => {
        console.log(data);
      };


      // 优先使用 CORS，如果浏览器不支持 CORS 的话，再使用 JSONP
    </script>
    <!-- <script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script> -->
    <!-- 相当于 -->
    <!-- <script>
      handleResponse({
        code: 200,
        data: [
          {
            word: 'jsp'
          },
          {
            word: 'js'
          },
          {
            word: 'json'
          },
          {
            word: 'js 入门'
          },
          {
            word: 'jstl'
          }
        ]
      });
</script>

XHR的属性

  • responseType和response属性
  • timeout属性(设置请求的超时时间ms)
  • withCredentials属性

xhr.responseType='json' 浏览器会帮我们自动调用JSON.parse(xhr.response)给它转换成这种类型，也就是说服务器返回给我们的是JSON格式的字符串，不可能直接把js对象返回过来

// 1.responseType 和 response 属性 IE6~9 不支持，IE10 开始支持
    const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
      if (xhr.readyState != 4) return;

      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
    //     // 文本形式的响应内容
    //     // responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
    //     console.log('responseText:', xhr.responseText);

    //     // 可以用来替代 responseText
        console.log('response:', xhr.response);
    //     console.log(JSON.parse(xhr.responseText));
      }
    };
    xhr.open('GET', url, true);

    // // xhr.responseType = '';
    // // xhr.responseType = 'text';
    xhr.responseType = 'json';

    xhr.send(null);

xhr.timeout=10  出错变红了，请求被取消了，因为规定的时间内超时，没有完成

// 2.timeout 属性
    // 设置请求的超时时间（单位 ms）
    const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
    const xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
      if (xhr.readyState != 4) return;

      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.response);
      }
    };

    xhr.open('GET', url, true);

    xhr.timeout=10;
    // xhr.timeout = 10000;

    xhr.send(null);

    // IE6~7 不支持，IE8 开始支持

使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会携带Cookie，要携带的话得设置xhr.withCredentials = true; 但是最终能否成功跨域携带 Cookie，还要看服务器同不同意

XHR的方法

  • abort() 终止当前请求
  • setRequestHeader()

当同时书写xhr.open('POST',url,true)post请求和xhr.send('username=alex&age=18')携带参数，才有必要加上xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

请求头中的Content-Type字段用来告诉服务器，浏览器发送的数据是什么格式的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>XHR 的方法</title>
</head>
<body>
 <!--<form
  action="https://www.imooc.com/api/http/search/suggest?words=js"
  method="post"
>
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>-->

<script>
  // 1.abort()
  // 终止当前请求
  // 一般配合 abort 事件一起使用
  // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  //
  // const xhr = new XMLHttpRequest();
  //
  // xhr.onreadystatechange = () => {
  //   if (xhr.readyState != 4) return;
  //
  //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  //     console.log(xhr.response);
  //   }
  // };
  //
  // xhr.open('GET', url, true);
  //
  // xhr.send(null);
  //
  // xhr.abort();

  // 2.setRequestHeader()
  // 可以设置请求头信息
  // xhr.setRequestHeader(头部字段的名称, 头部字段的值);
  // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  const url = 'https://www.imooc.com/api/http/json/search/suggest?words=js';

  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.response);
    }
  };
  xhr.open('POST', url, true);
  //
  // // 请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
  // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.setRequestHeader('Content-Type', 'application/json');
  // // xhr.send(null);
  // xhr.send('username=alex&age=18');
  xhr.send(
          JSON.stringify({
            username: 'alex'
          })
  );
</script>
</body>
</html>

XHR的事件

  • load事件（响应数据可用时触发）
  • error事件（请求发生错误时触发）
  • abort事件（终止当前请求触发）
  • timeout事件 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>XHR 的事件</title>
</head>
<body>
<script>
  // 1.load 事件
  // 响应数据可用时触发
  // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  // const xhr = new XMLHttpRequest();

  // // xhr.onload = () => {
  // //   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  // //     console.log(xhr.response);
  // //   }
  // // };
  // xhr.addEventListener(
  //   'load',
  //   () => {
  //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  //       console.log(xhr.response);
  //     }
  //   },
  //   false
  // );

  // xhr.open('GET', url, true);

  // xhr.send(null);

  // IE6~8 不支持 load 事件

  // 2.error 事件
  // 请求发生错误时触发

  // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  // const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';
  // const xhr = new XMLHttpRequest();

  // xhr.addEventListener(
  //   'load',
  //   () => {
  //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  //       console.log(xhr.response);
  //     }
  //   },
  //   false
  // );
  // xhr.addEventListener(
  //   'error',
  //   () => {
  //     console.log('error');
  //   },
  //   false
  // );

  // xhr.open('GET', url, true);

  // xhr.send(null);

  // IE10 开始支持

  // 3.abort 事件
  // 调用 abort() 终止请求时触发
  // const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

  // const xhr = new XMLHttpRequest();

  // xhr.addEventListener(
  //   'load',
  //   () => {
  //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  //       console.log(xhr.response);
  //     }
  //   },
  //   false
  // );
  // xhr.addEventListener(
  //   'abort',
  //   () => {
  //     console.log('abort');
  //   },
  //   false
  // );

  // xhr.open('GET', url, true);

  // xhr.send(null);

  // xhr.abort();

  // IE10 开始支持

  // 4.timeout 事件
  // 请求超时后触发
  const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

  const xhr = new XMLHttpRequest();

  xhr.addEventListener(
          'load',
          () => {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
              console.log(xhr.response);
            }
          },
          false
  );
  xhr.addEventListener(
          'timeout',
          () => {
            console.log('timeout');
          },
          false
  );

  xhr.open('GET', url, true);

  xhr.timeout = 10;

  xhr.send(null);

  // IE8 开始支持
</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/166928.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Maven高级进阶

Maven高级进阶

文章目录1&#xff0c;分模块开发1.1 分模块开发设计1.2 分模块开发实现1.2.1 环境准备1.2.2 抽取domain层步骤1:创建新模块步骤2:项目中创建domain包步骤3:删除原项目中的domain包步骤4:建立依赖关系步骤5:编译maven_02_ssm项目步骤6:将项目安装本地仓库1.2.3 抽取Dao层步骤1:…
阅读更多...
iOS vue devtools工具的手把手安装，及Vue.js not detected的解决

iOS vue devtools工具的手把手安装，及Vue.js not detected的解决

使用vue插件Vue.js devtools 一.通过谷歌商店直接下载&#xff08;要翻墙&#xff09; 二.不翻墙的方法&#xff1a; 1.官网下载 git地址&#xff1a;https://github.com/vuejs/devtools git clone https://github.com/vuejs/devtools2.完成后命令行里切到该目录下&#x…
阅读更多...
AppScan绕过登录验证码深入扫描

AppScan绕过登录验证码深入扫描

系列文章 AppScan介绍和安装 AppScan 扫描web应用程序 AppScan被动手动探索扫描 第四节-绕过登录验证码深入扫描 我们工作中最长碰到的工作场景是网站采用https协议&#xff0c;这时我们要用appScan进行扫描时&#xff0c;就需要先安装证书 1.证书安装 1.新建一个文件&…
阅读更多...
渗透测试— —扫描与爆破账号

渗透测试— —扫描与爆破账号

渗透测试— —扫描与爆破靶机账号 1 扫描与爆破账号流程 注意&#xff1a;仅用于教学与实验&#xff0c;不能用于攻击&#xff0c;否则后果自负 扫描&#xff1a;主机探测与端口扫描。&#xff08;主机探测&#xff1a;目标主机是存活&#xff0c;端口扫描&#xff1a;在线主…
阅读更多...
总结 62 种在深度学习中的数据增强方式

总结 62 种在深度学习中的数据增强方式

数据增强 数据增强通常是依赖从现有数据生成新的数据样本来人为地增加数据量的过程 这包括对数据进行不同方向的扰动处理 或使用深度学习模型在原始数据的潜在空间(latent space)中生成新数据点从而人为的扩充新的数据集 这里我们需要区分两个概念&#xff0c;即增强数据和…
阅读更多...
SpringBoot的filter过滤器

SpringBoot的filter过滤器

SpringBoot的filter过滤器 目录SpringBoot的filter过滤器一、过滤器的作用和概述1.1 简述1.2 使用场景二、自定义过滤的两种方式2.1 第一种方式2.1.1 启动类增加注解ServletComponentScan2.1.2 定义一个filter类2.1.3. 测试2.2 第二种方式2.2.1 自定义fitler类2.2.4 在启动类中…
阅读更多...
《Linux Shell脚本攻略》学习笔记-第五章

《Linux Shell脚本攻略》学习笔记-第五章

5.1 简介 借助HTTP协议所提供的功能以及命令行实用工具&#xff0c;我们可以用脚本满足大量的web自动化需求。 5.2 web页面下载 wget是一个用于文件下载的命令行工具&#xff0c;选项繁多且用法灵活。 下载单个文件或web页面 指定从多个URL处进行下载 我们可以通过选项-O指定输…
阅读更多...
centos上用nginx搭建简单的点播服务器

centos上用nginx搭建简单的点播服务器

查看centos系统信息&#xff1a;cat /etc/centos-release配置服务器DNSecho "nameserver 114.114.114.114" >> /etc/resolv.conf 安装网络工具yum install ntpdate wget net-tools -y同步服务器时间ntpdate ntp.aliyun.com安装编译工具及依赖库yum install -y …
阅读更多...
【原生Button和antd的Button】

【原生Button和antd的Button】

1. 原生Button 1. form 与按钮所关联的form元素。此属性的值必须是同一文档中form的id。如果未设置此属性&#xff0c;则 < Button>与其祖先< form>元素相关联 此属性允许将< Button>元素关联到文档中的任意位置< form>&#xff0c;而不仅仅是< …
阅读更多...
Jenkins配置邮箱接收构建通知

Jenkins配置邮箱接收构建通知

Jenkins配置邮箱接收构建通知1、开启163邮箱的POP3/SMTP服务2、配置Jenkins Location3、配置Extended E-mail Notification4、配置邮件通知选项5、任务中配置6、任务构建测试7、怎么同时给多人发邮件1、开启163邮箱的POP3/SMTP服务 这里我们用163邮箱当作发件方&#xff0c;qq邮…
阅读更多...
aloam学习笔记(四)

aloam学习笔记(四)

对于laserMapping.cpp源码的学习&#xff0c;这部分的主要功能是接受前端传来的数据&#xff0c;构建地图。 一、main函数部分 ros::init(argc, argv, "laserMapping");ros::NodeHandle nh;float lineRes 0;float planeRes 0;nh.param<float>("mapping…
阅读更多...
前端食堂技术周刊第 67 期：2022 State of JS、ESLint 2022、pnpm 2022、大淘宝 Web 端技术概览

前端食堂技术周刊第 67 期：2022 State of JS、ESLint 2022、pnpm 2022、大淘宝 Web 端技术概览

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;东北大饭包 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 本期摘要 2022 State of JS 结果出炉ESLint 2022 年终总结pnpm 2022 年终总结大淘…
阅读更多...
Win10注册表损坏进不了系统怎么U盘重装系统？

Win10注册表损坏进不了系统怎么U盘重装系统？

Win10注册表损坏进不了系统怎么U盘重装系统&#xff1f;有用户电脑提示注册表损坏&#xff0c;自己进行了系统的重新启动之后&#xff0c;遇到了电脑无法正常启动进行系统桌面的情况。那么遇到这样的情况&#xff0c;我们怎么去进行U盘重装系统呢&#xff1f;一起来看看具体的操…
阅读更多...
ZIP压缩文件如何加密？忘记密码怎么办？

ZIP压缩文件如何加密？忘记密码怎么办？

ZIP是常用的压缩文件格式之一&#xff0c;除了方便传输、节省空间&#xff0c;还能通过设置密码来保护文件。 设置ZIP文件的密码保护需要用到压缩软件&#xff0c;下面先说说最常用的WinRAR是如何设置ZIP文件的密码。 方法一&#xff1a; 我们可以压缩文件的同时设置密码&am…
阅读更多...
core-js常见于qiankun中的多份polyfill冲突问题

core-js常见于qiankun中的多份polyfill冲突问题

问题 开门见山&#xff0c;你可能会在 qiankun 等微前端体系中&#xff0c;有多个子应用时&#xff0c;发生这样的加载崩溃问题&#xff1a; Cannot redefine property: DEG_PER_RAD Cannot redefine property: RAD_PER_DEG 实际上 DEG_PER_RAD 和 RAD_PER_DEG 都是 Math 上的…
阅读更多...
Android面经_111道安卓基础问题（四大组件Activity、Service篇）

Android面经_111道安卓基础问题（四大组件Activity、Service篇）

111道Android面试基础题目&#xff0c;巩固基础作用。 Android基础问题——四大组件之Activity、Service1、Activity1.1、请介绍activity的生命周期1.1.1、生命周期回调之onCreate()1.1.2、生命周期回调之onStart()1.1.3、生命周期回调之onResume()1.1.4、生命周期回调之onPaus…
阅读更多...
【java】java多线程及线程池面试题

【java】java多线程及线程池面试题

目录前言线程是什么&#xff1f;多线程是什么&#xff1f;多线程的作用和好处以及缺点守护线程和用户线程并发和并行的区别一.线程的状态和常用方法1.线程各种状态转化图2.线程相关常用方法有① wait()② sleep(long timeout)③ join()④ yield()⑤ notify()和notifyAll()3.wai…
阅读更多...
全流量分析为企业提升SAP用户体验

全流量分析为企业提升SAP用户体验

前言 某汽车总部已部署NetInside流量分析系统&#xff0c;使用流量分析系统提供实时和历史原始流量&#xff0c;重点针对SAP系统性能进行分析&#xff0c;以供安全取证、应用事务分析、网络质量监测以及深层网络分析。 本次分析报告包含&#xff1a;SAP系统性能分析。 分析对…
阅读更多...
【北京理工大学-Python 数据分析-3.2Pandas数据特征分析】

【北京理工大学-Python 数据分析-3.2Pandas数据特征分析】

对一组数据的理解 数据摘要&#xff1a;通过以下方法&#xff1a;有损地提取数据特征的过程。 基本统计&#xff08;含排序&#xff09;分布/累计统计数据特征相关性周期性等数据分析 Pandas库的数据排序 .sort_index(axis0,asccendingTrue)。.sort_index()方法在指定轴上根…
阅读更多...
Tomcat 三种简单网站部署方式

Tomcat 三种简单网站部署方式

Tomcat 服务部署 1、隐式部署 为什么可以隐式部署&#xff0c;是因为 Tomcat 配置了默认主机 webapps&#xff0c;在 Engine 下你也可以配置其他主机&#xff08;要保证你配置的主机在 ect/host 下有对应关系&#xff09;&#xff0c;但是 appBase 要确保唯一。保证每台主机下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023