三、Ajax加强

一、XMLHttpRequest的基本使用

1.1 简介

XMLHttpRequest(简称xhr)市浏览器提供的js对象,通过它,可以请求服务器上的数据资源

1.2 使用xhr发起get 请求 

• 第一步创建 xhr对象
• 第二步调用xhr.open()函数
• 第三步调用xhr.send()函数
• 第四步监听xhr.onreadystatechange事件

		//步骤一 创建一个xhr对象
        let xhr = new XMLHttpRequest();
        //步骤二 调用open函数
        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks")

        //步骤三 调用send函数
        xhr.send();
        //步骤四 监听onreadystatechange事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log('获取成功了');
            }
        }

1.3 xhr对象的readyState属性

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

 

1.5 查询字符串 

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

GET请求写单参数的本质(直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器 

 

1.6 URL编码与解码

1.6.1 简介

• url地址中,只允许出现英文相关的字母,标点符号,数字 不允许出现中文字符,需要对中文进行编码(转义)
• URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印的字符)去表示哪些不安全的字符
• 使用英文字符去表示非英文字符

1.6.2 编码与解码

• encodeURL() 编码的函数
• decodeURL() 解码的函数

1.7 使用xhr发起POST请求

• 第一步 创建xhr对象
• 第二步 调用xhr.open()函数
• 第三步 设置Content-Type属性(固定写法)
• 第四步 调用xhr.send()函数 同时指定要发送的数据
• 第五步 监听xhr.onreadystatechange事件

		 //创建一个xhr 对象
        let xhr = new XMLHttpRequest();
        //调用open方法
        xhr.open("post", "http://www.liulongbin.top:3006/api/addbook")
        //设置Content-Type属性
        xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded')
        //调用send函数
        xhr.send('bookname=水浒传&author=施耐庵&出版社=上海出版社')
        //监听事件
        xhr.onreadystatechange = function () {
            if (readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

二、 数据交换格式

2.1 定义

2.2 XML

2.2.1 什么是XML

全称EXtensible Markup Language(可扩展标记语言)

 

2.2.2 XML和HTML的区别

• HTML被设计用来描述网页上的内容,是网页内容的载体
• XML被设计用来传输和存储数据 是数据的载体

2.2.3 XML的缺点

• XML格式臃肿,和数据无关,体积大,传输效率低
• js中解析XML比较麻烦

2.3 JSON

2.3.1 定义

• JSON就是js对象和数组的字符串表示法(json的本质就是字符串)
• 又称作 js对象表示法
• 作用:json是一种轻量级的文本数据交换格式 json比XML更小 更快 更易解析

2.3.2 JSON的两种结构

对象结构

• 数据结构{key:value,key:value}的键值对结构
• key必须是使用英文的双引号包裹的字符串
• value的数据类型可以是数字,字符串,布尔值,null,数组,对象

数组结构 

• 用[]括起来的内容
• 数组中数据的类型可以是 数字 字符串 布尔值 null 数组 对象

2.3.3 JSON语法的注意事项

 

2.3.4 JSON和JS对象的关系

JSON是js杜祥的字符串表示法,使用文本表示一个JS对象的信息,本质是一个字符串

2.3.5 JSON和JS对象的互转

JSON转Js对象

JS转JSON字符串

2.3.6 序列化和反序列化

序列化

• 把数据对象转换为字符串的过程
• 调用JSON.stringify()函数

反序列换

• 把字符串转换为数据对象的过程
• 调用JSON.parse()函数

三、封装自己的Ajax函数

3.1 实现的效果

导入自定义的ajax函数库,调用自定义的函数,发起ajax数据请求

3.2 定义options参数选项

• method 请求的类型
• url 请求的URL地址
• data 请求携带的数据
• success 请求成功之后的回调函数

3.3 处理data参数

把data对象 转换成查询字符串的格式 从而提交给服务器

function resolve(data) {
    let arr = []
    for (let i in data) {
        let str = i + '=' + data[i];
        arr.push(str)
    }
    console.log('arr', arr)
    console.log('2222', arr.join('&'))
    return arr.join('&')
}

3.4 定义调用函数

需要创建xhr对象 并监听onreadystatechange事件

function itheima(options) {
    let xhr = new XMLHttpRequest();
    //把外界传递来的参数对象 转换为  查询字符串
    let qs = resolve(options.data)
   
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let res = JSON.parse(xhr.responseText)
            option.success(res)
        }
    }

}

3.5 判断请求的类型

不同的请求类型(get或post) 进行if…else…判断

function itheima(options) {
    let xhr = new XMLHttpRequest();
    //把外界传递来的参数对象 转换为  查询字符串
    let qs = resolve(options.data)
    if (options.method.toUpperCase() === "GET") {
        console.log("发起get请求")
        //传的第一个是类型   第二个使接口地址 拼接数据 
        xhr.open('GET', options.url + '?' + qs)
        xhr.send()
    } else if (options.method.toUpperCase() === "POST") {
        console.log("发起post请求")
        xhr.open('POST', options.url)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(qs)
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let res = JSON.parse(xhr.responseText)
            option.success(res)
        }
    }

}

 调用方法

 		 itheima({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: '水浒传',
                author: '施耐庵',
                publisher: '北京'
            },
            success: function (res) {
                console.log('打印res', res);
            }
        })

 

