XMLHttpRequest的基本使用

原创已于 2022-03-07 21:07:34 修改 · 6.2k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

Yl郁

关注

标签

#javascript #前端 #vue.js

分类前端开发

代码可运行

于 2022-01-15 21:39:55 首次发布

本文详细介绍了XMLHttpRequest对象的基本使用方法，包括发送GET和POST请求的过程，并提供了如何封装AJAX函数的具体实例。此外还讲解了JSON数据格式的要求及转换方法。

XMLHttpRequest （简称 xhr ）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。

一、发送get请求

//创建Xhr对象
var xhr = new XMLHttpRequest()
//调用open函数
xhr.open('GET','url地址')
//调用send函数
xhr.send()
//监听onreadystatechange事件
xhr.onreadystatechange = function() {
if(xhr.readystate === 4 && xhr.status === 200) {
console.log(xhr.responseText)
}
}

二、发送post请求

        //创建xhr对象
        var xhr = new XMLHttpRequest()
        //调用open函数
        xhr.open('POST','url地址')
        //设置Content-Type属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        //调用send函数
        xhr.send('(键值对形式的参数)bookname=三十六计&author=老子')  
        //监听onreadystatechange事件
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

查询字符串：在url地址后面拼接参数 url?id=1

数据交换格式：就是服务器和客户端之间用来传输与交换数据的格式。

JSON格式本质是字符串（用来传输与存储数据）

有固定的格式要求

JSON字符串，表示以{ }或[ ]括起来的结构，里面可以放：字符串、数字、布尔值、null、数组、对象6种类型。

要求：

1、字符串必须用双引号，键也是双引号；

2、不能用undefined或函数作为JSON的值。

两种转换方法

序列化：数据对象转换为字符串：

JSON.stringify(obj)

反序列化：字符串转换为数据对象：

JSON.parse(json_str)

自己封装ajax函数

function alter(data) {
    var arr = []
    for(var k in data) {
        var str = k + '=' + data[k]
        arr.push(str)
    }
    return arr.join('&')
}

function getData(option) {
var xhr = new XMLHttpRequest()
var qs = alter(option.data)
if(option.method.toUpperCase() === 'GET') {
xhr.open(option.method,option.url + '?' + qs)
xhr.send()
} else if(option.method.toUpperCase() === 'POST') {
xhr.open(option.method,option.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)
      option.success(result)
    }
}
}

formdate对象(原生方法可以一次性获取表单数据添加到formdate对象中)

new FormDate

  var fd = new FormData()
  fd.append('avatar',data[0])

Ajax Level2 新特性

设置请求超时时长
xhr.timeout = 500
xhr.ontimeout = function () {}
$('form').serialize(), 一次性获取表单中的所有数据，jQuery 提供了 serialize() 函数

<body>
    <input type="file" name="files" id="files">
    <br />
    <button id="btn">上传文件</button>
    <br />
    <img src="" alt="">
    <script>
        $('#btn').on('click', function () {
            var data = $('#files')[0].files
            if (data.length <= 0) {
                return alert('请上传文件！')
            }
            // console.log(data);
            var fd = new FormData()
            fd.append('avatar',data[0])
            // console.log(fd);
            var xhr = new XMLHttpRequest()
            xhr.open('POST','url')
            xhr.send(fd)
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                  var result =  JSON.parse(xhr.responseText)
                //   console.log(result);
                  $('img').attr('src','url' + result.url)
                }
            }
        })
    </script>
</body>