Ajax加强

Ajax加强

一、XMLHttpRequest(简称xhr）

浏览器专门负责请求数据资源的对象，

1、使用xhr发起GET请求

创建对象——调用open(‘get/post’, ‘url’)函数——调用send()——监听oateadystatechange事件

<script>
    // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    // 3. 调用 send 函数
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {//这是固定写法
        // 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }
  </script>

1.1readyState属性表示当前Ajax所处的状态

0 对象被创建但未调用open（）

1 open（）已经调用

2 send（）已调用，响应头被接收

3 response已经包含部分数据

4 Ajax请求完成

1.2发起带参数的请求

直接在url地址后添加参数，叫做查询字符串

http://www.liulongbin.top:3006/api/getbooks?id=1

1.3查询字符串

？放在字符串开头，再加上参数=值，并且用&分割就行

2、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

1、编码与解码

encodeURI(‘黑马’)//afsfsfaesfa

decodeURI(‘afsfsfaesfa’)//黑马

3、发送post请求

<script>
    // 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. 监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

二、JSON

包含对象结构和数组结构

对象结构中的key必须是双引号包裹，value可以是其他类型数字、字符串、布尔值、null、数组、对象

{
“name” : “zs” ,
“age” : 20，
“gender”: “男”，
“address”: null,
“hobby”: [“吃饭”， “睡觉”, “打豆豆”]
}

数组结构的类型[XXXXX]

[ “java”, “python”, “php” ]
[ 100， 200， 300.5 ]
[ true, false, null ]
[ { “name”: “zs”， “age”: 20}, { “name”: “ls”, “age”: 30} ]
[ [ “苹果”，“榴莲”，"椰子”]，[4，50，5] ]

json其实是js的字符串化

json和js的互转(序列化和反序列化) 对象到字符串叫序列化

var jsonStr = '{"a": "zs", "b":12}'
var obj = JSON.parse(jsonStr)
var obj1 = JSON.stringify(obj)

<script>
    var xhr = new XMLHttpRequest()
    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)//JSON结构的字符串
        console.log(typeof xhr.responseText)//类型string

        var result = JSON.parse(xhr.responseText)//js 对象结构的
        console.log(result)
      }
    }
  </script>

三、封装自己的Ajax函数

实现成jQuery中的$(’’)

function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }

  return arr.join('&')
}

// var res = resolveData({ name: 'zs', age: 20 })
// console.log(res)

function itheima(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数对象，转换为 查询字符串
  var qs = resolveData(options.data)

  if (options.method.toUpperCase() === 'GET') {
    // 发起GET请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

以下是函数的参数类型

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

    itheima({
      method: 'post',
      url: 'http://www.liulongbin.top:3006/api/addbook',
      data: {
        bookname: '水浒传',
        author: '施耐庵',
        publisher: '北京图书出版社'
      },
      success: function (res) {
        console.log(res)
      }
    })
  </script>

四、XHR lecel2的新特性

旧版的无法读取和上传文件

新特性：可以设置请求时限，formdata管理表单数据，上传文件，获得传输的进度信息

1、设置请求时限

xhr.timeout = 3000;//超过3秒自动终止HTTP请求

xhr.ontimeout = function(){ alart(‘超时了’)

}

2、FormData对象管理表单数据

var fd = new FormData();//创建对象
fd.append('uname', 'zs');//向对象中添加表单行
fd.append('upwd', '123');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'asjfjaiejfiopqwaejug');
xhr.send(fd);
xhr.onreadystatechage = function(){
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
    }
}

也可以直接获得网页表单中的值

获取表单元素——监听表单元素submit事件——阻止事件调用——创建一个formdata对象并将表单元素放进去（它会自动获取表单的元素和值）——正常的xhr提交

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

3、上传文件

定义UI结构——验证是否选择了文件——向FormData追加文件——正常的请求

一个实例如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 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')//上传文件的方式必须是post
      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>
</body>

</html>

4、显示文件的上传进度

xhr.upload.onprogress事件

var xhr = new XMLHttpRequest()

      // 监听文件上传的进度
      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 + '%')
        }
      }

jquery实现loading效果

ajaxStart(回调函数function（){

} 这个是监听document的所有Ajax请求

ajaxStop（callback）监听Ajax完成的事件

五、axios

专注于网络数据请求的库

axios.get(‘url’, {params: { }}).then(callback)

document.querySelector('#btn1').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsObj = { name: 'zs', age: 20 }
      axios.get(url, { params: paramsObj }).then(function (res) {
        console.log(res.data)
      })
    })

axios.post(‘url’, {canshu }).then(callback)

document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '北京', location: '顺义区' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })

一个类似于$.ajax()的操作

document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })