【Ajax】XMLHttpRequest和Level2

news2024/9/27 7:26:59

一、XMLHttpRequest

    • 什么是XMLHttpRequest

XMLHttpRequest(简称 xhr)是浏览器提供的 Javascript 对象,通过它,可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数,就是基于 xhr 对象封装出来的。

二、了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性,用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个:

状态

描述

0

SENT

XMLHttpRequest 对象已被创建,但尚未调用 open方法。

1

OPENED

open() 方法已经被调用。

2

HEADERS_RECEIVED

send() 方法已经被调用,响应头也已经被接收。

3

LOADING

数据接收中,此时 response 属性中已经包含部分数据。

4

DONE

Ajax 请求完成,这意味着数据传输已经彻底完成或失败。

三、使用xhr发起GET请求

    • 使用xhr发起不带参数的GET请求

步骤:

①创建 xhr 对象

②调用 xhr.open() 函数:指定 请求方式 与 URL地址,创建Ajax 请求

③调用 xhr.send() 函数:发起 Ajax 请求

④监听 xhr.onreadystatechange 事件:拿到服务器响应的数据

  <script>
    // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数:指定 请求方式 与 URL地址
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    // 3. 调用 send 函数:发起 Ajax 请求
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      // 4.1 监听 xhr 对象的请求状态 readyState ;与服务器响应的状态 status
      if (xhr.readyState === 4 && xhr.status === 200) { // 固定写法
        // 4.2 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }
  </script>

注意:代码中的xhr.status === 200和服务器响应回来的数据中的"status":200不是同一个status。

xhr.status === 200是HTTP请求状态的一部分;

"status":200是服务器响应回来的一个属性,是数据里面的一部分。

2. 使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时,只需在调用 xhr.open 期间,为 URL 地址指定参数即可:

xhr.open('GET', ' http://www.liulongbin.top:3006/api/getbooks?id=1'
  <script>
    var xhr = new XMLHttpRequest()
    // 在调用 xhr.open 期间,为 URL 地址指定参数
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')  // 这种在 URL 地址后面拼接的参数,叫做查询字符串
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

这种在 URL 地址后面拼接的参数,叫做查询字符串

四、查询字符串

1. 什么是查询字符串

查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量)。

将英文的 ? 放在URL 的末尾,然后再加上 参数=值 ,想加上多个参数的话,使用 & 符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到 URL 中。

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname= 西游记

2. GET请求携带参数的本质

无论使用 $.ajax(),还是使用 $.get(),又或者直接使用 xhr 对象发起 GET 请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到 URL 地址的后面,发送到服务器的。

$.get('url', {name: 'zs', age: 20}, function() {})
// 等价于
$.get('url?name=zs&age=20', function() {})
$.ajax({ method: 'GET', url: 'url', data: {name: 'zs', age: 20}, success: function() {} })
// 等价于
$.ajax({ method: 'GET', url: 'url?name=zs&age=20', success: function() {} })

2.1 $.get()

  <script>
    // $.GET():
    $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1, bookname: '西游记' }, function (res) {
      console.log(res)
    })
  </script>

2.2 $/ajax()

  <script>
    // $/ajax():
    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      data: {
        id: 1,
        bookname: '西游记'
      },
      success: function (res) {
        console.log(res)
      }
    })
  </script>

五、URL编码与解码

1. 什么是URL编码

URL 地址中,只允许出现英文相关的字母、标点符号、数字,因此,在 URL 地址中不允许出现中文字符。

如果 URL 中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。

URL编码原则的通俗理解:使用英文字符去表示非英文字符。

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname= 西
// 经过 URL 编码之后,URL地址变成了如下格式:
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname= %E8%A5%BF %E6%B8%B8 %E8%AE%B0 // 三组%表示一个中文字字符

2. 如何对URL进行编码与解码

浏览器提供了 URL 编码与解码的 API,分别是:

encodeURI() // 编码的函数
decodeURI() // 解码的函数
  <script>
    // 编码
    var str = '早睡早起长头发'
    var str2 = encodeURI(str)
    console.log(str2)


    // 解码
    console.log('----------')
    var str3 = decodeURI('%E9%95%BF%E5%A4%B4%E5%8F%91')
    console.log(str3)
  </script>

3. URL编码的注意事项

由于浏览器会自动对 URL 地址进行编码操作,因此,大多数情况下,程序员不需要关心 URL 地址的编码与解码操作。

更多关于 URL 编码的知识,请参考如下博客:

https://blog.csdn.net/Lxd_0111/article/details/78028889

六、使用xhr发起POST请求

步骤:

①创建 xhr 对象

②调用 xhr.open() 函数:指定 请求方式 与 URL地址,创建Ajax 请求

③设置 Content-Type 属性(固定写法)

④调用 xhr.send() 函数,同时指定要发送的数据:发起Ajax 请求

