js复习总结（四）

偷得浮生的狗子
83 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

书接上文，接着复习JS

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地址后添加参数，叫做查询字符串

www.liulongbin.top:3006/api/getbook…

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中的$('')

四、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追加文件——正常的请求

一个实例如下：

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

image-20210721220404845

image-20210722075622903

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

未完待续…… 开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

avatar
文章
阅读
粉丝