Ajax 的基本使用

原创已于 2022-03-06 09:59:47 修改 · 690 阅读

0 ·

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

标签

#机器学习 #javascript #前端

于 2022-03-04 21:47:21 首次发布

ajax
1） ajax的作用：实现网页和服务器之间的数据交互
2）网页中请求资源的步骤：请求——处理——响应。客户端向服务器发送数据请求，服务器对请求进行处理，将处理后的结果响应给客户端。
3）请求数据的方式： GET/POST
4）请求数据的方法：使用XMLHttpRequest 对象（xhr）
1.1 使用XMLHttpRequest对象实现GET请求
步骤：
1）创建xhr对象
2）使用open方法设定请求方式和url
3）使用send方法发送请求
4）监听onreadystatechange

 <script>
        //  1. 创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 2. 使用open函数指定访问方式和url
        xhr.open('GET', 'http://liulongbin.top:3006/api/getbooks');
        // 3. 使用send函数发起ajax请求
        xhr.send()
        // 4. 监听onreadyrtatechange事件
        xhr.onreadystatechange = function(){
            // 4.1 监听xhr对象的请求状态，监听服务器的响应状态
            if(xhr.readyState === 4 && xhr.status === 200){
                // 4.2 打印服务器响应回来的数据
                console.log(xhr.responseText);
            }
        }
    </script>

1.2 使用XMLHttpRequest对象实现POST请求
步骤
1）创建xhr对象
2）使用open方法指定数据访问类型和url地址
3）设置Content-Type属性
4）调用send方法，同时传入数据
5）监听返回结果

 <script>
        // 1. 创建XMLHttpRequest对象
        // 2. 调用open方法
        // 3. 设置content-type属性 固定写法
        // 4. 调用send()函数，同时指定要发送的数据
        // 5. 监听onreadystatechange方法
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://liulongbin.top:3006/api/addbook');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('bookname=水浒传&author=施耐庵&publisher=出版社名字');
        xhr.onreadystatechange = function(){
            if(xhr.readyState ===4 &&xhr.status === 200){
                console.log(xhr.responseText);
            }
        }
    </script>

1.3 JSON
定义：JSON（javascript Object Notation），其本质是javascript的对象和数组的字符串表示
地位：JSON已经称为了主流的数据交互格式
作用：在计算机和网络之间传输数据
1.3.1 JSON的两种结构
1）数组结构
2）对象结构
1.3.2 JS和JSON之间的互相转化
1）序列化将js-> JSON 使用JSON.stringfy()
2）反序列化将JSON->js 使用JSON.parse()
1.4 XMLHttpRequest Level 2 新特性
1.4.1 新功能1——设置http的请求事件

var xhr = new XMLHttpRequest()
xhr.timeout = 3000   //设定请求时间
//请求超时后触发的函数
xhr.ontimeout = function(event){
    consloe.log('超时了')
}

1.4.2 新功能——FormData对象管理表单数据

 <script>
        //创建FormData对象
        var fd = new FormData();
        //加入属性
        fd.append('uname', 'rain');
        fd.append('psw', '123');
        // 创建xhr
        var xhr = new XMLHttpRequest();
        xhr.open('POST', URL地址)
        xhr.send(fd);
    </script>

2） FormData直接获取网页表单的值

<body>
    <form id="form"></form>
    <script>
        // 获取form元素
        var form = document.querySelector('#form');
        // 监听提交事件
        form.addEventListener('submit', function(e){
            // 阻止默认提交事件
            e.preventDefault()
            // 根据form表单创建FormData对象
            //创建FormData对象
            var fd = new FormData(form);

            // 创建xhr
            var xhr = new XMLHttpRequest();
            xhr.open('POST', URL地址)
            xhr.send(fd);

            ...
        })

    </script>

1.4.3 新功能3——上传文件
步骤：
1）定义UI结构
2）判断是否上传了文件
3）向ForData中追加文件
4）发送上传文件请求
5）监听onreadtstatechange事件

第一步

<!-- 定义ui结构 -->
    <input type="file" id="files" />
    <button id='btnupload'>上传</button>
    <img src="" alt="" id='imgs' width="800" />

第二步

 // 判断是否上传了文件
        var btn = document.querySelector('#btnupload');

        btn.addEventListener('click', function () {
            var file = document.querySelector('#files').files
            if (file.length <= 0) {
                alert('请上传文件');
            } else {
                 // 成功后的系列操作
            }
        })

第三步

// 判断是否上传了文件
        var btn = document.querySelector('#btnupload');

        btn.addEventListener('click', function () {
            var file = document.querySelector('#files').files
            if (file.length <= 0) {
                alert('请上传文件');
            } else {
                 // 第三步向ForData中追加文件
                  var xhr = new XMLHttpRequest();
                  var fd = new FormData();
                  // 讲文件添加到FormData中，key，value
                  fd.append('avatar', file[0]);
            }
        })

第四步

// 判断是否上传了文件
        var btn = document.querySelector('#btnupload');

        btn.addEventListener('click', function () {
            var file = document.querySelector('#files').files
            if (file.length <= 0) {
                alert('请上传文件');
            } else {
                 // 第三步向ForData中追加文件
                  var fd = new FormData();
                  // 讲文件添加到FormData中，key，value
                  fd.append('avatar', file[0]);
                  
                  //第四步
                  var xhr = new XMLHttpRequest();
                  xhr.open('POST', 'http://liulongbin.top:3006/api/avatar');
                  xhr.send(fd);
            }
        })

第五步

// 判断是否上传了文件
        var btn = document.querySelector('#btnupload');

        btn.addEventListener('click', function () {
            var file = document.querySelector('#files').files
            if (file.length <= 0) {
                alert('请上传文件');
            } else {
                 // 第三步向ForData中追加文件
                  var fd = new FormData();
                  // 讲文件添加到FormData中，key，value
                  fd.append('avatar', file[0]);
                  
                  //第四步
                  var xhr = new XMLHttpRequest();
                  xhr.open('POST', 'http://liulongbin.top:3006/api/avatar');
                  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('#imgs').src = 'http://www.liuongbin.top:3006' + data.url
                        }else{
                            console.log(data.message);
                        }
                    }
                    }
            }
        })

1.4.4 新功能4——显示上传进度

// 创建xhr对象
        var xhr = new XMLHttpRequest()
        // 监听xhr.upload的onprogress事件
        xhr.upload.onprogress = function(e){
            // e.lengthComputable是一个布尔值，表示当前上传资源是否具有可计算的长度
            if(e.lengthComputable){
                // e.loaded 表示已传输的字节
                // e.total 表述需要传输的字节
                var percentcomplete = Math.ceil((e.loaded / e.total) *100)
            }
        }

jQuery提供的Ajax
使用XMLHttpRequest 实现数据交互的方式太过于复杂，jQuery对其进行了封装，使用更加便捷
2.1 $.get()方法

$.get(url, data, callback)  //data和callback可以省略

2.2 $.post() 方法

$.post(url, data, callback)  //只有callback可以省略

2.3 $.ajax()

$.ajax({
    type: ''   //数据访问类型
    url: ''    // 访问地址
    data: { }  //传输数据
    success: function(res) //成功后的callback,res是返回的数据
})

笔记跟随：https://www.bilibili.com/video/BV1zs411h74a?p=53