VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • 原生Ajax && 上传文件 && axios

URL的组成；

       https://www.cnblogs.com/wangbojs/p/15339835.html
       https   通信协议
       www.cnblogs.com    服务器名称
       wangbojs/p/15339835.html    资源在服务器上具体的从存放位置

　　客户端与服务器通讯过程      请求=>处理=>相应

        1.客户端请求服务器  
        2.服务器处理这次请求
        3.服务器响应客户端

资源的请求方式

    get请求: 通常用于获取服务器资源(要资源)

            例如: 根据URL地址 从服务器获取HTML文件, css文件, js文件, 图片文件, 数据资源等
        POST请求: 通常用于向服务器提交数据(送资源)
            例如: 登录时,向服务器提交登录信息, 注册时向服务器提交注册信息

    Ajax

        Ajax是在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式, 就是 Ajax
        Ajax能然我们轻松实现网页与服务器之间的数据交互
        Ajax的应用场景 
            用户名检测, 注册用户时 通过Ajax的方式动态监测用户名是否被占用
            搜索提示, 当输入搜索关键字时, 通过Ajax的形式,动态加载搜索提示列表
            数据分页显示 当点击页码时, 通过Ajax的形式,根据页码值动态刷新表格的数据
            数据增删改查 都需要通过Ajax的形式来实现数据交互

　 使用原生js实现Ajax请求步骤 

        1. 创建xhr实例对象
        var xhr = new XMLHttpReuqest
        2. 调用xhr.open()函数

        xhr.open('请求方式','URL地址[GET方式下写:? + 查询字符串]')

        3. 调用xhr.send()函数
        xhr.send([POST方式下写查询字符串])
        4. 调用xhr.setRequestHeader()函数  固定写法且只有在POST请求会用到
        xhr.setRequestHeader('Content-Type','x-www-form-urlencoded')
        5. 监听xhr.onreadystatechange事件
        xhr.onreadystatechange = function(){
            // 固定写法
            if(xhr.readystate === 4 && xhr.status === 200){
                console.log(xhr.responeText)
            }
        }

原生Ajax的新特性

        xhr.timeout = 1000; // 设置请求时限
        xhr.ontimeout = function(){} // 设置请求超时后的回调函数

JSON

        JSON就是javascripe对象和数组的字符串表示法
        JSON的本质是字符串, 一种轻量级的文本数据交换格式, 专门用于存储和传输数据
        JSON的两种结构
            JSON就是用字符串来表示 javascript 的对象和数据
                例: {name:name} 转换为JSON {"name":"name"}
        JSON和JS对象互转
            JSON转换为JS JSON.parse(JSON格式的字符串)
            JS转换为JSON JSON.stringify(JS格式的对象和数组)
    

FormData对象 管理表单数据    使用这个对象的表单元素都必须有 name属性

        FormData传输简单的数据

            1. 获取表单元素
            2. new FormData(获取到的表单元素) 这样就得到了表单域内的所有数据
            3. 使用xhr对象

        FormData传输文件

            1. 获取表单域中的文件列表   注意此时的变量 files 是数组形式
            var files = document.queryselector('').files;
            2. 创建 FormData 实例化对象 把文件传过去
            var fd = new FormData(files[0])
            3. 使用 xhr 传参的时候把 fd 传过去就好了

 

            4. 计算文件上传进度 固定写法

            xhr.upload.onprogress = function(e){
                // e.lengthComputable 是一个布尔值, 表示当前上传的资源是否具有可计算的长度
                if(e.lengthComputable){
                    // e.loaded 已传输的字节
                    // e.total 需要传输的字节
                    var sum = Math.ceil((e.loaded / e.total)*100)
                }
            }
            // 上传完成事件
            xhr.upload.onload = function(){

 

            }

axios 专注于网络数据请求的库

                相比于原生的XMLHttpRequest对象, axios简单易用

　　get请求语法

                    axios.get(url,{params:请求数据}),then(function(res){
                        // 请求回调函数
                        // 需要注意的一点是 res.data是服务器返回的数据, res是axios经过重写的
                    })

    POST请求语法

                    axios.post('url',{参数}).then(function(res){
                        // 回调函数, 注意 res.data是服务器返回的数据
                    })

    axios请求语法

                    axios({
                        method:'请求类型',
                        url:'请求的URL地址',
                        data:{POST请求的数据}
                        params:{GET请求的数据}
                    }).then(function(res){
                        res.data 是服务器返回的数据
                    })
 
 
来源：https://www.cnblogs.com/wangbojs/p/15345118.html

相关教程