Java学习笔记-Day49 HTML5、ECMAScript6、Ajax

最新推荐文章于 2022-09-02 23:21:57 发布
最新推荐文章于 2022-09-02 23:21:57 发布
阅读量1.1k 收藏
点赞数
分类专栏： 笔记 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42141141/article/details/111241986
版权

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 一同使用，来显示任务的进度。

属性值描述
maxnumber规定任务一共需要多少工作。
valuenumber规定已经完成多少任务。
	<progress value="50" max="100"></progress>

（6）embed 标签定义嵌入的内容，比如插件，代替Object标签。

属性值描述
height像素px设置嵌入内容的高度。
srcurl嵌入内容的 URL。
typetype定义嵌入内容的类型。
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，元素无法获取焦点。
designModedocument对象的全局属性，设定当前网页内的元素是否可以编辑。

 

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输入类型为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全局属性，同时具备如下私有属性。

属性值描述
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

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类型：

FormatMIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

 
Audio标签的属性说明： Audio标签具备html全局属性，同时具备如下私有属性（Audio基本上具备除了调节大小外的全部Video的功能。）。

属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
looploop如果出现该属性，则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
srcurl要播放的音频的 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:需要转换的字符。
金海湖底有宝藏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Little-Books:EC关于ECMAScript，HTML5，Node.js和Linux的小书
05-17
小书 :books: 关于ECMAScript，HTML5，Node.js和Linux的小书。 书表 分类目录 图书 · · · · · · · · · Fastify Linux Docker · Kubernetes · OpenShift · Pulumi
ECMAScript5P12（原生Ajax）
weixin_48931100的博客
09-05 99
ECMAScript5P12（原生Ajax）
ECMAScript、DOM 和 BOM 、ajax
少波波波波少
10-14 1445
HTML DOM 教程 HTML DOM 定义了访问和操作 HTML 文档的标准方法。 DOM 将 HTML 文档表达为树结构。 HTML DOM 树 换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。 -------------------------------- HTML DOM
ECMAScript编写异步任务
Fairy的博客
02-19 331
一、基本的异步任务 JavaScript中编写异步任务使用的就是回调函数，如下面的例子： setTimeout(() => { callback() }, 1000); 这个例子是最简单的一个异步任务的例子：在1秒钟后执行回调函数 但是这种编写异步任务会有一个问题，就是容易产生回调地狱，因此提出使用下面的一些方式解决。 二、使用Promise编写异步任务以及Promise的A...
HTML5 基础知识，第 5 部分 ECMAScript 6 面向对象设计_介绍ECMAScript 6（简称 ES6）面向对象设计的知识与实践
weixin_47461068的博客
05-01 277
一、ECMAScript 6的来龙去脉 ECMAScript 6（简称 ES6）是 JavaScript 语言的新标准版本，它的第一版本6.0，也称ECMAScript 2015（简称 ES2015）已经在 2015 年 6 月正式发布了。其目标为使得 JavaScript 语言可以用来编写复杂的大型应用程序，既可以作为前端开发语言，运行于桌面系统的浏览器环境，及移动终端App的WebView控...
ecma262-6-cn:ECMAScript 6规范 中文翻译
05-16
###计划：翻译ECMAScript 6 语言规范至简体中文 ###Plan: To translate 《ECMA-262 6th Edition - ECMAScript:registered: 2015 Language Specification》 ###如果你也在做同样的事情，请联系我或者让我联系你。 ...
unicode-match-property-ecmascript:根据ECMAScript中用于RegExp Unicode属性转义的算法，将给定的Unicode属性或属性别名与其规范属性匹配
05-14
unicode匹配属性的电子书 unicode-match-property-ecmascript将给定的Unicode属性或与其规范的属性名称，而无需用于的算法应用。 认为它是松散匹配的严格替代方案。安装要以编程方式使用unicode-match-property-...
proposal-regexp-match-indices:ECMAScript RegExp匹配指数
05-11
ECMAScript的RegExp匹配指数 ECMAScript RegExp匹配索引提供了有关捕获的子字符串相对于输入字符串的开始的开始和结束索引的其他信息。 可以在NPM上的包中找到一个polyfill。 注意：该建议书以前被称为“ RegExp...
learn-ecmascript6-step-by-step:逐步学习EcmaScript6
05-03
Learn-EcmaScript6-Step-By-Step Learn EcmaScript6 Step By Step 本测试的所有结果使用的转换方式是： <!-- 加载Traceur编译器 --> [removed][removed] <!--将Traceur编译器用于网页--> [removed]...
audio中autoplay与autobuffer属性
u011088260的博客
07-23 8606
autoplay 布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。 autobuffer 布尔属性；指定后，视频会自动开始缓存，即使没有设置自动播放。该属性适用于视频被认为可能会播放（比如，用户导航到专门播放视频的页面，而不是那种嵌入视频还有其它内容的页面）。视频会一直缓存到媒体缓存满。 其中应有autobuffer属性可以拖动audio快进倒退，autoplay则
ES6 和 JavaScript 关系
weixin_49092012的博客
05-11 1293
1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA（欧洲计算机制造商协会European Computer Manufacturers Association），希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版 该标准从一开始就是针对JavaScript语言制定的，但是之所以...
ECMAScript 5与HTML5 的支持情况
javaSamBlog
03-19 248
ECMAScript 5与HTML5离我们越来越近了，触摸屏相关的API开发中，未来的web世界更加多姿多彩。 Object.getPrototypeOf 支持浏览器：firefox3.6 chrome4 http://codereview.chromium.org/518056 Object.getOwnPropertyDescriptor 支持浏览器：IE8 chrome4 ht...
ES6------ECMAScript6中Generator和yield的使用(可以很方便的调用ajax同步的哦)
COCOLI_BK的博客
11-14 281
介绍：Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。 形式上：Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。 function* helloWorldGenerator() { yield...
VMware虚拟机 Centos7 配置静态IP和DNS
qq_42141141的博客
08-20 8982
VMware虚拟机 Centos7 配置静态IP和DNS
Java学习笔记 - 微服务的链路追踪
qq_42141141的博客
12-14 4748
Java学习笔记 - 微服务的链路追踪1、微服务架构下的问题2、Spring Cloud Sleuth2.1 Sleuth简介2.2 相关概念2.3 链路追踪Sleuth入门案例3、Zipkin的概述4、Zipkin Server的部署和配置5、客户端Zipkin+Sleuth整合6、基于消息中间件收集数据6.1 RabbitMQ的安装与启动6.2 服务端启动6.3 客户端配置7、存储跟踪数据7.1 准备数据库7.2 配置启动服务端   1、微服务架构下的问题 在大型系统的微服务化构建中，一个系统会被拆分成
容器管理Rancher与容器监控
qq_42141141的博客
09-02 4022
Rancher是一个开源的企业级全栈化容器部署及管理平台。Rancher为容器提供一系列基础架构服务：CNI兼容的网络服务、存储服务、主机管理、负载均衡、防护墙等等，Rancher让上述服务跨越公有云、私有云、虚拟机、物理机环境运行，真正实现一键式应用部署和管理。influxDB是一个分布式时间序列数据库。cAdvisor提供时序数据库用于存储cAdvisor组件所提供的监控信息。Grafana是一个可视化面板（Dashboard），有着非常漂亮的图表和布局展示，功能齐全的度量仪表盘和图形编辑器。
微服务容器部署与持续集成（Jenkins）
qq_42141141的博客
08-27 2479
对于数量众多的微服务，手动部署是非常麻烦的做法，并且容易出错，所以本博客使用自动部署方式。Dockerfile是由一系列命令和参数构成的脚本，这些命令应用于基础镜像并最终创建一个新的镜像。持续集成（Continuous integration）简称CI，持续集成中的任何一个环节都是自动完成的，无需太多的人工干预，有利于减少重复过程以节省时间、费用和工作量。............
Git学习笔记 - 搭建GitLab服务器与Idea集成GitLab
qq_42141141的博客
08-20 2297
GitLab 是由GitLabInc.开发，使用MIT 许可证的基于网络的Git 仓库管理工具，且具有wiki 和issue 跟踪功能。使用 Git 作为代码管理工具，并在此基础上搭建起来的web 服务。GitLab CE为社区版，GitLab EE为企业版。
JavaScript高级程序设计（第3版）- 探索HTML5与ECMAScript5新特性
这本书是JavaScript编程领域的权威指南，针对的是最新版本的ECMAScript 5和HTML5标准。随着这两个标准的普及，许多专有实现和客户端扩展被正式纳入规范，为JavaScript提供了更多面向未来的功能。作者Nicholas C. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值