⑤监听 xhr.onreadystatechange 事件:获取服务器响应的数据

  <script>
    // 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数:指定 请求方式 与 URL地址,创建Ajax 请求
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 3. 设置 Content-Type 属性(固定写法)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数,同时指定要发送的数据:发起Ajax 请求
    xhr.send('bookname=史记&author=司马迁&publisher=上海图书出版社')
    // 5. 监听事件:获取服务器响应的数据
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

二、 XMLHttpRequest Level2的新特性

    • 认识XMLHttpRequest Level2

1.1 旧版XMLHttpRequest的缺点

只支持文本数据的传输,无法用来读取和上传文件;

传送和接收数据时,没有进度信息,只能提示有没有完成。

1.2 XMLHttpRequest Level2的新功能

可以设置 HTTP 请求的时限;

可以使用 FormData 对象管理表单数据;

可以上传文件;

可以获得数据传输的进度信息。

2. 设置HTTP请求时限

有时,Ajax 操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。新版本的 XMLHttpRequest 对象,增加了 timeout 属性,可以设置 HTTP 请求的时限

xhr.timeout = 3000

上面的语句,将最长等待时间设为 3000 毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还有一个 timeout 事件,用来指定回调函数:

xhr.ontimeout = function(event){
alert('请求超时!')
}
  <script>
    var xhr = new XMLHttpRequest()

    // 设置 超时时间
    xhr.timeout = 30
    // 设置超时以后的处理函数
    xhr.ontimeout = function () {
      console.log('请求超时了!')
    }

    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    xhr.send()

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 如果没有超时就会打印出结果
        console.log(xhr.responseText)
      }
    }
  </script>

3. FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理,HTML5 新增了一个 FormData 对象。

3.1 FormData 对象可以模拟表单操作

// 1. 新建 FormData 对象
var fd = new FormData()
// 2. 为 FormData 添加表单项
fd.append('uname', 'zs')
fd.append('upwd', '123456')
// 3. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 4. 指定请求类型与URL地址
xhr.open('POST', ' http://www.liulongbin.top:3006/api/formdata')
// 5. 直接提交 FormData 对象,这与提交网页表单的效果,完全一样
xhr.send(fd)
  <script>
    // 1. 创建 FormData 实例
    var fd = new FormData()

    // 2. 调用 append 函数,向 fd 中追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')

    // 3. 创建 XHR 对象
    var xhr = new XMLHttpRequest()

    // 4. 指定请求类型与URL地址
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
    
    // 5. 直接提交 FormData 对象,这与提交网页表单的效果,完全一样
    xhr.send(fd)

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
  </script>

3.2 FormData对象可以用来获取网页表单的值

// 获取表单元素
var form = document.querySelector('#form1')
// 监听表单元素的 submit 事件
form.addEventListener('submit', function(e) {
e.preventDefault() // 族子表单的默认提交
// 根据 form 表单创建 FormData 对象,会自动将表单数据填充到 FormData 对象中
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', ' http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function() {}
})
  <form id="form1">
    <input type="text" name="uname" autocomplete="off" />
    <input type="password" name="upwd" />
    <button type="submit">提交</button>
  </form>

  <script>
    // 1. 通过 DOM 操作,获取到 form 表单元素
    var form = document.querySelector('#form1')

    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData,快速获取到 form 表单中的数据
      var fd = new FormData(form)

      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    })
  </script>

4. 上传文件

新版 XMLHttpRequest 对象,不仅可以发送文本信息,还可以上传文件。

实现步骤:

①定义 UI 结构

②验证是否选择了文件

③向 FormData 中追加文件

④使用 xhr 发起上传文件的请求

⑤监听 onreadystatechange 事件

4.1 定义UI结构

<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3. 显示上传到服务器上的图片 -->
<img src="" alt="" id="img" width="800" />

4.2 验证是否选择了文件

// 1. 获取上传文件的按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮添加 click 事件监听
btnUpload.addEventListener('click', function() {
// 3. 获取到选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件!')
}
// ...后续业务逻辑
})

4.3 向FormData中追加文件

// 1. 创建 FormData 对象
var fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0])

4.4 使用 xhr 发起上传文件的请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数,指定请求类型与URL地址。其中,请求类型必须为 POST,上传文件必须用POST提交文件
xhr.open('POST', ' http://www.liulongbin.top:3006/api/upload/avatar')
// 3. 发起请求
xhr.send(fd)

4.5 监听onreadystatechange事件

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) { // 上传文件成功
// 将服务器返回的图片地址,设置为 <img> 标签的 src 属性
document.querySelector('#img').src = ' http://www.liulongbin.top:3006 ' + data.url
} else { // 上传文件失败
console.log(data.message)
}
}
}
  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签,来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件!')
      }
      
      var fd = new FormData()
      // 将用户选择的文件,添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败!' + data.message)
          }
        }
      }
    })
  </script>

