Java学习笔记-Day49 HTML5 和 ECMAScript6
一、HTML5
HTML5是万维网的核心语言、HTML规范的第五次重大修改。HTML5是标签、DOM接口、全局对象的升级。
1、HTML5的标签与全局属性
1.1、HTML5的兼容性
废弃标签仍然可用,但不建议使用。只有高版本浏览器才能基本兼容html5的新增标签与属性(例如IE10以上)。部分低版本浏览器支持部分html5新内容。
1.2、HTML5的使用场景
(1)手机网页制作
(2)在第三方打包工具配合下制作手机app。
(3)第三方app的开发工具(例如微信公众号)。
(4)动画以及手机游戏制作等。
1.3、HTML5与HTML4的区别
(1)取消了一些过时的HTML4标记,并增加了一些标签改善文档结构的功能,增强了html语义化。
(2)增加了用于移动端的事件类型。
(3)一些全新的表单输入对象。
(4)全新的,更合理的Tag以及DOM接口。
(5)离线缓存以及本地数据库。
(6)Canvas、SVG等图形处理
(7)音频视频处理。
(8)webworker、websocket等全局对象。
1.4、Html与xhtml的区别
xml:规范的标记语言,用来保存以及传输数据,w3c制定规范。
xhtml: 以xml的标准严格规范的html标准,2000年发布最早版本,W3C的推荐web网页开发标准。xhtml只是一个过渡的标准,2006年WHATWG与w3c共同完成html5标准制定,作为当前最新的网页开发标准。
1.5、HTML5中已经废弃的标签
HTML5中已经废弃的标签如下:Acronym、 applet 、basefont、big、center、dir、font、frame、frameset、m、noframes、noscript、s。
(1)取消了用于显示、布局类的标签例;如big、m、font等(在H5中推荐使用css来替代)。
(2)取消了早期框架标签;如frame、frameset(推荐使用iframe)。
(3)取消不长使用的标签;如noframes、noscript等。
废弃的标签基本上仍然可以被现在的浏览器解析,但不建议在项目开发中沿用。
1.6、浏览器的文档模式
文档类型声明(DOCTYPE声明)不属于HTML标签,标记语言的文档类型声明是用于通知浏览器以以下哪种方式解析标记语言。
(1)严格模式(标准模式):以其当前版本支持的最高标准呈现页面。
(2)混杂模式(怪异模式):页面以向后兼容的方式显示,防止老站点无法工作。
模式触发:
(1)DOCTYPE不存在或形式不正确会浏览器以混杂模式呈现网页。
(2)只声明Doctype,不引用任何dtd文件,以严格模式呈现网页(html5标准)。
<!DOCTYPE html>
(3)包含DTD和URI的DOCTYPE,严格模式呈现网页,以dtd文件对应的版本呈现网页。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
获取模式的方式:document.compatMode取值范围如下:
- CSS1Compat:严格模式。
- BackCompat:严格模式关闭(混杂模式)。
1.7、meta扩展
在HTML5中扩展了meta的charset属性。
(1)HTML5 声明文档使用的字符编码
<meta charset="utf-8" />
(2)HTML4 声明文档使用的字符编码
<meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1”>
1.8、布局的语义化标签
HTML5 保留了HTML4 大多数语义化标签,同时新增了若干的语义化标签,这些标签并不起显示作用,但增强了html的可读性,与div、span等类似,称为语义化标签。
(1)article:标签装载显示一个独立的文章内容,例如一篇文章、报导、小说。
(2)section :标签定义文档中的节(section、区段),例如一个小说中的一章节。
(3)aside:用来装载非正文类的内容,对于主题内容的说明。
(4)header :标签定义文档的页面头部,通常是一些引导和导航信息。
(5)footer : 标签定义 section 或 document 的页脚。
(6)nav :标签定义显示导航链接。
标签的使用场景解析:
1.9、其他扩展标签
(1)标题组标签(hgroup ):一般作为多个标题的容器。
<hgroup class="group">
<h4>HTML5</h4>
<h4>ECMAScript6</h4>
</hgroup>
(2)媒体标签(figure、figcaption):作为独立的媒体内容(例如图像、图表、照片、代码等等)的容器,同时包含对这些媒体的说明文字。
<figure>
<img src="img/1428-kffctca9748591.jpg" width="500px" height="300px">
<figcaption>篮球</figcaption>
<div style="clear: both;"></div>
</figure>
(3)mark标签:用于突出显示文本内容
<p>我的名字叫<mark>李雷</mark></p>
(4)详情标签(details、summary):details中可以定义默认显示标题(summary),以及标题对应的内容,通过点击标题显示和隐藏标题内容。open属性为是否打开。
<details open="open">
<summary>点击展开</summary>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</details>
(5)进度条标签(progress): 标签定义运行中的进度。结合 <progress>
标签与 JavaScript 一同使用,来显示任务的进度。
属性 | 值 | 描述 |
---|---|---|
max | number | 规定任务一共需要多少工作。 |
value | number | 规定已经完成多少任务。 |
<progress value="50" max="100"></progress>
(6)embed 标签定义嵌入的内容,比如插件,代替Object标签。
属性 | 值 | 描述 |
---|---|---|
height | 像素px | 设置嵌入内容的高度。 |
src | url | 嵌入内容的 URL。 |
type | type | 定义嵌入内容的类型。 |
width | 像素px | 设置嵌入内容的宽度。 |
<embed src="flash/11.swf" type="application/x-shockwave-flash"/>
1.10、新增全局属性
常用的新增全局属性说明:
属性 | 描述 |
---|---|
contenteditable | 规定当前元素的内容是否可以编辑(值为 true 或者 false)。 |
contextmenu | 规定当前元素的右键菜单对应的dom对象id(不兼容)。 |
data-yourvalue | 规定用户定义的自定义属性,在html5中规定自定义属性应该以data-开头。 |
draggable | 规定当前元素是否可以拖拽,但浏览器的默认行为会阻止拖拽行为,需要配合js以及拖拽的api来实现。 |
hidden | 规定当前元素是否显示。 |
tabindex | 设置当前元素获取焦点的顺序,默认是按照元素的位置(从上到下)获取焦点,在h5中若设定取值为-1,元素无法获取焦点。 |
designMode | document对象的全局属性,设定当前网页内的元素是否可以编辑。 |
1.11、新增标签的兼容性
HTML5扩展的标签、dom对象只有在高版本浏览器中兼容,HTML5扩展的语义化编程的标签在低版本浏览器中不识别,可以使用html5.js来解决,但只能解决部分语义化标签的兼容性。
Html5.js的实现思路: 网页加载时,html5js将不识别的元素修改为div、span的dom对象,并且设定默认样式。
解决步骤:
(1)下载html5shv.js。
(2)在head中引入html5shv.js(只能在head中)。
2、HTML5新增表单API
2.1、HTML5新增表单标签与属性
2.1.1、HTML5新增表单标签
(1)datalist :元素规定输入域的选项列表(input 和 datalist 之间通过 input标签的属性 list="id名"
连接)。
<input type="text" list="list1" />
<datalist id="list1">
<option value="search1">search1</option>
<option value="search2">search2</option>
<option value="search3">search3</option>
</datalist>
(2)output :用于不同类型的输出,比如计算或脚本输出,鉴于兼容性以及易用性,应该使用传统的方式进行计算。
2.1.1、HTML5新增表单属性
HTML5增加的表单增强属性:
属性 | 描述 |
---|---|
placeholder | 当输入框内无内容时,设定输入框默认显示的文字。通常用于文本框、搜索框等。 |
autocomplete | 设置是否将表单成功提交后将内容缓存到cookie中,下次输入时进行信息提示,取值为on/off,可用于form表单以及input系列标签(一般建议用localstorage取代)。 |
autofocus | 设定当前元素在网页加载时获得焦点。如果网页超过一个元素属性为autofocus,则作废,非赋值属性。 |
valueAsNumbe valueAsDate | 返回dom对象的value值转换为数字的结果。valueAsDate非H5标准,但在高版本浏览器中都兼容。 |
required | 设定当前元素为必填,若没有填写则表单无法提交。H5中增加了对表单数据进行验证,以及错误反馈的方式,但有很大的局限性,可参与文档。 |
2.2、新增输入类型
HTML5中增加了input标签的类型:
属性 | 描述 |
---|---|
输入类型为email。 | |
url | 输入类型为地址url。 |
number | 输入类型为数字。 |
range | 输入类型为滑块选择。 |
日期选择器 | date、 month、week、time、datetime、datetime-local |
search | 输入类型为查找。 |
color | 输入类型为颜色。 |
2.3、文件选择标签file扩展
2.3.1、文件选择标签file扩展属性
文件选择标签file增加了如下两个属性:
属性 | 描述 |
---|---|
multiple | 设定当前元素可以选取多个文件。 |
accept | 设定当前选择器可以选择的MIME类型或后缀名。 |
<form action="#" method="post">
<input type="file" id="file" name="file" multiple="multiple" accept="image/jpeg,image/png" /><br><br>
<input type="submit" value="提交" />
</form>
2.3.2、File对象
File对象:文件选择框选择的文件对象,封装了文件的基本信息。
获取方式:document.getElementById("file")
File对象属性:
属性 | 描述 |
---|---|
lastModifiedDate | 最后修改日期。 |
name | 文件名称。 |
size | 文件大小。 |
type | 文件的mime类型。 |
2.3.3、FileReader对象
FileReader:用于读取文件选择标签选择的File的Dom对象。
创建方式:var fr = new FileReader();
FileReader的方法:
方法 | 作用 |
---|---|
abort() | 中断读取操作 |
readAsBinaryString(file) | 将文件读取为二进制编码 |
readAsDataURL(file) | 将文件读取为DataURL编码 |
readAsText(file, [encoding]) | 将文件读取为文本 |
readAsArrayBuffer(file) | 将文件读取为arraybuffer |
FileReader的事件类型:
事件 | 描述 |
---|---|
onabort | 数据读取中断时触发。 |
onerror | 数据读取出错时触发。 |
onloadstart | 数据读取开始时触发。 |
onload | 数据读取成功完成时触发。 |
onloadend | 数据读取完成时触发,无论成功失败。 |
onprogress | 数据读取成功完成时触发。 |
2.4、媒体元素
HTML5之前的媒体播放:在HTML5之前视频、音频的播放需要借助其他组件实现(例如flash),因此需要安装浏览器的插件。
HTML5的媒体播放:HTML5新增了两个与媒体相关的标签,用于视频、音频播放,同时提供了控制视频、音频播放的API接口。
2.4.1、Video视频
2.4.1.1、Video视频标签
HTML文件添加Video标签:
<video src="video/Clip_480_5sec_6mbps_h264.mp4" id="video" controls="controls" width="500" height="300"></video>
Video标签的属性:Video标签具备html全局属性,同时具备如下私有属性。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
Video标签的兼容性检测方法:检测浏览器是否支持video标签。
<script type="text/javascript">
if(document.getElementById("video").canPlayType){
alert("可以使用video标签");
}
</script>
不可执行视频的信息提示:
<video src="video/Clip_480_5sec_6mbps_h264.mp4" id="video" controls="controls" width="500" height="300">
无法播放当前视频
</video>
source标签:video的子标签,可以为Video标签指定多个媒体源,Video按照从上到下的顺序检索第一个可以播放的视频源。
source标签的属性:
属性 | 描述 |
---|---|
src | 媒体资源的路径。 |
type | 媒体资源文件的类型,例如 type=“video/mp4”。 |
media | 播放媒体的客户端类型,默认all。 |
<video width="500" height="300" controls="controls">
<source src="video/Clip_480_5sec_6mbps_h264.mp4" type="video/mp4"></source>
<source src="video/Clip_480i_5sec_6mbps_new.mpg" type="video/mp4"></source>
</video>
兼容性的解决方案:使用source标签指定多个媒体源以及flash资源。浏览器会选择可以加载的第一个视频资源播放,降低了浏览器无法播放的风险。
2.4.1.2、Video对象
Video对象(HTMLVideoElement):Video的DOM对象。封装了控制视频播放的属性及方法。如下属性为video对象属性。
Video对象的只读属性:
属性 | 描述 |
---|---|
duration | 媒体文件的播放时间长度,以秒为单位。 |
paused | 获取视频是否为暂停状态。 |
ended | 获取视频是否为结束状态。 |
startTime | 返回最早的播放开始时间,一般是0。 |
error | 返回错误状态。 |
currentSrc | 返回当前播放或已经加载文件的路径。 |
videoWidth、videoHeight | 返回视频的固有或自适应的宽度和高度。 |
Video对象的控制属性:
属性 | 描述 |
---|---|
autoplay | 设定或获取自动播放。 |
loop | 设定或获取是否自动循环。 |
currentTime | 设定获取当前播放的时间。 |
controls | 设定或获取是否有控制条。 |
volume | 设定或获取当前音量(0-1)。 |
muted | 设定或获取是否静音。 |
autobuffer | 通知播放器在播放开始前是否进行缓冲加载,在autoplay设定的情况下,无法使用。 |
width、height | 设定视频显示大小,但有可能与视频固有高度宽度不符合。 |
Video对象的控制函数:
方法 | 描述 |
---|---|
addTextTrack() | 向视频添加新的文本轨道。 |
canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
load() | 重新加载视频元素。 |
play() | 开始播放视频。 |
pause() | 暂停当前播放的视频。 |
Video对象的私有事件类型:
事件 | 描述 |
---|---|
onabort | 在退出时运行的脚本。 |
oncanplay | 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。 |
onended | 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。 |
onerror | 当在文件加载期间发生错误时运行的脚本。 |
onpause | 当媒介被用户或程序暂停时运行的脚本。 |
onplay | 当媒介已就绪可以开始播放时运行的脚本。 |
2.4.2、Audio音频标签
Audio标签与Video标签的使用方式基本一致。
目前Audio标签支持三种音频格式文件:MP3、 Wav 和 Ogg。
音频格式的MIME类型:
Format | MIME-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
Audio标签的属性说明: Audio标签具备html全局属性,同时具备如下私有属性(Audio基本上具备除了调节大小外的全部Video的功能。)。
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 规定视频输出应该被静音。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的音频的 URL。 |
二、ECMAScript 6.0
ECMAScript 6.0(ES6),是 JaveScript 的下一个版本标准,2015.06 发版。
ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。
目前各大浏览器基本上都支持 ES6 的新特性,其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好,IE7 ~ IE11 基本不支持 ES6。
1、ES6的基本特性
1.1、let 命令和const 命令
在ES6以前,var关键字声明变量,无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部),这就是函数变量提升,例如:
function aa() {
if(bool) {
var test = "hello world"
} else {
console.log(test)
}
}
以上的代码实际上是:
function aa() {
var test // 变量提升
if(bool) {
test = "hello world"
} else {
//此处访问test,值为undefined
console.log(test)
}
//此处访问test,值为undefined
}
所以不用关心bool是否为 true 或者 false,实际上无论如何test都会被创建声明。
接下来ES6登场:
通常使用let声明变量,const声明常量,let和const都是块级作用域。块级作用域就是在一个函数内部 ,在一个代码块内部。
let用于声明变量。let 命令用来声明局部变量,let声明的变量,不能进行重复的声明,且只能在 let 命令所在的代码块内有效,不存在变量提升。看以下代码:
function aa() {
if(bool) {
let test = "hello world"
} else {
//test 在此处访问不到
console.log(test)
}
}
const用来声明常量,常量的值在运行期不会发生变化,常量名通常大写,不能进行重复的声明,值也不能修改。看以下代码:
const name = 'tom'
name = 'jerry' //再次赋值此时会报错
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="btn" id="" value="" />
<input type="button" name="btn" id="" value="" />
<input type="button" name="btn" id="" value="" />
<br>
<input type="button" name="btn1" id="" value="" />
<input type="button" name="btn1" id="" value="" />
<input type="button" name="btn1" id="" value="" />
<script type="text/javascript">
console.log(a);//报错:Uncaught ReferenceError: a is not defined
console.log(b);//undefined
{
//let声明的是局部变量,只在所在的代码块中有效
let a = 12;
//var声明的是全局变量
var b = 22;
}
console.log(a);//报错:Uncaught ReferenceError: a is not defined
console.log(b);//输出2
//const声明的是常量,只能赋值一次
const PI = 3.14;
PI = 3.1415926;//报错:Uncaught TypeError: Assignment to constant variable
//let声明的变量存在变量提升
let btns = document.getElementsByName("btn");
for (let i = 0; i < btns.length; i++) {
console.log("i1:"+i);
btns[i].onclick=function(){
console.log("i2:"+i);
btns[i].style.background="red";
}
}
//var声明的变量存在变量提升
console.log("i3:"+i);
let btns1 = document.getElementsByName("btn1");
for (var j = 0; j < btns1.length; j++) {
console.log("j1:"+j);
btns1[j].onclick=function(){
console.log("j2:"+j);
btns1[j].style.background="red";
}
}
console.log("j3:"+j);
</script>
</body>
</html>
1.2、解构赋值
解构赋值是对赋值运算符的扩展,是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了,也方便了复杂对象中数据字段获取。
(1)数组赋值:var a = 1; var b = 2; var c = 3;
在ES6中允许写成 var [a, b, c] = [1, 2, 3];
(2)对象的解构赋值:
let { foo, bar } = { foo: ‘aaa’, bar: ‘bbb’ };
// foo = ‘aaa’
// bar = ‘bbb’
let { baz : foo } = { baz : ‘ddd’ };
// foo = ‘ddd’
1.3、字符串的遍历器接口
ES6为字符串添加了遍历器接口,使得字符串可以被 for…of 循环遍历。
<script type="text/javascript">
for (let codePoint of 'foo') {
console.log(codePoint)
}
</script>
1.5、Class基本语法
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本 上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
class Star{
constructor(name,sex,skill){
this.name = name;
this.sex = sex;
this.skill = skill;
}
}
class SuperStar extends Star{
constructor(name,sex){
super(name,sex,"开车");
}
dance(){
console.log(this.name+"会跳舞!");
}
toString(){
return this.name+","+this.sex;
}
static showinfo(){
console.log("我的名字叫:"+this.name);
}
}
let s = new SuperStar("tom","男");
s.dance();
console.log(s.toString());
SuperStar.showinfo();
</script>
</body>
</html>
1.6、模板字符串
模板字符串相当于加强版的字符串,反引号 ` 除了定义普通字符串,还可以用来定义多行字符串。还可以在字符串中加入变量和表达式。
(1)普通字符串
<script type="text/javascript">
let string = `Hello'\n'world`;
console.log(string);
// "Hello'
// 'world"
</script>
(2)多行字符串
<script type="text/javascript">
let string = `Hello,
World,
JavaScript`;
console.log(string);
// Hello,
// World,
// JavaScript
</script>
(3)字符串插入变量和表达式。变量名写在 ${}
中,${}
中可以放入 JavaScript 表达式。
<script type="text/javascript">
let name = "Tom";
let age = 26;
let info = `My Name is ${name},I am ${age+1} years old.`
console.log(info);
// My Name is Tom,I am 27 years old.
</script>
1.7、对象简写
<script type="text/javascript">
var person = {
sayHello: function() {
console.log("Hello");
}
}
person.sayHello(); //"Hello"
var person = {
//简写
sayHello() {
console.log("Hello");
}
}
person.sayHello(); //"Hello"
</script>
1.8、Rest参数
Rest参数用来表示不确定参数个数,例如,...变量名
,由…加上一个具名参数标识符组成。具名参数只能放在参数列表的最后一个,并且有且只有一个Rest参数。可以用操作数组的方式操作Rest参数。
<script type="text/javascript">
function f(a,b,c,...arr){
console.log(arr.length);
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
}
f(1,2,3);//0
f(1,2,3,4);//1 //4
f(1,2,3,4,5);//2 //4 5
</script>
1.9、箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是:参数 => 函数体。
<script type="text/javascript">
let a = function(){
console.log("a");
}
a();
//箭头函数
let b = ()=>{
console.log("b");
}
b();
//如果函数只有一条语句的话,可以省略{}
let c = (name)=>console.log("c:"+name);
c("tom");
//如果参数列表只有一个参数的话,可以省略()
let d = name=>console.log("d:"+name);
d("tom");
</script>
1.10、模块化导入导出
模块化导入导出, export 命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。一个js文件就是一个模块,该文件内部的所有变量,外部无法获取,如果希望外部能够读取模块内部某个变量,就必须使用export关键字输出该变量。
- myexport.js
export let name="小明";
- myimport.js
import * as obj from './myexport.js'
console.log(obj.name)
- mymodule.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="module" src="./js/myimport.js"></script>
</body>
</html>
1.11、promise对象
通过Ajax访问,如果使用原生JavaScript或封装起来的JavaScript,就会出现回调地狱,为了避免回调地狱的出现,使用promise方式调用。promise对象是异步编程的一种解决方案。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
三、Ajax
Web的传统模型:客户端向服务器发送一个请求,服务器返回整个页面。
Ajax模型:数据在客户端与服务器之间独立传输,服务器不再返回整个页面,而只返回可用信息。
页面刷新(非局部刷新):从这个页面跳到另一个页面,再跳回这个页面。
局部刷新:获取到数据,在页面的局部进行刷新。
Ajax是局部刷新,异步请求。
Ajax的执行原理:Ajax不用刷新整个页面便可与服务器通讯的办法。
Ajax的技术组成:Ajax实际上是几种技术以一种全新的方式聚合在一起的方式。
- 服务器端语言:服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
- XML (eXtensible Markup Language,可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML 是其中的一种选择。
- HTML和 CSS(Cascading Style Sheet,级联样式单)标准化呈现;
- DOM(Document Object Model,文档对象模型)实现动态显示和交互;
- 使用XMLHTTP组件XMLHttpRequest对象进行同步或异步数据读取,非w3c标准
- 使用JavaScript绑定和处理所有数据。
1、发送AJAX的get请求
1.1、XHR对象
XHR对象:AJAX核心对象,是XMLHttpRequest对象的缩写,封装在window对象中,封装了发送AJAX请求、接收响应的属性以及方法。最早是在IE5中以ActiveX组件的形式实现的,现在已经被所有高级浏览器兼容。
- Internet Explorer把XMLHttpRequest实现为一个ActiveX对象。
- 其他浏览器(Firefox、Safari、Opera…)把它实现为一个window对象的内置对象window.xmlHttpRequest。
- 浏览器虽然获取XHR对象的方法不同,但对象内的属性和方法确相同。
创建兼容的XHR对象
//1、创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
1.2、预备发送请求
open(method, url, asynch):open 方法允许程序员用一个Ajax调用向服务器发送请求。
- method:请求类型,类似 “GET”或”POST”的字符串。若需要向服务器发送数据,用POST,若使用GET请求,则可以在url地址栏传递参数,但原则上字符数量不超过2000,且不同服务器解码方式不同容易造成乱码。
- url:路径字符串,可以为get请求传递参数,有些浏览器会把多个请求的结果缓存在同一个URL,造成网页更新不及时,可在url中增加时间戳避免缓存。
- asynch:表示请求是否要异步传输,默认值为true。同步传输将导致网页等待期间无法操作,建议使用异步传输。
1.3、发送请求
send(data):根据open方法设定的参数,发送实际http请求指令。
参数说明:
- data:将要传递给服务器的字符串(字符类型)。
注意事项:
- 若选用的是 GET 请求,则不会发送任何数据。
- post请求发送的数据类型为用=分开的名值对,如果需要传送JSON对象,则需要转型。
1.4、完整的发送AJAX的get请求
//1、创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//2、预备发送请求
xhr.open("GET","http://rap2api.taobao.org/app/mock/238982/api/students",true);
//3、发送请求
xhr.send(null);
2、接收响应
接收服务器响应依靠XHR的如下接口实现:
(1)onreadystatechange:服务器响应状态改变的事件属性。
(2)readyState:表示Ajax请求的当前状态
(3)status:服务器返回的http响应状态,如200代表正常404代表没找到资源。
(4)responseText:服务器返回的字符格式。
(5)responseXML:服务器返回的XML格式(前端开发中使用很少)。
注意:xhr上述属性都是由服务器端修改,而非客户端修改,因此是只读属性。
2.1、onreadystatechange事件
onreadystatechange:服务器响应状态改变的事件属性,值为函数类型。服务器会通知客户端当前的通信状态,每次 readyState 属性的改变都会触发 readystatechange 事件
2.2、readyState
readyState:表示Ajax请求的当前状态。它的值用数字代表。
取值范围:
- 0 代表未初始化。 还没有调用 open 方法。
- 1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用。
- 2 代表已加载完毕。send 已被调用。请求已经开始。
- 3 代表交互中。服务器正在发送响应。
- 4 代表完成。响应发送完毕。
注意事项:
- readyState 值的变化会因浏览器的不同而有所差异。但是当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4
- 编写时应注意把onreadystatechange赋值编写在open之前。
2.3、status
status:服务器发送的响应状态码。
常用状态码及其含义:
- 404 没找到页面(not found)。
- 403 禁止访问(forbidden)。
- 500 内部服务器出错(internal service error)。
- 200 一切正常(ok)。
- 304 没有被修改(not modified)。
注意事项:通过XHR.status和 200 或 304 比较,可以确保服务器是否已发送了一个成功的响应。
responseText:服务器返回的响应数据,字符类型。
- XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML、XML或普通文本,这取决于服务器发送的内容。
- 当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。
responseXML:服务器返回的响应数据,格式为xml,字符类型,不建议使用。
- 如果服务器返回的是 XML, 那么数据将储存在 responseXML 属性中。
- 只用服务器发送了带有正确头部信息的数据时, responseXML 属性才是可用的。 MIME 类型必须为 text/xml。
2.3、完整的接收响应信息
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status ==200 ){
console.log(xhr.responseText);
console.log(typeof xhr.responseText);
}
}
3、发送AJAX请求和接收响应
发送AJAX请求的步骤:
(1)创建XMLHttpRequest对象。
(2)调用open方法,预备发送请求。
(2)调用send方法,发送请求。
(3)通过onreadystatechange事件接收响应。
<script type="text/javascript">
//1、创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//2、预备发送请求
xhr.open("GET","http://rap2api.taobao.org/app/mock/238982/api/students",true);
//3、发送请求
xhr.send(null);
//4、接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
console.log(typeof xhr.responseText);//string
console.log(xhr.responseText);//返回的结果是字符串
let obj = JSON.parse(xhr.responseText);//JSON.parse将字符串解析成对象
console.log(typeof obj);//object
obj.students.forEach((v,k)=>{
console.log(v.id+","+v.name+","+v.age+","+v.email);
});
}
}
</script>
4、JSON
JSON(JavaScript Object Notation):一种简单的数据格式,比xml更轻巧。
JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的基本规则就是无序的名值对,但严格意义上名称要用“ ”
包裹。数据值只能为数字、字符、数组、布尔、JSON对象。例如:{”flag”:true}
、{“fav”:[“java”,”js”]}
。
JSON对象存在嵌套关系,可以无限嵌套。例如:{"key1":{"key11":{"key111":"val11"}}}
。
4.1、字符与JSON格式相互转换
JSON格式的转换:JSON是一种数据格式,以字符格式传输。
ECMAscript中扩展了字符与JSON格式相互转换的方式。
(1)String JSON.stringify(obj)
:将ECMAscript对象转换为字符。
- String :返回类型。
- JSON:window对象的全局属性,但只有在高版本浏览器中兼容。
- stringify:JSON对象的全局方法,将目标对象转换为字符。
- obj:需要转换的对象。
(2)Obj JSON.parse(Str)
:将JSON格式的字符转换为ECMAscript对象。
- obj:返回类型,对象。
- str:需要转换的字符。