2.数据交换格式
2.1什么是数据交换格式
2.2XML
1.什么是XML
2.XML和HTML的区别
XML和HTML虽然都是标记语言,但是它们两者之间没有任何关系
- HTML被设计用来描述网站上的内容,是网页内容的载体
- XML被设计用来传输和存储数据,是数据的载体
3.XML的缺点
①XML格式臃肿,和数据无关的代码多,体积大,传输效率低
②在Javascript中解析XML比较麻烦
2.3JSON
1.什么是JSON
概念:JSON的英文全称是JavaScriptObjectNotation,即“JavaScript对象表示法”。简单来讲,JSON就是JavaScript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质是字符串。
作用:JSON是一种轻量级的文本数据交换格式,自作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小、更快、更易解析
2.JSON的两种结构
JSON就是用字符串来表示JavaScript的对象和数组。所以,JSON中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构。
对象结构:对象结构在JSON中表示为{ }括起来的内容。数据结构为{key:value,key:value,....}的键值对结构。其中,key必须是使用英文的双引号包裹的字符串,value的数据类型可以是数字,字符串,布尔值,null,数组,对象。
数组结构:数组结构在JSON中表示为{ }括起来的内容。数组结构为[“java”,"javascript",30,true....]
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型
3.JSON语法注意事项
①属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹
③JSON中不允许使用单引号表示字符串
④JSON中不能写注释
⑤JSON的最外层必须是对象或数组格式
⑥不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据
JSON的本质:用字符串来表示JavaScript对象数据或数组数据
4.JSON和JS对象的关系
JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。例如:
5.JSON和JS对象的互转(将JSON对象转换为JS对象)
要实现从JSON字符串转换为JS对象,使用JSON.parse()方法:
编程中,parse是指将一段文本或代码解析成计算机可读的语言或数据结构
要实现JS对象转换为JSON字符串,使用JSON.stringify()方法:
var xhr = new XMLHttpRequest()
xhr.open('GET', '请求地址')
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText) //输出的是JSON字符串格式
var result = JSON.parse(xhr.responseText)
console.log(result)
}
}
6.序列化和反序列化
把数据对象转换为字符串的过程,就叫做序列化,例如:调用JSON.stringify( )函数的操作,叫做JSON序列化。
把字符串转化为数据对象的过程,叫做反序列化,例如:调用JSON.parse( )函数的操作,叫做JSON反序列化。
3.封装自己的Ajax函数
3.1要实现的效果
3.2定义options参数选项
itheima()函数是我们自定义的AJax函数,它接收一个配置对象作为参数,配置对象中可以配置如下属性:
- method 请求的类型
- url 请求的URL地址
- data 请求携带的数据
- success 请求成功之后的回调函数
3.3处理data参数
需要吧data对象,转化成查询字符串的格式,从而提交给服务器,因此提前定义resolveData函数如下:
3.4定义itheima函数
在itheima()函数中,需要创建xhr对象,并监听onreadystatechange事件:
3.5判断请求类型
不同的请求类型,对应xhr对象的不同操作,因此需要对请求类型进行if...else...的判断:
4.XMLHttpRequest Level2的新特性
4.1认识 XMLHttpRequest Level2
1.旧版XMLHttpRequest的缺点
2. XMLHttpRequest Level2的新特性
①可以设置HTTP请求的时限
②可以使用FormData对象管理表单数据
③可以上传文件
④可以获得数据传输的进度信息3
4.2设置HTTP请求时限
有时,Ajax操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。新版本的XMLHttpRequest对象,增加了timeout属性,可以设置HTTP请求的时限:
xhr.timeout=3000
上面的语句,将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还有一个tiimeout事件,用来指定回调函数:
4.3FormData对象管理表单数据
Ajax操作往往用来提交表单数据。为了方便表单处理,HTML5新增了一个FormData对象,可以模拟表单操作:
4.4上传文件
新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件
实现步骤:
①定义UI结构
②验证是否选择文件
③向FormData中追加文件
④使用xhr发起上传文件的请求
⑤监听onreadystatechange事件
1.定义UI结构
2.验证是否选择了文件
3.向FormData中追加 文件
4.使用xhr发起上传文件请求
5.监听onreadystatechange事件
4.5显示文件上传进度
新版本的XMLHttpRequest对象中,可以通过监听xhr.upload.onprogress事件,来获取到文件的上传进度。语法格式如下:
将进度条显示出来:
1.导入需要的库
bootstrapt
5.JQuery的高级用法
5.1jQuery时限文件上传
1.定义UI结构
2. 验证是否选择了文件
3.向FormData 中追加文件
4.使用jQuery发起上传文件的请求
<body>
<input type="file" id="file1" />
<button id="btnUpload">上传文件</button>
<script>
$(function() {
$('#btnUpload').on('click', function() {
//1.将jQuery对象转化为DOM对象,并获取选中的文件列表
var files = $("#file1")[0].files
//2.判断是否选择了文件
if (files.length <= 0) {
return alert('请选择图片后再上传!')
}
var fd=new FormData()
fd.append("avatar",files[0])
//发起jquery的Ajax请求,上传文件
$.ajax({
method:'POST',
url:'http://www.liulongbin.top:3006/api/upload/avatar',
data:fd,
processData:false,
contentType:false,
success:function(res){
console.log(res)
}
})
})
})
</script>
5.2Jquery实现loading效果
1.ajaxStart(callback)
Ajax请求开始时,执行ajaxStart函数。可以在ajaxStart的callback中显示loading效果,示例代码如下:
//自jquery版本1.8起,该方法只能被附加到文档
$(document).ajaxStart(function(){
$('#loading').show()
})
注意:$(document).ajaxStart()函数会监听当前文档内所有的Ajax请求。
2.ajaxStop(callback)
Ajax请求结束时,执行ajaxStop函数。可以在ajaxStop的callback中隐藏loading效果,示例代码如下:
6.axios(导包)
6.1什么是axios
Axios是专注于网络数据请求的库。
相比于原生的AMLHttpRequest对象,axios简单易用
相比于jquery,axios更加轻量化,只专注于网络数据请求。
6.2axios发起GET请求
axios.get('url',{params:{/*参数*/}}).then(callback)
6.3axios发起POST请求
axios发起post请求的语法:
6.4直接使用axios发起请求
axios也提供了类似于jQuery中$.ajax()的函数,语法如下:
1. 直接使用axios发起GET请求
2.直接使用axios发起POST请求