目录
一、传统的前后端交互方式
1.1、异步和同步的概念
- 同步(synchronous) —— 指一个时间段内系统只能有一个进程在执行
- 异步(asynchronous) —— 指一个时间段内系统可以有多个进程在执行
1.2、传统前后端交互的原理
传统的前后端交互过程:
传统的前后端交互方式(无AJAX)是同步交互的方式,同步的过程只允许有一个进程在执行。
服务器在处理数据的时候,客户端不能进行任何操作,处于一个阻塞的状态。
1.3、传统前后端交互方式的缺点
- 传统的Web网站,提交表单,需要重新加载整个页面
- 如果服务器长时间未能返回Response,则客户端将会无响应,用户体验很差
- 服务器返回Response后,浏览器需要加载整个页面,对浏览器的负担也是很大的
- 浏览器提交表单后,发送的数据量大,造成网络的性能问题
二、AJAX简介
2.1、Ajax概念
AJAX = 异步JavaScript和XML
AJAX是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。
可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
2.2、Ajax原理
在解释Ajax之前,可以先看一个"领导想找小李汇报工作"的例子:
领导想找小李问点事,就委托秘书去叫小李,自己就接着做其他事件,直到秘书告诉他小李已经到了,最后小李跟领导汇报工作。
Ajax请求数据流程与"领导想找小李汇报一下工作"类似:
使用Ajax的程序,服务端在处理数据的时候,客户端浏览器依然可以执行其他的操作,并没有阻塞状态,也就是一个时间段内可以有多个进程在执行。
Ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。
XHR扮演的角色相当于秘书,使得浏览器可以发出HTTP请求和接收HTTP响应。
XHR能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据。也就是说可以使用XHR对象取得新数据,然后再通过DOM将新数据插入到页面中。
Ajax虽然名字中包含XML的成分,但Ajax通信与数据格式无关;这种技术就是无须刷新页面即可从服务器取得数据,但不一定是XML数据。
Ajax的应用案例:
- 搜索引擎的搜索词动态提示
- 无刷新验证用户名的唯一性
2.3、Ajax的优缺点
①Ajax优点:
- 使用异步方式与服务器通信,页面不需要重新加载,页面无刷新,用户体验好
- 按需求取数据,减少服务器的负担
- 使得Web应用程序更为迅捷地响应用户交互
- Ajax基于标准化的、并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行
- 浏览器的内容和服务器代码进行分离。页面的内容全部由JavaScript来控制,服务器端负责逻辑的校验和从数据库中拿数据
②缺点:
- 安全问题:将服务器端的方法暴露出来,黑客可利用这一点进行攻击
- 大量JS代码,容易出错
- Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过多;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等
- 可能破坏浏览器后退按钮的正常行为
- 一些手持设备(如手机、PAD等)自带的浏览器现在还不能很好的支持Ajax
三、XMLHttpRequest对象
3.1、IE7之前版本的XHR对象
IE5是第一款引入XHR对象的浏览器,在IE5中XHR对象是通过MSXML库中的一个ActiveX对象实现的。
因此,在IE中可能会遇到三种不同版本的XHR对象,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0。
要使用MSXML库中的XHR对象,即兼容IE7之前版本的浏览器,需要编写这样的一个函数:
//适用于IE7之前的版本
function createXHR(){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
for(var i = 0; i < 3; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
// 调用函数创建XHR对象
var xhr = createXHR();
这个函数会尽力根据IE中可用的MSXML库的情况创建最新版本的XHR对象。
3.2、IE7+和其他浏览器的XHR对象
IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象。
在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest构造函数:
var xhr = new XMLHttpRequest();
3.3、所有浏览器的XHR对象
如果只想支持IE7及更高版本,那么大可丢掉前面定义的createXHR函数,而只用原生的XHR实现。
但是,如果必须还要支持IE的早期版本,那么则可以在这个createXHR()函数中加入对原生XHR对象的支持:
function createXHR(){
if(typeof XMLHttpRequest != undefined){ //检测原生对象是否存在
return new XMLHttpRequest();
}else if(typeof ActiveXObject != undefined){ //检测ActiveX对象是否存在
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
for(var i = 0; i < 3; i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available.");
}
}
//创建XHR对象
var xhr = createXHR();
由于其他浏览器中对XHR的实现与IE最早的实现是兼容的,因此就可以在所有浏览器中都以相同方式使用上面创建的xhr对象。
四、XHR的用法
4.1、open()方法
在使用XHR对象时,要调用的第一个方法是open(),它接受3个参数:
- 要发送的请求的类型("get"、"post"等)
- 请求的URL
- 表示是否异步发送请求的布尔值
示例:
xhr.open("get", "example.php", false); //启动一个请求,以备发送
这行代码会启动一个针对example.php的GET请求。
需要说明三点:
- 一是URL相对于执行代码的当前页面(当然也可以使用绝对路径)
- 二是调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。
- 只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误。
4.2、send()方法
在调用了open()方法之后,如果要发送特定的请求,必须调用send()方法。
send()方法接受一个参数,即要作为请求主体发送的数据。
如果不需要通过请求主体发送数据,则必须传入null。
//启动一个请求,以备发送
xhr.open("get", "example.txt", false);
//发送请求
xhr.send(null);
由于这次请求是同步的,JavaScript代码会等到服务器响应之后再继续执行。
4.3、XHR对象的属性
在收到响应后,响应的数据会自动填充XHR对象的属性。相关属性简介如下:
- responseText —— 作为响应主体被返回的文本
- responseXML —— 如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档。
- status —— 响应的HTTP状态(HTTP状态码)
- statusText —— HTTP状态的说明(HTTP状态码的相应文本)
- readyState —— 表示请求/响应过程的当前活动阶段,只有异步请求的情况下才可以检测到
在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。
可以将HTTP状态代码为200作为成功的标志。此时,responseText属性的内容已经就绪,而且在内容类型正确的情况下,responseXML也应该能够访问了。
状态码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本,也意味着响应是有效的。
为确保接收到适当的响应,应该像下面这样检查上述这两种状态代码:
//启动一个请求,以备发送
xhr.open("get", "example.txt", false);
//发送请求
xhr.send(null);
if((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)){ //成功响应
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);
}
无论内容类型是什么,响应主体的内容都会保存到responseText属性中;
而对于非XML数据而言,responseXML属性的值将为null。
像前面这样发送同步请求当然没有问题,但多数情况下,还是要发送异步请求,才能让JavaScript继续执行而不必等待响应。
异步请求情况下,可以检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。
readyState属性可取的值如下:
- 0 —— 未初始化。尚未调用open()方法
- 1 —— 启动。已经调用open()方法,但尚未调用send()方法
- 2 —— 发送。已经调用send()方法,但尚未接收到响应
- 3 —— 接收。已经接收到部分响应数据
- 4 —— 完成。已经接收到全部响应数据,而且已经可以在客户端使用了
只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。
可以利用这个事件来检测每次状态变化后readyState的值。
示例:
//创建XHR对象
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);
}
}
};
//启动一个请求,以备发送
xhr.open("get", "example.txt", true); //异步请求
//发送请求
xhr.send(null);
另外,在接收到响应之前还可以调用abort()方法来取消异步请求:
xhr.abort();
调用这个方法后,XHR对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。
4.4、HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用,有的也没有什么用。
XHR对象也提供了操作这两种头部(即请求头部和响应头部)信息的方法。
默认情况下,在发送XHR请求的同时,还会发送下列头部信息:
- Accept —— 浏览器能够处理的内容类型
- Accept-Charset —— 浏览器能够显示的字符集
- Accept-Encoding —— 浏览器能够处理的压缩编码
- Accept-Language —— 浏览器当前设置的语言
- Connection —— 浏览器与服务器之间连接的类型
- Cookie —— 当前页面设置的任何Cookie
- Host —— 发出请求的页面所在的域
- Referer —— 发出请求的页面的URL。注意,HTTP规范将这个头部字段拼写错了,为了保证与规范一致,也只能将错就错了。这个英文单词的正确拼法应该是referrer
- User-Agent —— 浏览器的用户代理字符串
使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接收两个参数:
- 头部字段的名称
- 头部字段的值。
服务器在接收到这种自定义的头部信息之后,可以执行相应的后续操作。
要成功发送请求头部信息,必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。
示例:
//启动一个请求,以备发送
xhr.open("get", "example.txt", true); //异步请求
xhr.setRequestHeader("MyHeader", "MyValue");
//发送请求
xhr.send(null);
调用XHR对象的getResponseHeader()方法并传入头部字段名称,可以取得相应的响应头部信息。
调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。
示例:
var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();
在服务器端,也可以利用头部信息向浏览器发送额外的、结构化的数据。
在没有自定义信息的情况下,getAllResponseHeaders()方法通常会返回如下所示的多行文本内容:
4.5、GET请求
GET是最常见的请求类型,最常用于向服务器查询某些信息。
必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器。
对XHR而言,位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。
查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾。
而且所有名-值对都必须由和号(&)分隔,例如:
xhr.open("get", "example.php?name1=value1&name2=value2", true);
下面这个函数可以辅助向现有URL的末尾添加查询字符串参数:
function addURLParam(url, name, value){
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
这个函数接受三个参数:
- 要添加参数的URL
- 参数的名称
- 参数的值
下面是使用这个函数来构建请求URL的示例:
var url = "example.php";
//添加参数
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
//初始化请求
xhr.open("get", url, false);
4.6、POST请求
POST请求通常用于向服务器发送应该被保存的数据。
POST请求应该把数据作为请求的主体提交。
POST请求的主体可以包含非常多的数据,而且格式不限。
在open()方法第一个参数的位置传入"post",就可以初始化一个POST请求,例如:
xhr.open("post", "example.php", true);
发送POST请求的第二步就是向send()方法中传入某些数据。
由于XHR最初的设计主要是为了处理XML,因此可以在send()中传入XML DOM文档,传入的文档经序列化之后将作为请求主体被提交到服务器。
当然,也可以在此传入任何想发送到服务器的字符串。
默认情况下,服务器对POST请求和提交Web表单的请求并不会一视同仁,因此,服务器端必须有程序来读取发送过来的原始数据,并从中解析出有用的部分。
可以使用XHR来模仿表单提交:
首先,将Content-Type头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型。
其次,使用serialize()函数将页面中表单的数据序列化为字符串。
示例:
function submitData(){
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("post", "postexample.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));
}
这个函数可以将ID为"user-info"的表单中的数据序列化之后发送给服务器。
与GET请求相比,POST请求消耗的资源会更多一些。
从性能角度来看,以发送相同的数据计,GET请求的速度最多可达到POST请求的两倍。
五、XMLHttpRequest 2级
XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来,而XMLHttpRequest 2级则进一步发展了XHR。
5.1、FormData
现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型。
FormData为序列化表单以及创建于表单格式相同的数据(用于通过XHR传输)提供了便利。
下面的代码创建了一个FormData对象,并向其中添加了一些数据:
var data = new FormData();
data.append("name", "Nicholas");
这个append()方法接收两个参数:键和值。
分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。
通过向FormData构造函数中传入表单元素,也可以用表单元素的数据预先向其中填入键值对:
var data = new FromData(document.forms[0]);
创建了FormData的实例后,可以将它直接传给XHR的send()方法,如下所示:
xhr.open("post", "postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。
XHR对象能够识别传入的数据类型是FormData的实例,并配置适当的头部信息。
5.2、超时设定
XMLHttpRequest 2级规范为XHR对象添加了一个timeout属性,表示请求在等待响应多少毫秒之后就终止。
在给timeout设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件。
示例:
//启动一个请求,以备发送
xhr.open("get", "example.txt", true);
xhr.timeout = 1; //将超时设置为1秒钟
xhr.ontimeout = function(){
alert("Request did not return in a second.");
}
//发送请求
xhr.send(null);
5.3、overrideMimeType()方法
overrideMimeType()方法用于重写XHR响应的MIME类型。
因为返回响应的MIME类型决定了XHR对象如何处理它,所以提供一种方法能够重写服务器返回的MIME类型是很有用的。
示例:
假设,服务器返回的MIME类型是text/plain,但数据中实际包含的是XML。
根据MIME类型,即使数据是XML,responseXML属性中仍然是null。
通过调用overrideMimeType()方法,可以保证把响应当作XML而非纯文本来处理。
//启动一个请求,以备发送
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
//发送请求
xhr.send(null);
5.4、进度事件
Progress Events规范定义了客户端服务器通信有关的事件。
有以下6个进度事件:
- loadstart —— 在接收到响应数据的第一个字节时触发
- progress —— 在接收响应期间持续不断地触发
- error —— 在请求发生错误时触发
- abort —— 在因为调用abort()方法而终止连接时触发
- load —— 在接收到完整的响应数据时触发
- loadend —— 在通信完成或者触发error、abort或load事件后触发
每个请求都从触发loadstart事件开始,
接下来是一或多个progress事件,
然后触发error、abort或load事件中的一个,
最后以触发loadend事件结束。
①load事件
load事件可以用于替换readystatechange事件。
load事件处理程序会接收到一个event对象,其target属性就指向XHR对象实例。
因而可以访问到XHR对象的所有方法和属性。
示例:
//创建XHR对象
var xhr = createXHR();
xhr.onload = function(event){
if((event.target.status >= 200 && event.target.status < 300) || event.target.status == 304){
alert(event.target.responseText);
}else{
alert("Request was unsuccessful: " + event.target.status);
}
};
//启动一个请求,以备发送
xhr.open("get", "example.txt", true);
//发送请求
xhr.send(null);
②progress事件
progress事件会在浏览器接收新数据期间周期性地触发。
onprogress事件处理程序会接收到一个event对象,它包含这四个属性:
- target —— 指向XHR对象
- lengthComputable —— 表示进度信息是否可用的布尔值
- position —— 表示已经接收的字节数
- totalSize —— 表示根据Content-Length响应头部确定的预期字节数
有了这些信息,就可以为用户创建一个进度指示器: