一.数据交换格式
1.XML
-
XML英文全称是EXtensible Markup Language,即可扩展标记语言。
-
XML与HTML相似，都是一种标记语言，但这两者无任何关系。
区别：
-
HMTL被设计用来描述网页上的内容，是网页内容的载体。
-
XML被设计用来传输和储存数据，是数据的载体。
XML的缺点：
-
格式臃肿，与数据无关代码较多，体积大，传输效率低。
-
在js中解析XML比较麻烦。
2.JSON
-
JSON英文全称是JavaScript Object Notation。
-
简单来说，就是JavaScript对象和数组的字符串表示方法。
-
JSON的本质就是字符串。
作用： JSON是一种轻量级的文本数据交换格式，专门用于传输和存储数据，它比XML更小、更快、更易解析。
两种结构：
对象结构：在JSON中表示为{}括起来的内容。数据结构为{key:value,key:value,...}的键值对结构。其中key必须是用英文的双引号包裹的字符串，value可以是数字、字符串、布尔值、null、数组、对象6种类型。
数组结构： 在JSON中表示{}括起来的内容。数据结构为["java","javascript",30,true...]。数组中的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
注：
-
属性名必须使用双引号包裹。
-
字符串类型的值必须使用双引号包裹。
-
JSON中不允许使用单引号表示字符串。
-
JSON中不能写注释。
-
JSON的最外层必须是对象或者数组格式。
-
不能使用undefined或函数作为JSON的值。
JSON与JS对象的互转
JSON字符串转到JS对象使用JSON.parse()方法
var obj = JSON.parse('{"a":"Hello","b":"World"}')
//结果是{a:'Hello',b:'World'}
JS对象转到JSON字符串使用JSON.stringify()方法
var json = JSON.parse({a:'Hello',b:'World'})
//结果是'{"a":"Hello","b":"World"}'
二.XHR Level2的新特性
1.设置HTTP请求时限
//用timeout属性来设置HTTP时限
xhr.timeout = 数值；
与之配套的还有一个timeout事件，用来指定回调函数
xhr.ontimeout = function(event){
alert（"请求超时"）
}
2.FormData的使用
利用FormDate进行表单提交，示例代码如下：
//新建FormData对象
var fd = new FormData();
//为FormData添加表单项
fd.append('uname','zs');
fd.append('upwd','123456');
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);
利用FormData获取网页表单的值，示例代码如下：
//获取表单元素
var form = doucment.querySelector('#form1');
//监听表单的submit事件
form.addEventListener('submit',function(e){
e.preventDefault();
//根据form表单创建FormData对象,会将表单数据自动填充到FormDate对象中
var fd = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');
xhr.send(fd);
xhr.onreadystatechange = function(){}
})
3.上传文件
4.显示文件上传进度
可以通过xhr.upload.onprogres事件来获取文件上传进度。
语法格式如下：
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = funtion(e){
//e.lengthComputable是一个布尔值，判断当前上传资源是否具有可计算长度。
if(e.lengthComputable){
//e.loaded是已传输字节
//e.total是需传输的总字节
var percentComplete = Math.cell((e.loaded/e.total)*100)
}
}