5. 显示文件上传进度

新版本的 XMLHttpRequest 对象中,可以通过监听 xhr.upload.onprogress 事件,来获取到文件的上传进度。语法格式如下:

// 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
// e.lengthComputable 是一个布尔值,表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
}
}

5.1 导入需要的库

<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>

5.2 基于Bootstrap渲染进度条

<!-- 进度条 -->
<div class="progress" style="width: 500px; margin: 10px 0;">
<div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">
0%
</div>
</div>

5.3 监听上传进度的事件


xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
// 1. 计算出当前上传进度的百分比
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
$('#percent')
// 2. 设置进度条的宽度
.attr('style', 'width:' + percentComplete + '%')
// 3. 显示当前的上传进度百分比
.html(percentComplete + '%')
}
}

5.4 监听上传完成的事件

xhr.upload.onload = function() {
$('#percent')
// 移除上传中的类样式
.removeClass()
// 添加上传完成的类样式
.addClass('progress-bar progress-bar-success')
}
  <!-- 1. 导入需要的库 -->
  <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>

  <input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>

  <!-- 2. 基于Bootstrap渲染进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">  // active能实现进度条运动效果
      0%
    </div>
  </div>

  <br />
  <img src="" alt="" id="img" width="800" />

  <script>
    var btnUpload = document.querySelector('#btnUpload')
    btnUpload.addEventListener('click', function () {
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件!')
      }
      var fd = new FormData()
      fd.append('avatar', files[0])
      var xhr = new XMLHttpRequest()


      // 3. 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条,显示当前的上传进度百分比
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }

      // 4. 监听上传完成的事件
      xhr.upload.onload = function () {
        // 移除上传中的类样式,添加上传完成的类样式
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            console.log('图片上传失败!' + data.message)
          }
        }
      }
    })
  </script>

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

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

相关文章

java面试

java面试目录概述需求&#xff1a;设计思路实现思路分析1.代码&#xff1a;参考资料和推荐阅读Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better result,wait for change,challenge Surv…

【数据结构】保姆级队列各接口功能实现

目录 &#x1f34a;前言&#x1f34a;&#xff1a; &#x1f95d;一、队列概述&#x1f95d;&#xff1a; 1.队列的概念&#xff1a; 2.队列的结构&#xff1a; &#x1f349;二、队列的各接口功能实现&#x1f349;&#xff1a; 1.初始化队列&#xff1a; 2.入队&#…

k8s之挂载NFS到POD中

写在前面 在k8s之挂载本地磁盘到POD中 一文中我们看了如何将POD中的数据写到本地磁盘中&#xff0c;这种方式要求POD只能在指定的Node上&#xff0c;一旦POD更换Node&#xff0c;数据依然会丢失&#xff0c;所以本文看下如何通过将数据写到NFS中来解决这个问题。下面我们就开始…

sklearn数据降维之字典学习

文章目录字典学习简介构造函数实战Step1 制作实验数据Step2 小批字典学习Step 3 参数调整字典学习简介 如果把降维理解成压缩的话&#xff0c;那么字典学习的本质是编码&#xff0c;其目的是找到少量的原子&#xff0c;用以描述或构建原始样本。举个一维的例子&#xff0c;以a…

程序员护眼指南

前言 前言&#xff1a;脱发和近视是当代年轻人的两大痛点&#xff0c;今天来聊聊如何护眼。 文章目录前言一、护眼的核心二、调节睫状肌的方法1. 眨眼2. 望远3. 睡觉4. 促进血液循环5. 吃补剂6. 好的屏幕一、护眼的核心 护眼的核心就是保护睫状肌。 睫状肌是眼内的一种平滑肌…

一起自学SLAM算法:7.7 典型SLAM算法

连载文章&#xff0c;长期更新&#xff0c;欢迎关注&#xff1a; 针对式&#xff08;7-38&#xff09;所述的在线SLAM系统&#xff0c;以扩展卡尔曼滤波&#xff08;EKF&#xff09;为代表的滤波方法&#xff0c;是求解该状态估计问题最典型的方法&#xff0c;在7.4节中已经详细…

GY-US42超声波传感器模块介绍

GY-US42超声波传感器模块简介GY-US42 是一款低成本高品质测距传感器模块。工作电压 3-5v&#xff0c;功耗小&#xff0c;体积小&#xff0c;安装方便。其工作原理是&#xff0c;探头发射超声波&#xff0c;照射到被测物体后&#xff0c;探头接收返回声波&#xff0c;利用时间差…

学人工智能电脑主机八大件配置选择指南

