Ajax(三)XMLHttpRequest的基本使用

Ajax(三)XMLHttpRequest的基本使用

一、XMLHttpRequest的基本使用

1、定义

浏览器为我们提供的一个内置对象(构造函数), 通过它我们可以向服务器发送请求, 并接受响应

$.ajax() 请求方法底层就是 jQuery 封装这个对象的一系列方法来实现的

2、使用xhr发起GET请求

  • 步骤:
    • 创建 xhr 对象

    • 调用 xhr.open() 函数

    • 调用 xhr.send() 函数

    • 监听 xhr.onreadystatechange 事件

  		// 1. 构建 xhr 实例对象
        var xhr = new XMLHttpRequest();
        // 2. 初始化请求 open(请求方式,url地址)
        xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks');
        // 3. 发送请求  send()
        xhr.send();
        // 4. 监听请求状态, 获取响应的数据
        xhr.onreadystatechange = function() {
     // 判断请求是否完成,HTTP请求状态码是否成功
            if (xhr.readyState == 4 && xhr.status == 200) {
        // 获取响应数据  
         console.log(xhr.responseText);
            }
        };
        // onload表示请求已经完成,和上面if判断作用相同
        xhr.onload = function() {
            // 获取响应数据
            console.log(xhr.responseText);
        }

**注意:**if判断代码中xhr.status不是返回数据中的status

3、了解xhr对象的readyState属性

  • xhr 请求的所有状态码
    • 0 (未初始化) ==> 请求还未初始化
    • 1 (正在加载) ==> 已建立服务器链接
    • 2 (加载成功) ==> 请求已接受
    • 3 (交互) ==> 正在处理请求
    • 4 (完成) ==> 请求已完成, 响应数据已传输

4、查询参数

  • 定义:在 url 末尾添加的以 ? 开头的参数,叫做查询参数

    比如: http://www.youxi.cn?hero=tank&money=99&skin=pink

  • 参数特征

    格式符合键值对的格式,多个键值对之间使用 & 符号进行连接

  • 作用

  1. 多个页面之间传递数据(从首页跳转到首页,显示登录名(location.search));

  2. 给服务器发送 get 请求的数据

5、get请求带参数的写法

把 参数 按键值对字符串的形式拼接到 url 后面

var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://www.liulongbin.top:3006/api/get?name=ZhangSan&&age=12&&sex=man');
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            };
        };

6、URL编码

浏览器中的 URL 中只允许出现字母, 符号和数字, 不允许出现汉字, 如果出现需要对其进行编码

  1. 编码的规则:

使用字母,数字和特殊符号对其他字符(如汉字)进行编码

  1. 浏览器内置的 URL 编码和解码方法

    encodeURI(参数) 对参数进行 URI 编码

    decodeURI(参数) 对参数进行 URI 解码

		var str = '2月6号放假'
        var str2 = encodeURI(str);
        console.log(str2);
        var str3 = decodeURI('%E6%94%BE%E5%81%87');
        console.log(str3);//反编译为 放假

7、post请求原生写法

		var xhr = new XMLHttpRequest();
        xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
        // 设置post请求参数的编码方式
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 设置post请求时,要传递键值对字符串
        xhr.send('bookname=熟虾&author=之颂&publisher=125');
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {               					 console.log(xhr.responseText);
            }
        }

二、数据交换格式

1、数据交换格式

客户端和服务端之间进行数据传输时, 需要使用公共的数据格式.。

JSON 是前后端开发中最常用的一种轻量级数据交换格式,除此之外还有 XML 这种带有语义化的数据格式。

  • XML 的英文全称是 EXtensible Markup Language,即可扩展标记语言
  • XML和HTML的区别:
    • HTML 被设计用来描述网页上的内容,是网页内容的载体
    • XML 被设计用来传输和存储数据,是数据的载体
    • 客户端向服务器发送数据利用的是XML,服务器向客户端发送数据利用的是HTML
  • XML的缺点
    • XML 格式臃肿,和数据无关的代码多,体积大,传输效率低
    • Javascript 中解析 XML 比较麻烦

2、JSON(JavaScript Object Notation )

