Ajax原生JS写法、JSON数据、上传文件

正则对象的exec()方法

作用：返回表达式的匹配信息

RegExpObject.exec(string);
// 示例：
var str = 'hello';
var pattern = /o/;
// 输出的结果["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str));

1.返回值是一个对象，表示当前匹配到字段的信息；（index表示匹配到的字段的起始索引值，input表示参与匹配的字符串）；
2.分组匹配：正则表达式正式是0号组，从左到右，从外到里按顺序排列；

XMLHttpRequest的基本使用

1.什么是XMLHttpRequest
XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
2.使用xhr发起get请求/post请求

// 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)
 }
}

// 1. 创建 xhr 对象
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=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
 console.log(xhr.responseText)
 }
}

3.xhr对象的readyState属性
0 – UNSENT —— XMLHttpRequest 对象已被创建，但尚未调用 open方法。
1 – OPENED —— open() 方法已经被调用。
2 – HEADERS_RECEIVED —— send() 方法已经被调用，响应头也已经被接收。
3 – LOADING —— 数据接收中，此时 response 属性中已经包含部分数据。
4 – DONE —— Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

get携带参数的本质：
get请求通过在接口地址后面以”?“拼接的形式携带请求参数；
eg：请求地址?k=1&j=2
jQuery中的$.ajax()、$.get()发出的get请求，是把配置项中的data属性值处理之后拼接在请求地址后；

XML

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，
也是一种标记语言。
XML 被设计用来传输和存储数据，是数据的载体。
XML的缺点
① XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
② 在 Javascript 中解析 XML 比较麻烦

JSON数据

概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。
JSON 就是用字符串来表示 Javascript 的对象和数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
JSON数据格式非常严格，格式不正确就无法使用JSON方法转换；
注意点：1.属性名，字符串必须用双引号包裹；
2.不能有undefined、函数；

JSON和js对象之间的转换：
JSON字符串转换为js对象： JSON.parse(字符串) 反序列化；
js对象转换为JSON字符串：JSON.stringify(对象) 序列化；

XMLHttpRequest Level2

旧版XMLHttpRequest的缺点
1.只支持文本数据的传输，无法用来读取和上传文件
2.传送和接收数据时，没有进度信息，只能提示有没有完成
XMLHttpRequest Level2的新功能
1.可以设置 HTTP 请求的时限
2.可以使用 FormData 对象管理表单数据
3.可以上传文件
4.可以获得数据传输的进度信息
设置HTTP请求时限
有时，Ajax 操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的 XMLHttpRequest 对象，增加了 timeout 属性，可以设置 HTTP 请求的时限：

 xhr.timeout = 3000 // 单位：毫秒

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

xhr.ontimeout = function(event){
 alert('请求超时！')
}

FormData对象管理表单数据
创建FormData实例： new FormData();
使用FormData实例：
插入：实例.append(key,value);
修改：实例.set(key,value);
删除：实例.delete(key);
获取：获取key的第一个值：实例.get(key);
获取key的所有值：实例.getAll(key);
自动收集表单元素的值：new FormData(表单域DOM对象)
1.通过forEach遍历FormData实例来查看数据
2.FormData收集表单数据时，只会收集有name属性的表单元素

上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。
实现步骤：
① 定义 UI 结构
② 验证是否选择了文件
③ 向 FormData 中追加文件
④ 使用 xhr 发起上传文件的请求
⑤ 监听 onreadystatechange 事件

    // 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('请选择要上传的文件！')
        }
        // 1. 创建 FormData 对象
        var fd = new FormData()
        // 2. 向 FormData 中追加文件
        fd.append('avatar', files[0])
        // 1. 创建 xhr 对象
        var xhr = new XMLHttpRequest()
        // 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
        // 3. 发起请求
        xhr.send(fd)
        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)
                }
            }
        }
    });

显示文件上传进度
新版本的 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)
 }
 }

监听上传完成事件

xhr.upload.onload = function() {

}

使用jQuery发起上传文件的请求

 $.ajax({
 method: 'POST',
 url: 'http://www.liulongbin.top:3006/api/upload/avatar',
 data: fd,
 // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
 contentType: false,
 // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
 processData: false,
 success: function(res) {
 console.log(res)
 }
 })

jQuery实现loading效果

1.ajaxStart、ajaxStop方法

// $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。
 $(document).ajaxStart(function() {
 $('#loading').show()
 })
 $(document).ajaxStop(function() {
 $('#loading').hide()
 })

2.$.ajax()里的beforeSend、complete属性

$.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          contentType: false,
          processData: false,
          beforeSend: function () {
            $('#loading').show();
          },
          complete: function () {
            $('#loading').hide();
          },
          success: function (res) {
            console.log(res);
          }
        });