Ajax 03.原生Ajax使用|FormData的使用

最新推荐文章于 2024-12-08 20:47:17 发布

Gem__

最新推荐文章于 2024-12-08 20:47:17 发布

阅读量1.1k

点赞数

分类专栏： Ajax

本文链接：https://blog.youkuaiyun.com/Gemming_/article/details/103749905

版权

Ajax 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了原生Ajax的使用，包括XMLHttpRequest的基本使用、GET和POST请求、URL编码与解码、以及Level2的新特性。重点讲解了FormData的使用，用于快速处理表单数据和文件上传，并给出了jQuery中使用FormData的注意事项。同时，提到了上传进度条功能的实现，利用xhr.upload.onprogress事件监听上传进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生Ajax使用

XMLHttpRequest的基本使用

简称xhr

步骤:1.创建xhr对象

var xhr = new XMLHttpRequest();

调用xhr.open()函数

如果希望设置get请求的请求参数,需要放置在open()参数2地址的最后位置

书写格式为:地址?名=值&名=值&…

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

调用xhr.send()函数 ,发送请求,这一步是异步操作

xhr.send()

4.监听 xhr.onreadystatechange 事件

//readayState是xhr的属性,用来表示请求发送的状态
//取值为4代表下载完毕,确保为4才能使用响应的数据
//进一步检测:xhr.status 代表请求是否成功  200代表成功
xhr.onreadystatechange = function(){
    //4.1检测xhr.readyState取值和xhr.status取值
    if(xhr.readyState===4&&xhr.status===200){
//4.2 接收响应的数据即可
//-原生接收的响应是JSON格式,需要自己转换格式,如果是jQuery 会自动转换
        console.log(xhr.responseText);
    }
}

带有参数的get请求

书写方式:
- 在xhr.open()的参数2url后面书写参数内容
- 名称:参数的形式成为查询字符串
- 格式:?名=值&名=值…
  - 其中名= 值&名= 值…成为url编码格式,英文为urlencoded

URL编码与解码

URL地址中不允许出现中文,如果URL包含中文,中文部分会被编码转换
浏览器会进行自动URL处理,无需操作
encodeURI()编码 decodeURI()解码

XMLHttpRequest的post请求

//1. 创建对象
var xhr = new XMLHttpRequest();
//2.调用open 
xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
//3. 设置Content -Type内容格式(固定写法)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.调用send()
xhr.send('bookname=老人与海&author=海明威');
//5.设置readystatechange事件,接收响应数据
xhr.onreadystatechange = function(){
    if(xhr.readyState===4&&xhr.status===200){
        console.log(xhr.responseText);
    }
}

get与post发送方式的区别

请求参数的书写位置不同:
- get请求方式:在xhr.open()的url后面使用?链接
- post请求:在xhr.send()中书写
post请求需要设置Content-Type

JSON语法注意事项

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON的最外层必须是对象或者数组格式
不能使用undefined或函数作为JSON的值

序列化与反序列化

把数据转换为字符串的过程,叫序列化,例如 JSON.stringify()

把字符串转换为数据对象过程,叫做反序列化,例如JSON.parse()

将对象数据转换为URL编码格式

//封装函数用于将对象转换为URL编码格式
function urlencoded(obj){
    var arr = [];
    for(var k in obj){
        arr.push(k+'='+obj[k])
}
    return arr.join("&")
}
//使用函数
var result = urlencoded({
    name:"jack",
    age:18,
    gender:"男"
})

XMLHttpRequest Level2 的新特性

旧版缺点:1. 只能传文本,无法用来读取和上传文件

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

XMLHttpRequest Level2 的新功能:

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据(可以传文件和快速管理表单数据)
可以传文件
可以管理表单

设置HTTP请求时限

设置方式:
- 属性 xhr.timeout = 超时时间;//毫秒单位
- 时间:xhr.ontimeout = function(){请求超时后,触发的事件};

FormData的使用

作用:
- 1.可以快速处理表单数据
- 2.可以进行文件上传
注意点:
- 发送FormData需要使用POST请求方式
- 不需要单独设置Content-Type
使用方式:
- 单独发送数据

//传文整个本域的文本数据
<body>
    <form id="testForm">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="ajax提交">
    </form>
    <script>
        var testForm = document.getElementById("testForm");
        var fd = new FormData(testForm);
        fd.append("name", "张景瑜");
        fd.append("age", 20);
        // 创建xhr对象
        var xhr = new XMLHttpRequest();
        // 调用xhr.open()函数
        xhr.open("POST", 'http://www.liulongbin.top:3006/api/formdata')
        //调用xhr.send()函数,发送请求,这一步是异步操作
        xhr.send(fd);
        //监听 xhr.onreadystatechange  事件
        xhr.onreadystatechange = function () {

            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

上传文件:
- 1 准备结构(文件域)
```
<input type = 'file'>
```
- 2 检测用户是否选择了文件
  - 对DOM对象形式的input[type = “file”]的files属性进行检测
    - 如果内部存储了任意的一个值,就说明选取了文件,否则就是没选
- 3 使用FormData保存文件信息
  - 使用fd.append()添加即可
- 4 通过ajax发送
- 5 响应处理,展示服务端获取到的图片

<body>
    <input type="file" id="fileForm">
    <button type="button" id="btn">确认上传</button>
    <img src="" alt="" id="pic" style="width: 50px;height: 50px;">
    <script>
        var testForm = document.getElementById("fileForm");
        var btn = document.getElementById("btn")
        var pic = document.getElementById("pic")
        btn.onclick = function () {

            if (testForm.files.length == false) { alert("请上传文件"); return }
            var fd = new FormData();
            fd.append("avatar", fileForm.files[0]);
            var xhr = new XMLHttpRequest();
            // 调用xhr.open()函数
            xhr.open("POST", 'http://www.liulongbin.top:3006/api/upload/avatar');
            //调用xhr.send()函数,发送请求,这一步是异步操作
            xhr.send(fd);
            //监听 xhr.onreadystatechange  事件
            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4 && xhr.status === 200) {
                    var res = JSON.parse(xhr.responseText);
                    console.log(res);
                    pic.src = 'http://www.liulongbin.top:3006' + res.url
                }
            }
        }
    </script>
</body>

jQuery使用FormData上传文件的注意点

必须设置两个属性
- contentType: false 不指定内容类型
- processData: false 不进行数据处理

上传进度条功能

xhr.upload.onprogress 上传中实时触发的事件
- 事件对象e的属性
  - e.lengthComputable 文件长度是否可计算
  - e.loaded 已上传大小
  - e.total 总大小
xhr.upload.onload 上传完毕时触发事件

  //上传进度监测
 xhr.upload.onprogress = function (e) {
      if (e.lengthComputable) {     
          //加载值比总需加载值的百分比
      var bili = e.loaded / e.total * 100 + "%";    document.getElementById('percent').style.width = bili;
 document.getElementById('percent').innerText = bili;} else {alert("文件不支持上传中的进度监测")}
}
   // 设置上传文件完成的事件(更改样式)
      xhr.upload.onload = function () {
       //采用bootstrap样式 document.getElementById('percent').className = 'progress-bar progress-bar-success';
      }