JSON 可以理解为 js 中对象的字符串表示法, 本质上还是一个字符串。

  1. 概念:JSON 的英文全称是 JavaScript Object Notation,即“JavaScript 对象表示法”。

  2. 作用:JSON 是一种轻量级的文本数据交换格式,在作用上类似于 XML专门用于存储和传输数据,但

    JSONXML 更小、更快、更易解析

3、JSON 数据格式的注意

  1. 普通对象最外层使用 { } 包裹, 数组的最外层使用 [ ] 包裹

  2. 属性名和字符串必须是双引号括起来的字符串, 最后一个属性后不能有逗号(必须严格遵守)

  3. 属性值或数组元素可以是 number, string, boolean, array, null, object 6种

    ​ 但不能是 undefined 和 function

  4. 不能在 json 中填写注释

**JSON 的作用:**在计算机与网络之间存储和传输数据。

**JSON 的本质:**用字符串来表示 Javascript 对象数据或数组数据

4、JSONJS对象的关系

JSONJS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。

5、JSONJS对象的互转

  1. 要实现从 JSON 字符串转换为 JS 对象,使用 JSON.parse() 方法:
var obj=JSON.parse('{"a":"Hello","b":"World"}');
//结果是:{a:'Hello',b:'World'}
  1. 要实现从 JS 对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
var json=JSON.stringify({a:'Hello',b:'World'});
//结果是:'{"a":"Hello","b":"World"}'
  1. 总结:JSON.stringify() JSON.parse()

    1. todolist 本地存储, 只能存储字符串格式的数据, JSON.stringify()

    2. JS高级 深拷贝: JSON.parse(JSON.stringify(obj)) //生成的是一个新对象

    3. 把服务器返回的json字符串解析成js对象格式 JSON.parse()

6、序列化和反序列化

数据对象 转换为 字符串的过程,叫做序列化,例如:调用 JSON.stringify() 函数的操作,叫做 JSON 序列化。

字符串 转换为 数据对象的过程,叫做反序列化,例如:调用 JSON.parse() 函数的操作,叫做 JSON 反序列化。

三、XMLHttpRequest Level2的新特性

1、老版本 XMLHttpRequest 问题

  1. 只支持文本数据的传送,无法用来读取和上传二进制文件

  2. 传送和接收数据时,没有进度信息,只能提示有没有完成

2、新版本 XMLHttpRequest 特性

  1. 可以设置 HTTP 请求的超时时限

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

  3. 可以上传文件

  4. 可以获取数据请求的进度信息

3、为 ajax 请求设置超时限制

  • 设置超时时间(默认为毫秒)

    xhr.timeout = 超时时间

  • xhr 实例的超时事件

    xhr.ontimeout = fn

		var xhr = new XMLHttpRequest();
        xhr.timeout = 10;
     xhr.addEventListener('timeout',function() {		return alert('请求超时')});
            xhr.open('get', 'http://www.liulongbin.top:3006/api/get');
            xhr.send();
            xhr.onreadystatechange = function() {
 if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);
            }
        }

四、FormData对象管理表单数据

1、什么是FormData?

浏览器提供的一个内置对象(构造函数), 可以轻松管理表单数据的键值对 (key/value)

2、FormData 相关方法

  1. 添加一条数据 append()

  2. 查询一条数据 get()

  3. 设置一条数据 set()

  4. 遍历数据 forEach()

3、在 Ajax 中的使用

可以直接使用 send 方法发送 formData 格式的数据

// 1. 新建一个 FormData 对象
        var fd = new FormData();

        // 2. 添加一条数据: append()
        fd.append('bookname', '儒林外史');
        fd.append('author', '费瓦罗纳');
        fd.append('publisher', '圣埃蒂安');
        console.log(fd.get('author'));

        // 3. 设置一条数据: set()
        fd.set('publisher', '埃尔法');
        fd.forEach(item => {
            console.log(item);
        });
        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(xhr.responseText);
            }
        }

4、formData快速获取表单数据