四、XMLHttpRequest Level2的新特性

4.1 简介

4.1.1 旧版XMLHttpRequest的缺点

• 只支持文本数据的传输,无法用来读取和上传文件
• 传送和接收数据时,没有进度信息,只能提示没有完成

4.1.2 level2的新功能

• 可以设置HTTP请求的时限
• 可以使用FormData对象管理表单数据
• 可以上传文件
• 可以获得数据传输的进度信息

4.2 设置HTTP请求时限

xhr.timeout=3000
xhr.ontimeout=funciton(e){alert(‘请求超时了’)}

4.3 FormData对象管理表单数据

html5新增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)

 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() {}
})

4.4 上传文件

4.4.1 定义UI结构

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

4.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.4.3 向FormData中追加文件

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

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

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

 4.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)
    }
  }
}

 

4.5 显示文件上传的进度

4.5.1导入需要的库

JQuery库 bootstrap

4.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>

 4.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 + '%')
    }
 }

4.5.4 监听上传完成的事件

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

完整代码

<!-- 1.文件选择框 -->
    <input type="file" id="filel">
    <!-- 2.上传文件的按钮 -->
    <button id="btn">上传文件</button>
    <!-- 进度条 -->
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" id="precent" style="width: 0%">
            45%
        </div>
    </div>
    <br>
    <!-- 3.图片文件标签  用来显示上传成功 -->
    <img src="" alt="" id="img" width="800">

  //绑定上传按钮点击事件
        let btn = document.querySelector('#btn')
        btn.addEventListener('click', function () {
            //获取选择的文件列表   files是个数组
            let files = document.querySelector('#filel').files
            console.log('files', files);
            if (files.length <= 0) {
                return alert('请上传文件')
            }
            console.log('用户选择了待上传的文件');
            //向formData中追加文件
            let fd = new FormData()
            fd.append('avatar', files[0])
            //创建xhr实例化对象
            let xhr = new XMLHttpRequest()

            //监听文件的上传进度
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    //当前文件的进度 除以 文件的大小
                    let pro = Math.ceil((e.loaded / e.total) * 100)
                    console.log('上传的进度', pro);
                    $('#precent').attr('style', 'width:' + pro + '%').html(pro + '%')
                }
            }
            xhr.upload.onloadend = function () {
                $('#precent').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) {
                    console.log('上传成功了', JSON.parse(xhr.responseText));
                    let data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        let img = document.querySelector('#img')
                        img.src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        alert('上传服务器失败')
                    }
                }
            }
        })

五、JQuery高级用法

5.1 JQuery实现文件上传

• 1.定义UI结构
• 2.验证是否选择了文件
• 3.向FormData中追加文件
• 4.使用JQuery发起文件上传的请求

<input type="file" id="file1">
    <button id="btn">上传文件</button>
    <img src="../code/images/loading.gif" alt="" style="display: none;">

 let btn = document.querySelector('#btn')
        btn.addEventListener('click', function () {
            let files = $('#file1')[0].files
            if (files.length <= 0) {
                return alert('请选择文件上传')
            }
            let fd = new FormData()
            fd.append('avater', files[0])
            //发起jq的ajax请求
            $.ajax({
                method: 'post',
                url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                data: fd,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log('res', res);
                }

            })
        })

5.2 JQuery实现loading效果

5.2.1 ajaxStart(callback)

5.2.2 ajaxStop(callback)

六、 axios

6.1 什么是axios

 

Axios专注于网络数据请求的库,更加简单易用
比起JQuery axios更加轻量化,只专注于网络数据请求

6.2 axios发起GET请求

 

		 document.querySelector("#btn").addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/get'
            let obj = { name: 'zs', age: 21 }
            axios.get(url, { params: obj }).then(function (res) {
                console.log('res', res.data);
            })
        })

6.3 axios发起POST请求

 		document.querySelector('#btn2').addEventListener("click", function () {
            let url = 'http://www.liulongbin.top:3006/api/post'
            let obj = { name: 'zs', age: 21 }
            axios.post(url, obj).then(function (res) {
                console.log('res', res.data);
            })
        })

6.4 直接使用axios发起请求

使用axios发起get请求

		document.querySelector('#btn3').addEventListener("click", function () {
            let url = 'http://www.liulongbin.top:3006/api/get'
            let obj = { name: 'zs', age: 21 }
            axios({
                method: "GET",
                url: url,
                params: obj,
            }).then(function (res) {
                console.log('res', res.data);
            })
        })

 使用axios发起post请求

 		document.querySelector('#btn4').addEventListener("click", function () {
            let url = 'http://www.liulongbin.top:3006/api/post'
            let obj = { name: 'zs', age: 21 }
            axios({
                method: 'POST',
                url: url,
                data: obj,
            }).then(function (res) {
                console.log('res', res.data);
            })
        })