第21 章Ajax 与Comet

Ajax技术，是对Asynchronous JavaScript + XML 的简写.
这一技术能够向服务器请求额外的数据而无须卸载页面，改变自从Web 诞生以来就一直沿用的“单击，等待”的交互模式。

Ajax 技术的核心是XMLHttpRequest 对象（简称XHR），XHR 为向服务器发送请求和解析服务器响应，提供了流畅的接口。能够以异步方式从服务器取得更多信息.

也就是说，可以使用XHR 对象取得新数据，然后再通过DOM 将新数据插入到页面中。
另外，虽然Ajax 名字中包含XML 的成分，但Ajax 通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML 数据。

21.1 XMLHttpRequest 对象
创建XHR对象

//适用于IE7 之前的版本
function createXHR(){
	if (typeof arguments.callee.activeXString != "string"){
		var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
		"MSXML2.XMLHttp"],
		i, len;
	for (i=0,len=versions.length; i < len; i++){
			try {
				new ActiveXObject(versions[i]);
				arguments.callee.activeXString = versions[i];
				break;
			} catch (ex){
				//跳过
			}
		}
	}
	return new ActiveXObject(arguments.callee.activeXString);
}

这个函数会尽力根据IE 中可用的MSXML 库的情况创建最新版本的XHR 对象。
var xhr = new XMLHttpRequest();

假如你只想支持IE7 及更高版本，那么大可丢掉前面定义的那个函数，而只用原生的XHR 实现。
但是，如果你必须还要支持IE 的早期版本，那么则可以在这个createXHR()函数中加入对原生XHR对象的支持。

function createXHR(){
 //对原生对象的支持
 //这个函数中新增的代码首先检测原生XHR 对象是否存在，如果存在则返回它的新实例
	if (typeof XMLHttpRequest != "undefined"){
		return new XMLHttpRequest();
	} 
 //未找到原生对象，在这里找，找到不见的话走else抛出异常
 //如果原生对象不存在，则检测ActiveX 对象。
	else if (typeof ActiveXObject != "undefined"){
		if (typeof arguments.callee.activeXString != "string"){
			var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
					"MSXML2.XMLHttp"],
					i, len;
			for (i=0,len=versions.length; i < len; 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();

21.1.1 XHR的用法
在使用XHR 对象时，要调用的第一个方法是open()，它接受3 个参数：要发送的请求的类型（“get”、"post"等）、
请求的URL 和表示是否异步发送请求的布尔值。

下面就是调用这个方法的例子。
xhr.open("get", "example.php", false);

这行代码会启动一个针对example.php 的GET 请求。
有关这行代码，需要说明两点：
一是URL相对于执行代码的当前页面（当然也可以使用绝对路径）；
二是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。

要发送特定的请求，必须像下面这样调用send()方法：

xhr.open("get", "example.txt", false);
xhr.send(null);

这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。调用send()之后，请求就会被分派到服务器。

由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR 对象的属性，相关的属性简介如下。
 responseText：作为响应主体被返回的文本。
 responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。
 status：响应的HTTP 状态。
 statusText：HTTP 状态的说明。
在接收到响应之后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态代码为200作为成功的标志。
此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。此外，状态码为304表示请求的资源没有被修改，可以直接使用浏览器缓存的版本，当然也意味着响应是有效的。

//为确保接收到适当的响应，应该像下面这样检查上述两种状态码
发送同步请求
xhr.open("get", "example.txt", false );
shr.send(null);

//通过检测status来决定下一步的操作，不要依赖statusText,因为后者在跨浏览器使用时不太可靠。另外，无论内容类型是什么，响应主题的内容都会保存到responseText 属性中；而对于非XML 数据而言，responseXML 属性的值将为null。
if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304)}{
	alert(xhr.responseText);
} else{
	alert("Request was unsuccessful:" + xhr.status);
}

多数情况下，我们还是要发送异步请求，才能让JavaScript继续执行而不必等待响应。此时，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：
 0：未初始化。尚未调用open()方法。
 1：启动。已经调用open()方法，但尚未调用send()方法。
 2：发送。已经调用send()方法，但尚未接收到响应。
 3：接收。已经接收到部分响应数据。
 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件。可以利用这个事件来检测每次状态变化后readyState 的值。通常，我们只对readyState 值为4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子。

var xhr = createXHR();
xhr.onreadystatechange = function(){
	if(xhr.readySatate == 4){
		if((xhr.status >= 200 && xhr.status < 300) || shr.status == 304){
			alert(xhr.responseText);
		}else {
			alert("Request was unsuccessfun:" + xhr.status);
		}
	}
}

xhr.open("get", "example.txt", true);
xhr.send(null);

另外，在接收到响应之前还可以调用abort()方法来取消异步请求，如下所示：

xhr.abort();

调用这个方法后，XHR 对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR 对象进行解引用操作(xhr = null)。由于内存原因，不建议重用XHR 对象

21.1.2 HTTP头部信息
每个HTTP 请求和响应都会带有相应的头部信息，
XHR 对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。使用setRequestHeader()方法可以设置自定义的请求头部信息。

21.1.3 GET请求
GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL 的末尾，以便将信息发送给服务器。对XHR 而言，位于传入open()方法的URL 末尾的查询字符串必须经过正确的编码才行。

查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL 的末尾；而且所有名-值对儿都必须由和号（&）分隔，如下面的例子所示。

xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面这个函数可以辅助向现有的URL的末尾添加查询字符串参数：

//接受三个参数：要添加参数的URL、参数的名称、参数的值。
function addURLParam(url, name, value){
	//首先检查URL是否包含？号（已确定是否已经有参数存在），如果没有就添加一个？号；否则就添加一个&号。
	url += (url.indexof("?") == -1 ? "&"  : "?");
	//将参数的名称和值进行编码，再添加到URL的末尾。
	url += encodeURLCompinent(name) + "=" + encodeURLComponent(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请求
POST请求，通常用于向服务器发送应该被保存的数据。
初始化一个POST请求：

xhr.open("post", "example.php", true);

发送POST 请求的第二步就是向send()方法中传入某些数据。

function submitData(){
	var xhr = createXHR();
	xhr.onreadystatechange = function(){
		if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
			alert(xhr.responseText);
		}else{
			alert("Request was unsuccessfu:" + xhr.status);
		}
	};
	xhr.open("post", "postexample.php", true);
	//设置Content-Type头部信息
	//使用XHR 来模仿表单提交：首先将Content-Type 头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"););
	//得到ID为user-info的表单中的数据序列化之后发送给服务器。
	var form = document.getElementById("user-info");
	xhr.send(serialize(form));
}

21.2 XMLHttpRequest 2 级
21.2.1 FormData

//创建一个表单数据对象
var data = new FormData();
//向表单数据对象里 添加数据 key是name  value是Nicholas
data.append("name", "Nicgolas");
//也可以用表单元素的数据 预先向其中填入键值对
var data = new(document.form[0]);

下面的例子是：创建了FormData的实例以后，可以将它直接传给XHR的send()方法。而使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData类型的实例，并配置适当的头部信息。

21.2.2 超时设定

var xhr = createXHR();
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4)
	{
			try{
					//如果在超时终止请求之后，在访问status属性，就会导致错误。
					//为避免浏览器报告错误，可以将检查status属性的语句封装在一个tryCatch语句中
					if(xhr.status == 304 && (xhr.status >= 200 && xhr.status < 300)){
						alert(xhr.responseText);
					}else{
						alert("Request was unsuccessfun:" + xhr.status);
					}
			}
			catch(ex){
					//假设由于ontimeout事件处理程序处理
			}	
	}
};

