ajax笔记四

一 FormData的使用

（1）FormData对象管理表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理, 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.指定请求类型与URI地址
xhr.open('POsT', 'http://www. liulongbin.top: 3006/api/formdata')
// 5.直接提交FormData 对象，这与提交网页表单的效果，完全一样
xhr.send (fd)

FormData对象也可以用来获取网页表单的值，示例代码如下:

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

二 FormData上传文件

新版XMLHttpRequest对象,不仅可以发送文本信息，还可以上传文件。
实现步骤:
①定义UI结构

 
  <input type="file" id="file1" />
  
  <button id="btnUpload">上传文件button>
  <br />
  
  <img src="" alt="" id="img" width="800" />

②验证是否选择了文件

// 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
})

③向FormData中追加文件

     //创建FormData对象
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      // fd.append('自定义文件名',文件)，files是一个数组，取第一个文件所以索引为0
      fd.append('avatar', files[0])

④使用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)

⑤监听onreadystatechange事件

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

三 显示文件上传进度

（1）新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件,来获取到文件的上传进度。

 var xhr = new XMLHttpRequest()
  
      // 监听文件上传的进度（监听xhr.upload 的onprogress 事件）    
      xhr.upload.onprogress = function (e) {
        //e. lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度
        if (e.lengthComputable) {
          // e.loaded 已传输的字节
          // e.total 需传输的总字节
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
}}

（2）导入需要的库

 <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>
<!-- bootstrap 中的进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
    </div>
  </div>

（3）监听上传进度的事件

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

(4)监听上传完成的事件

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

四 jQuery实现文件上传

(1)定义UI结构

<script src="./1ib/jquery.js">script>
<input type="file" id="file1" />
<button id="btnUpload">上传button>
<br />
 <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />

（2）验证是否选择了文件

$('#btnUpload').on('click', function() {
// 1.将jQuery 对象转化为DOM对象，并获取选中的文件列表
   // $('#file1')是jQuery对象，通过加[0]转化为原生dom对象
var files = $('#file1')[0].files
// 2.判断是否选择了文件
if (files.length <= 0) {
return alert('请选择文件后再上传!')
}
})

（3）向FormData中添加文件

     //创建FormData对象
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      // fd.append('自定义文件名',文件)，files是一个数组，取第一个文件所以索引为0
      fd.append('avatar', files[0])

（4） 使用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(callback)

Ajax请求开始时，执行ajaxStart函数。可以在ajaxStart的callback中显示loading效果，示例代码如下: 

//自jQuery 版本1.8起，该方法只能被附加到文档
$ (document).ajaxStart (function () {
$('#loading').show ()
})

注意: $(document).ajaxStart()函数会监听当前文档内所有的Ajax请求。
(2) ajaxStop(callback)
Ajax请求结束时,执行ajaxStop函数。可以在ajaxStop的callback中隐藏loading效果,示例代码如下:

//自jQuery 版本1.8起，该方法只能被附加到文档
$ (document).ajaxStart (function () {
$('#loading').hide()
})

五 基于axios发送ajax请求 

axios发起get请求的语法:

axios.get('url', { params:{ /*参数*/ } }) . then (callback)

 具体请求示例：

 var url = 'http://www.liulongbin.top:3006/api/get'

      var paramsObj = { name: 'zs', age: 20 }

      axios.get(url, { params: paramsObj }).then(function (res) {

     //res.data是服务器返回的数据

        console.log(res.data)

      })

 axios发起post请求的语法: 

axios.post('url', { /*参数*/ }) . then (callback)

  具体请求示例：

 var url = 'http://www.liulongbin.top:3006/api/post'

      var dataObj = { address: '北京', location: '顺义区' }

      axios.post(url, dataObj).then(function (res) {

        console.log(res.data)

      })

 axios也提供了类似于jQuery中$.ajax()的函数,语法如下:

axios ({
method: '请求类型'，
url: ‘请求的URL地址"，
data: { /* POST数据*/ },
params: { /* GET参数*/ }
}) . then (callback)