来源&#xff1a;深度之眼 作者&#xff1a;frank 编辑&#xff1a;学姐 本篇主要是帮助大家构建高性能、高性价比的AI开发的硬件平台。如何不把钱浪费到不必要的硬件上&#xff0c;并合理搭配硬件配置节省预算是本文想要去讨论的问题。如果预算充足&#xff0c;笔者建议购买一…

【JavaSE专栏1】Java的介绍、特点和历史

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;Java全栈软件工程师一枚&#xff0c;来自浙江宁波&#xff0c;负责开发管理公司OA项目&#xff0c;专注软件前后端开发&#xff08;Vue、SpringBoot和微信小程序&#xff09;、系统定制、远程技术指导。CSDN学院、蓝桥云…

Python ·保险理赔分析:数据分析

介绍 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 在本笔记本中&#xff0c;我们将仔细研究保险索赔&#xff0c;并弄清一些有关血压、BMI、糖尿病、吸烟、年龄和性别等条件如何影响索赔价值的事实。 我们将使用散点图、饼图、直…

IDEA必装插件-Gyro

前言用SpringBootTest运行单测的时候&#xff0c;是不是每运行都需要重新启动Spring容器&#xff1f;大型应用启动一次会浪费大量的时间&#xff0c;导致效率比较低。Gyro插件可以解决你的问题。Gyro介绍它是一个IDEA插件&#xff0c;安装之后&#xff0c;用Gyro Debug运行你的…

一起自学SLAM算法:7.4 基于贝叶斯网络的状态估计

连载文章&#xff0c;长期更新&#xff0c;欢迎关注&#xff1a; 在7.2.4节中&#xff0c;讨论了表示机器人观测与运动之间依赖关系的概率图模型&#xff0c;主要是贝叶斯网络&#xff08;实际应用在机器人中的是动态贝叶斯网络&#xff09;和马尔可夫网络&#xff08;实际应用…

fpga实操训练(lcd字符显示)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 用fpga编写屏幕显示,和c语言编写有很大的不同。用c语言开发,很大程度上是遵循soc ip提供的规范进行编写。而用fpga开发的话,则需要考虑不同信号的时序关系。但是,用fpga开发也有…

c++ 优先级队列priority_queue的使用

c priority_queue是对其他容器元素顺序的调整包装; 堆的原理 1.定义 priority_queue<Type, Container, Functional> q; 其中&#xff0c;Type是数据类型&#xff0c;Container是低层容器&#xff0c;如vector, stack, deque等. Functional是比较函数&#xff1b;默认可…

day25-类加载器反射

1.类加载器 1.1类加载器【理解】 作用 负责将.class文件&#xff08;存储的物理文件&#xff09;加载在到内存中 1.2类加载的过程【理解】 类加载时机 创建类的实例&#xff08;对象&#xff09;调用类的类方法访问类或者接口的类变量&#xff0c;或者为该类变量赋值使用反…

NodeJS 之 HTTP 模块(实现一个基本的 HTTP 服务器)

NodeJS 之 HTTP 模块&#xff08;实现一个基本的 HTTP 服务器&#xff09;参考描述HTTP 模块搭建 HTTP 服务器http.createServer()监听检测服务器端口是否被占用终端Error Code超时处理处理客户端的请求request 事件http.IncomingMessagehttp.ServerResponse中文乱码问题问题解…

Java EE之线程编(进阶版)

这些锁策略能适用于很多中语言&#xff0c;博主是学Java的&#xff0c;所以下面的代码会用Java去写&#xff0c;请大家见谅&#xff0c;但是处理的方法是大差不差的。 一、常见锁和锁策略&#xff1a; (一)、乐观锁和悲观锁 1、何为乐观锁和悲观锁呢&#xff1f; 答&#…

Linux服务器常见运维性能测试(3)CPU测试super_pi、sysbench

Linux服务器常见运维性能测试&#xff08;3&#xff09;CPU测试常见性能测试软件CPU测试&#xff1a;super_pi &#xff08;计算圆周率&#xff09;CPU测试&#xff1a;sysbench&#xff08;CPU功能测试部分&#xff09;下载安装sysbench综合测试功能执行CPU测试最近需要测试一…

Java面试题含答案,最新面试题(1)

Java 中 InvokeDynamic指令是干什么的&#xff1f; JVM字节码指令集一直比较稳定&#xff0c;一直到Java7中才增加了一个InvokeDynamic 指令&#xff0c;这是JAVA为了实现『动态类型语言』支持而做的一种改进&#xff1b;但是在Java7中并没有提供直接生成InvokeDynamic 指令的…

自定义类型:结构体,枚举,联合

目录一、结构体内存对齐二、位段2.1 什么是位段2.2 位段内存分配规则2.3 位段的跨平台问题三、枚举四、联合体4.1 联合类型的定义4.2联合的特点4.3 联合大小的计算4.4 练习一、结构体内存对齐 struct s {char c1;int i;char c2; }; int main() {printf("%d\n", size…