使用 new FormData(原生form元素) 可以一次性获取表单中所有的数据

   $('form').submit(function(e) {
            e.preventDefault();
            var fd = new FormData(this);
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'http://www.liulongbin.top:3006/api/formdata');
            xhr.send(fd);
            xhr.onload = function() {
                return console.log(JSON.parse(xhr.responseText));
            }
        });

五、formData上传文件

1、案例:formData上传文件并显示文件上传进度(原生方法)

 $('#upload-btn').click(function() {
            // (原生文本选择框.files)
            var files = $('#file')[0].files;
            // 判断文件列表长度
            if (files.length <= 0) {
                return alert('请选择文件上传');
            };
            var fd = new FormData();
            // 向fd中添加一个数据
            fd.append('avatar', files[0]);

            var xhr = new XMLHttpRequest();

            // 绑定上传进度事件
            xhr.upload.onprogress = function(e) {
                // console.log(e.lengthComputable);
                // 判断当前文件是否可计算
                if (e.lengthComputable) {
                    console.log(parseInt(e.loaded / e.total * 100));
                    // 获取文件上传进度e.total表示总数据量, e.loaded表示已经上传的数据量
                    var percentage = parseInt(e.loaded / e.total * 100) + '%';
                    // 给进度条设置width样式属性和内容
                    $('#bar').css('width', percentage).text(percentage);
                };
            };
            // 为xhr绑定文件获取成功事件
            xhr.upload.onload = function() {
                $('#bar').removeClass().addClass('progress-bar progress-bar-success')
            }

            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar');
            xhr.send(fd);
            xhr.onload = function() {
                var res = JSON.parse(xhr.responseText)
                console.log(res);
                // 将地址给img标签
                $('img').prop('src', 'http://www.liulongbin.top:3006' + res.url);
            }
        })

2、jq版本文件上传

  • ajaxStart(callback)

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

    • 注意: $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求
  • ajaxStop(callback)

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

 $(document).ajaxStart(function() {
                $('#loading').show()
            });
            $('#upload-btn').click(function() {
                // (原生文本选择框.files)
                var files = $('#file')[0].files;
                // 判断文件列表长度
                if (files.length <= 0) {
                    return alert('请选择文件上传');
                };
                var fd = new FormData();
                // 向fd中添加一个数据
                fd.append('avatar', files[0]);

                $.ajax({
                    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                    method: 'post',
                    data: fd,
                    // 使用formdata 默认参数编码 multipart/form-data
                    contentType: false,
                    // 不需要对请求体中内容进行额外处理
                    processData: false,
                    // 发送ajax请求前调用
                    beforeSend: function() {
                        // console.log(123);
                        $('#loading').show()
                    },
                    success: function(res) {
                        console.log(res);
                        $('#loading').prop('src', 'http://www.liulongbin.top:3006' + res.url);
                    }
                })
            })

六、什么是axios

1、定义:

Axios 是专注于网络数据请求的库。

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

相比于 jQueryaxios 更加轻量化,只专注于网络数据请求。

2、axios发起GET请求

axios.get()

axios.get('http://www.liulongbin.top:3006/api/get', {
            params: {
                id: 10,
                age: 20
            }
        }).then(function(res) {
            console.log(res.data);
        }).catch(function(err) {
            console.log(err);
        })

3、axios发起POST请求

axios.post()

axios.post('http://www.liulongbin.top:3006/api/post', {
            name: '张三',
            age: 10,
            height: 170
        }).then(function(res) {
            console.log(res);
        }).catch(function(err) {
            console.log(err);
        })

4、直接使用axios发起请求

//发起get请求
axios({
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            method: 'get',
            params: {
                id: 1,
                bookname: '西游记'
            }
        }).then(function(res) {
            console.log(res.data);
        }).catch(function(err) {
            console.log(err);
        })
//发起post请求
        axios({
            url: 'http://www.liulongbin.top:3006/api/addbook',
            method: 'post',
            data: {
                bookname: '儒林外史',
                author: '年份酒偶发',
                publisher: '阿萨德刚'
            }
        }).then(function(res) {
            console.log(res.data);
        }).catch(function(err) {
            console.log(err);
        })
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱对恨错

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值