JSON Editors

Ajax学习（3）XMLHttpRequest的使用+数据交换格式（JSON）

XMLHttpRequest的使用

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，可以请求服务器上的数据资源。（jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。）

在这里插入图片描述

使用xhr发起GET请求

创建 xhr 对象–>调用 xhr.open() 函数–>调用 xhr.send() 函数–>监听 xhr.onreadystatechange 事件

<body>
  <script>
    // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('GET','url')
    // 3. 调用 send 函数
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function() {
      //判断请求成功
      //请求状态：readyState，服务器响应状态：status
      if(xhr.readyState === 4 && xhr.status === 200){
        console.log(xhr.responseText)
      }
    }

  </script>

</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
xhr对象的readyState属性

在这里插入图片描述

xhr发起带参数的GET请求

在xhr.open 中，为 URL 地址指定参数。具体格式：将英文的‘?’放在url末尾，在加上参数,如果有多个参数，使用’&'符号进行分隔。例如url?id=1&name=lizhi

URL编码与解码

URL 地址中，只允许出现英文相关的字母、标点符号、数字.如果 URL 中需要包含中文这样的字符，则要对中文字符进行编码。简单来说就是使用英文字符去表示非英文字符。

浏览器提供了 URL 编码与解码的 API，分别是：
encodeURI() 编码
decodeURI() 解码

<body>
  <script>
    var str = '李志'
    //将中文编码
    var str2 = encodeURI(str)
    console.log(str2)

    //解码
    var str3 = decodeURI('%E6%9D%8E')
    console.log(str3)

    var str4 = decodeURI('%E5%BF%97')
    console.log(str4)
  </script>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

输出结果：

在这里插入图片描述

使用xhr发起POST请求

创建 xhr 对象–>调用 xhr.open() 函数–>设置 Content-Type 属性（固定写法）–>调用 xhr.send() 函数，同时指定要发送的数据–>监听 xhr.onreadystatechange 事件

<body>
  <script>
    // 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('POST', 'url')
    // 3. 设置 Content-Type 属性
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数
    xhr.send('参数=值&参数=值&...')
    // 5. 监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

数据交换格式

服务器和客户端之间进行数据传输和交换的格式。前端常见的两种数据交换格式分别是XML和JSON

XML（了解）

XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。XML被用来传输和存储数据，是数据的载体。

JSON

JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。JSON 的本质是字符串,它使用文本表示一个 JS 对象或数组的信息。
JSON 是一种轻量级的文本数据交换格式，作用类似于 XML，用于存储和传输数据，但比 XML 更小、更快、更易解析。

JSON包含对象和数组两种结构，相互嵌套可以组成复杂的数据结构。

//对象结构：使用{}括起来；数据结构使用键值对结构：{key:value....},key必须使用英文双引号包裹
//value数据类型可以是数字，字符串，布尔值，null,数组和对象

{
    "name": "lizhi",
    "age": 22,
    "gender": "男",
    "address": null,
    "hobby": ["吃饭", "睡觉"]
}

//数组结构：使用[]括起来； 数据结构：["java",22,true...]
//数组中数据类型可以是数字，字符串，布尔值，null,数组和对象
[ 100, 200, 300.5 ]
["lizhi","lisa"]
[ true, false, null ]
[ { "name": "lizhi", "age": 22}, { "name": "lisa", "age": 26} ]
[ [ "苹果", "榴莲", "椰子" ], [ 4, 50, 5 ] ]

//属性名和字符串类型必须使用双引号包裹
//不能有单引号表示字符串，不能写注释

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

JSON和JS对象的互相转换：

（1）JSON–>JS对象，使用JSON.parse()方法，把字符串转换为数据对象的过程，叫做反序列化

（2）JS对象–>JSON，使用JSON.stringify()方法，把数据对象转换为字符串的过程叫做序列化

<body>
  <script>
    //把json转换为js对象
    // var jsonStr = '{"a": "Hello", "b": "world"}'
    //console.log(typeof jsonStr)
    // var obj = JSON.parse(jsonStr)
    // console.log(obj)
    //console.log(typeof jsonStr)

    // 把js对象转换为json
    var obj2 = { a: 'hello', b: 'world', c: false }
    var str = JSON.stringify(obj2)
    console.log(str)
    console.log(typeof str)
  </script>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
XMLHttpRequest Level2新特性

旧版XMLHttpRequest缺点是只支持数据传输，无法读取和上传且没有进度显示

新特性：

设置HTTP请求的时限

//设置请求时限
xhr.timeout = 3000

//过了时限，自动停止请求，调用函数：
 xhr.ontimeout = function(event){
     alert('请求超时！')
 }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

可以使用FormData对象管理表单数据

     	// 1. 新建 FormData 对象
      var fd = new FormData()
      // 2. 为 FormData 添加表单项
      fd.append('username', 'lizhi')
      fd.append('passward', '123456')
      // 3. 创建 XHR 对象
      var xhr = new XMLHttpRequest()
      // 4. 指定请求类型与URL地址
      xhr.open('POST', 'url')
      // 5. 直接提交 FormData 对象，与提交网页表单的效果一样
      xhr.send(fd)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

FormData对象也可以获取网页表单的值

 // 获取表单元素
 var form = document.querySelector('#form1')
 // 监听表单元素的 submit 事件
 form.addEventListener('submit', function(e) {
    e.preventDefault()
     // 自动将表单数据填充到 FormData 对象中
     var fd = new FormData(form)
     var xhr = new XMLHttpRequest()
xhr.open('POST', 'url')
     xhr.send(fd)
     xhr.onreadystatechange = function() {}
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

可以上传文件

<body>
  <input type="file" id="file1" />
  <!-- 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- img来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    //获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      //获取到用户选择的文件列表
      //验证是否有上传文件
      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', 'url')
      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 = 'url' + data.url
          } else {
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

可以获得数据传输进度的信息

//结合上面传输文件案例添加进度条
//使用Bootstrap渲染进度条关键代码
//需要导入Bootstrap.js和jquery.js
...
 <!-- 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>
...
...
 // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          //e.loaded表示已传输字节
          //e.total需要传输的总字节
          //Math.ceil取整
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条
          //使用jquery库的方法添加属性
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }
xhr.upload.onload = function () {
    $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
补充jquery的两个方法

（1）ajaxStart(callback)

Ajax 请求开始时，执行 ajaxStart 函数。

（2）ajaxStop((callback)

Ajax 请求结束时，执行 ajaxStop 函数。

相关工具

JSON格式化

在线JSON格式化工具，支持压缩和美化

JSON验证

验证JSON格式是否正确

JSON转换

JSON转XML、CSV等格式

JSON美化

美化JSON数据，提高可读性