xhr.open("get", "timeout.php", true);

//这个属性表示 请求在等待多少毫秒之后就终止
//再给timeout这只一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，
//进而会调用ontimeout事件处理程序
xhr.timeout = 1000; //将超时设置为1秒（也就是说通过设置这个属性，表示请求在1s钟之内没有被响应，则请求终止）

//请求终止时会调用 ontimeout事件处理程序
xhr.ontimeout  = function(){
	alert("Request did not return in a second.");
};
xhr.send(null);

21.5.3 Comet
Ajax 是一种从页面向服务器请求数据的技术，
而Comet 则是一种服务器向页面推送数据的技术。

Comet 能够让信息近乎实时地被推送到页面上，非常适合处理体育比赛的分数和股票报价。
有两种实现Comet 的方式：长轮询和流

长轮询把短轮询颠倒了一下。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到
有数据可发送。发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求。这一过程在页面打开期间一直持续不断。

无论是短轮询还是长轮询，浏览器都要在接收数据之前，先发起对服务器的连接。两者最大的区别在于服务器如何发送数据

短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。

21.5.5 Web Sockets
Web Sockets 的目标是在一个单独的持久连接上提供全双工、双向通信.

在JavaScript 中创建了Web Socket 之后，会有一个HTTP 请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会使用HTTP 升级从HTTP 协议交换为WebSocket 协议。

Web Sockets API

var socket = new WebSocket("ws://www.example.com/server.php");

必须给WebSocket 构造函数传入绝对URL。
实例化了WebSocket 对象后，浏览器就会马上尝试创建连接。同源策略对Web Sockets 不适用，因此可以通过它打开到任何站点的连接。至于是否会与某个域中的页面通信，则完全取决于服务器。

//小知识//////////////////////////////////////////////////////////////////////////////////
1.同源策略
什么叫同源？
URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。相反，只要协议，域名，端口有任何一个的不同，就被当作是跨域。

对于http://store.company.com/dir/page.html进行同源检测：
http:// 协议
store. 服务器名
company.com 域名

同源策略 Same-Origin-Policy(SOP)
浏览器采用同源策略，禁止页面加载或执行与自身来源不同的域的任何脚本。换句话说浏览器禁止的是来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。
情景：
比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

浏览器中有哪些不受同源限制呢？

猜你喜欢