Ajax

Ajax 技术的核心是XMLHttpRequest 对象(简称XHR)
XHR 为向服务器发送请求和解析服务器响应提供了流畅的
接口。能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据。
也就是说,可以使用XHR 对象取得新数据,然后再通过DOM 将新数据插入到页面中。
虽然名
字中包含XML 的成分,但Ajax 通信与数据格式无关;这种技术就是无须刷新页面即可从服务器取得数
据,但不一定是XML 数据。
 
21.1 XMLHttpRequest 对象
var xhr = createXHR();
由于其他浏览器中对XHR 的实现与IE 最早的实现是兼容的,因此就可以在所有浏览器中都以相同
方式使用上面创建的xhr 对象。
 
21.1.1 XHR的用法
在使用 XHR 对象时,要调用的第一个方法是open(),它接受3 个参数:要发送的请求的类型
("get"、"post"等)、请求的URL 和表示是否异步发送请求的布尔值。
xhr.open("get", "example.php", false);
 
要发送特定的请求,必须像下面这样调用send()方法:
xhr.open("get", "example.txt", false);
xhr.send(null);
 
由于这次请求是同步的,JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后,响应
的数据会自动填充XHR 对象的属性,相关的属性简介如下。
1: responseText:作为响应主体被返回的文本。
2: responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保
存包含着响应数据的XML DOM 文档。
3: status:响应的HTTP 状态。
4: statusText:HTTP 状态的说明。
 
发送异步请求
可以检测XHR 对象的readyState 属性,该属性表示请求
/响应过程的当前活动阶段。这个属性可取的值如下。
 0:未初始化。尚未调用open()方法。
 1:启动。已经调用open()方法,但尚未调用send()方法。
 2:发送。已经调用send()方法,但尚未接收到响应。
 3:接收。已经接收到部分响应数据。
 4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
readyState 属性的值由一个值变成另一个值,都会触发一次readystatechange 事件。可
以利用这个事件来检测每次状态变化后readyState 的值
通常我们只是关注值为4的阶段。
 
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 对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。在
终止请求之后,还应该对XHR 对象进行解引用操作。由于内存原因,不建议重用XHR 对象。
 
21.1.3 GET请求
GET 是最常见的请求类型,最常用于向服务器查询某些信息。
常见的问题:查询字符串的格式有问题。查询字符串中每个参数的名
称和值都必须使用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 的示例。
var url = "example.php";
//添加参数
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
//初始化请求
xhr.open("get", url, false);
在这里使用 addURLParam()函数可以确保查询字符串的格式良好,并可靠地用于XHR 对象。
21.1.4 POST请求
通常用于向服务器发送应该被保存的数据
xhr.open("post", "example.php", true);
发送 POST 请求的第二步就是向send()方法中传入某些数据
 
21.2 XMLHttpRequest 2 级
21.2.1 FormData
现代 Web 应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2 级为此定义了
FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据(用于通过XHR 传输)提供
了便利。下面的代码创建了一个FormData 对象,并向其中添加了一些数据。
var data = new FormData();
data.append("name", "Nicholas");
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);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
使用FormData 的方便之处体现在不必明确地在XHR 对象上设置请求头部。XHR 对象能够识别传
入的数据类型是FormData 的实例,并配置适当的头部信息。
 
21.2.2 超时设定
XHR 对象添加了一个timeout 属性,表示请求在等待响应多少毫秒之后就终止。在给
timeout 设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout 事
件,进而会调用ontimeout 事件处理程序。
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
try {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
} catch (ex){
//假设由ontimeout 事件处理程序处理
}
}
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //将超时设置为1 秒钟(仅适用于IE8+)
xhr.ontimeout = function(){
alert("Request did not return in a second.");
};
xhr.send(null);
 
21.2.3 overrideMimeType()方法
用于重写XHR 响应的MIME 类型。
通过调用overrideMimeType()方法,可以保
证把响应当作XML 而非纯文本来处理。
var xhr = createXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);
 
21.3 进度事件
1: loadstart:在接收到响应数据的第一个字节时触发。
2: progress:在接收响应期间持续不断地触发。
3: error:在请求发生错误时触发。
4: abort:在因为调用abort()方法而终止连接时触发。
5: load:在接收到完整的响应数据时触发。
6: loadend:在通信完成或者触发error、abort 或load 事件后触发。
 
21.3.1 load事件
var xhr = createXHR();
xhr.onload = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);
 

跨源资源共享

IE对CORS的支持

CORS(Cross-Origin Resource Sharing,跨源资源共享)是W3C的一个工作草案
IE8中引入了XDR(XDomainRequest)类型,与XHR类似,但能实现安全可靠的跨域通信。与XHR不同:
1、cookie不会随请求发送,也不会随请求返回
2、只能设置头部信息中的Content-Type
3、不能访问响应头部信息
4、只支持GET和POST请求
使用方法,也是创建一个XDomainRequest实例,调用open,调用send,open方法只接受两个参数,请求类型,URL。所有请求都是异步。

其他浏览器对CORS的支持

Firefox3.5+,Safari4+,Chrome,ios版Safari,Android平台中的WebKit都通过XHR对象实现了对CORS的原生支持。
限制:
1、不能使用setRequestHeader
2、不能发送和接收cookie
3、调用getAllResponseHeaders会返回空字符串
 
以下还有一些省略的地方,我会尽快补上
原文地址:https://www.cnblogs.com/gavinzzh-firstday/p/5353082.html