第五章：Ajax高级

小王超会敲代码

于 2022-08-13 13:47:55 发布

阅读量163

点赞数

分类专栏： ajax 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/wcy_0522/article/details/126318909

版权

ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第五章：Ajax高级

5.1：XMLHttpRequest的基本使用

什么是XMLHttpRequest

XMLHttpRequest(简称xhr)是浏览器提供JavaScript对象，通过他，可以请求服务器上的数据资源。之前所学的jQuery中的Ajax函数，就是基于xhr对象封装出来的。

使用xhr发起GET请求

步骤：

创建xhr对象。
调用xhr.open()函数创建请求。
调用xhr.send()函数发起请求。
监听xhr.onreadystatechange事件。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}

xhr对象的readyState属性

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态。每个Ajax请求必然处于以下状态中的一个：

值	状态	描述
0	UNSENT	XMLHttpRequest对象已被创建，但尚未调用open方法
1	OPENED	open()已经被调用
2	HEADRS_RECEIVED	send()方法已经被调用，响应头也已经被接收
3	LOADING	数据接收中，此时response属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

查询字符串

定义：查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。

格式：将英文?放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中。
URL编码与解码
1. 什么是URL编码
  
  URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符。如果URL中需要包含中文这样的字符，则必须对中文进行编码(转义)。
  
  URL编码的原则：使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。
  
  通俗理解：使用英文字母去表示非英文字符。
2. 如何对URL进行编码与解码
  - encodeURI()：编码的函数
  - decodeURI()：解码的函数

使用xhr发起POST请求

步骤：

创建xhr对象。
调用xhr.open()函数创建请求。
设置Content-Type属性(固定写法)。
调用xhr.send()函数发起请求。
监听xhr.onreadystatechange事件。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.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);
    }
}

5.2：数据交换格式

什么是数据交换格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。

前端领域，经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少，所以，我们重点要学习的数据交换格式就是JSON。
XML
1. 什么是XML
  
  XML的英文全称是EXtensible Markup Language，即可扩展标记语言。因此，XML和HTML类似，也是一种表示语言。
2. XML和HTML的区别
  
  XML和HTML虽然都是标记语言，但是，他们两种之间没有任何的关系。
  - HTML被设计用来描述网页上的内容，是网页内容的载体。
  - XML被设计用来传输和存储数据，是数据的载体。
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J5NA9Kih-1660369597682)(图片\11.png)]
3. XML的缺点
  - XML格式臃肿，和数据无关的代码多，体积大，传输效率低。
  - 在JavaScript中解析XML计较麻烦。
JSON
1. 什么是JSON
  
  概念：JSON的英文全称是JavaScript Object Notation，即“javascript对象表示法”。简单来讲，JSON就是JavaScript对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，因此，JSON的本质就是字符串。
  
  作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析。
2. JSON的两种结构
  
  JSON就是用字符串来表示JavaScript的对象和数组。所以，JSON中包含对象和数组两种结构，通过这个两种结构的相互嵌套，可以表示各种复杂的数据结构。
  
  对象结构：对象结构在JSON中表示{}括起来的内容。数据结构为{ key : value, key : value, .... }的键值对结构。其中，key必须是使用英文的双引号包裹的字符串， value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
  
  数组结构：数组结构在JSON中表示为[]括起来的内容。数据结构为[ "java", "javascript", 30, true ... ]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
3. JSON语法注意事项
  - 属性名必须使用双引号包裹。
  - 字符串类型的值必须使用双引号包裹。
  - JSON中不允许使用单引号表示字符串。
  - JSON中不能写注释。
  - JSON的最外层必须是对象或数组格式。
  - 不能使用undefined或函数作为JSON的值。
  JSON的作用：在计算机与网络之间存储和传输数据。
4. JSON和JS对象的互转
  - 要实现从JSON字符串转换为JS对象，使用JSON.parse()方法。
```
var jsonStr = '{"a": "Hello", "b": "world"}';
var obj = JSON.parse(jsonStr);
console.log(obj);
```
  - 要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法。
```
var obj2 = { a: 'hello', b: 'world', c: false };
var str = JSON.stringify(obj2);
console.log(str);
```
5. 序列化和反序列化
  - 把数据对象转换为字符串的过程，叫做序列化，例如：调用JSON.stringify()函数的操作，叫做JSON序列化。
  - 把字符串转换为数据对象的过程，叫做反序列化，例如：调用JSON.parse()函数的操作，叫做JSON反序列化。

5.3：XMLHttpResquest Level2新特性

认识XMLHttpRequest Level2
1. 旧版XMLHttpRequest的缺点
  - 只支持文本数据的传输，无法用来读取和上传文件。
  - 传送和接收数据时，没有进度信息，只能提示有没有完成。
2. 新版MLHttpRequest Level2的新功能
  - 可以设置HTTP请求的时限
  - 可以使用FormData对象管理表单数据
  - 可以上传文件
  - 可以获得数据传输的进度信息
设置HTTP请求时限

有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限。
```
xhr.timeout = 3000;
```
上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还要一个timeout事件，用来指定回调函数。
```
xhr.ontimeout = function(event) {
    alert('请求超时！');
}
```

FormData对象管理表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作：

var fd = new FormData();
fd.append('uname', 'zs');
fd.append('upwd', '123456');

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(JSON.parse(xhr.responseText));
    }
}

上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。

实现步骤：

定义UI结构。

<input type="file" id="file1">
<button id="btnUpload">上传文件</button>	<br>
<img src="" alt="" id="img" width="800">

验证是否选择了文件。

 var btnUpload = document.querySelector('#btnUpload');
btnUpload.addEventListener('click', function () {
    var files = document.querySelector('#file1').files;
    if (files.length <= 0) {
        return alert('请选择要上传的文件');
    }
})

向FromData中追加数据。

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

使用xhr发起上传文件的请求。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);

监听onreadystatechange事件。

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        if (data.status === 200) {
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url;
        } else {
            console.log('图片上传失败！' + data.message);
        }
    }
}

显示文件上传进度：监听上传进度的事件

xhr.upload.onprogress = function (e) {
    if (e.lengthComputable) {
        var procentComplete = Math.ceil((e.loaded / e.total) * 100);
        console.log(procentComplete);
        $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%');
    }
}

5.4：axios

什么是axios

Axios是专注于网络数据请求的库。相比于原生的XMLHttpRequest对象，axios简单易用。相比于jQuery，axios更加轻量化，只关注与网络数据请求。

axios发起GET请求

axios发起get请求的语法：

axios.get('url', { params: {/*参数*/} }).then(callback);

具体代码：

var url = 'http://www.liulongbin.top:3006/api/get';
var paramsObj = { name: 'zs', age: 20 };
axios.get(url, { params: paramsObj }).then(function (res) {
console.log(res.data);
})

axios发起POST请求

axios发起POST请求的语法：

axios.post('url', { /*参数*/ } ).then(callback);

具体代码

var url = 'http://www.liulongbin.top:3006/api/post';
var dataObj = { address: '北京', location: '顺义区' };
axios.post(url, dataObj).then(function (res) {
    console.log(res.data);
})

直接使用axios发起请求

axios也提供了类似于jQuery中的$.ajax()的函数，语法如下：

axios ({
    method: '请求类型',
    url: '请求的URL地址',
    data: { /* POST数据 */ },
    params: { /* GET参数 */ }
}).then(callback);

小王超会敲代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第五章：Ajax高级

第五章：Ajax高级
复制链接

扫一扫

专栏目录

第五章：Ajax高级

第五章：Ajax高级

5.1：XMLHttpRequest的基本使用

5.2：数据交换格式

5.3：XMLHttpResquest Level2新特性

5.4：axios

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