Ajax、跨域请求

Ajax:Asychronous JavaScript XML的简写。可以向服务器请求额外的数据而无须加载页面。请求到的数据格式并不一定是XML。
XMLHttpRequest对象：

//兼容ie7以上的创建xhr对象
var xhr = new createXHR() {
//检测原生XHR对象是否存在，如果存在则返回实例。如果不存在则检测ActiveX对象。如果这两种对象都不存在就报错
	if (typeof XMLHttpRequest != "undefied") {
		return new XMLHttpRequest();
	}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(1=0,len=versions.length;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.")
		}
	}
}

var xhr = createXHR（）;

URL是相对于执行代码的当前页面，二是调用open（）并不会发送请求，而是启动一个请求以备发送。

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

xhr对象的属性：
responseText：作为响应主体被返回的文本
responseXML：如果内容属性是text/xml，application/xml将保存在这个属性
status:响应的HTTP状态
responseText：HTTP状态说明
0:未初始化。尚未调用open()
1:启动。调用open方法，未接受到响应
2：发送。已经调用send（）方法，但尚未接收到响应
3：接受。接收到部分响应数据
4:完成。已经接收到全部响应数据

if((xhr.status >=200 && xhr.status<300) || xhr.status == 304) {
	alert()
}else {
	
}

readystatechange事件:readyState属性的值由一个值变成另外一个值

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState==4) {
		if((xhr.status >= 200 && <= 300)||xhr.status==304){
			alert(xhr.responseText)
		}
	}else{
		alert("Requqset was unsuccessful:" + xhr.status);
	}
}
xhr.open("get","",true);
xhr.send(null);
//取消异步请求
xhr.abort();

http头部信息：
Accept：浏览器能够处理的类型
Accept-Charset：浏览器能够显示的字符集
Accept-Encoding：浏览器能够处理的压缩编码
Accept-Language：浏览器当前设置的语言
Connection：浏览器和服务t器之间连接的类型
Cookie：当前页面设置的任何Cookie
Host：发出请求的页面所在的域
Referer：发出请求的页面的URL
User-Agent：浏览器的用户代理字符串

发送请求头需要在open之后send之前。

xhr.open("get","",true);
xhr.setRequestHeader()
xhr.send(null);
//取消异步请求
xhr.abort();

get请求：查询字符串参数追加到URL的末尾（encodeURLComponent编码）

function addURLParam(url,name,value) {
	url += (url.indexOf("?") == -1 ? "?" : "&");
	url += encodeURLComponent(name) + "&" + encodeURLComponent(value);
	return url;
}

post请求：需要给xhr.send（）里传入数据。默认情况下服务器对post请求和提交表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。
模仿表单提交数据：首先将content-type头部信息设置为application/x-www-from-urlencoded,其次以适当的格式创建一个字符串。
如果需要将页面中表单的数据进行序列化，然后再通过xhr发送到服务器可以使用serialize（）函数来创建这个字符串/

var from = document.getElementById("user-info");
xhr.send(serialize(form));

<?php
	header("Content-Type:text/plain");
		echo<<<EOF
	Name:{$_POST['user-name']}
	Email:{$_POST['user-email']}
	EOF;
	?>

如果不设置Content-Type头部信息，那么发送给服务器的数据就不会出现在${}_{P}OST超级全局变量中。这时候，要访问同样的数据，就必须借助$HTTP_RAW_POST_DATA

XMLHttpRequest2级
FormData：为序列化表单以及创建与表单格式相同的数据提供了便利。
不必明确地在XHR对象上设置请求头部，xhr可以识别FormData的实例

var data = new FormData();
data.append("name", "Nicholas");

超时设定:设置属性timeout会在一段时间后触发ontimeout事件。

xhr.timeout = 1000;
xhr.ontimeout = function(){}
xhr.send(null)

overrideMimeType()方法：用于重写XHR响应的MIME（Multipurpose Internet Mail Extensions,多功能网际邮件扩充协议）类型。可以根据返回的MIME类型来决定XHR对象如何让处理它。

进度事件：
loadstart：接收到响应数据的第一个字节触发
progress：接收响应期间不断触发
error：在请求发生错误时触发
abort：在因为调用abort（）方法而终止连接时触发
load：在接收到完整的响应数据时触发。
loadend：在通信完成或者触发error、abort、load事件后触发。

load事件：

var xhr = XHRHttpRequest();
xhr.onload = function(){
	if((xhr.status >=200 && xhr.status < 300)||xhr.status == 304){
	}else{}
}
xhr.open()
xhr.send()

跨域：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

跨源资源共享：CORS（cross-origin resource sharing）
发送请求时，需要给他附加一个额外的origin头部。
Origin:http://www.nczonliine.net
服务器在Access-Control-Allow-Origin头部中回发相同的源信息。
Access-Control-Allow-Origin：http://www.nczonliine.net

其他跨域技术：
1.图像ping
使用标签，也可以动态创建图像，使用他们的onload和onerror事件处理程序来确定是否收到了响应。

varimg = new Image();
img.onload = img.onerror = function(){
	alert("Done");
};
img.src = "http://www.example.com/test?name=Nicholas"

缺点：图像ping激素只能发送Get请求，也无法访问服务器的响应文本，只能用于浏览器和服务器的单向通信。

2.JSONP
JSON with padding，JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时在该页面调用的函数

var script = document.createElement(response);
script.src = "http://freegeoip.net/json/?callback=H=handleResponse";
document.body.insertBefore(script,document.body.firstCgild);
function handleResponse(response){
}

优点：可以直接访问响应文本，支持在浏览器与服务器之间双向通信。
缺点：无法确定访问的域是否安全，无法确定请求成功与否

3.comet
服务器向页面推送数据，实时推送适合处理体育比赛的分数和股票报价
实现方式：长轮询和流
使用http轮询的反向Ajax，客户端发出了某些轮询请求，但没有信息返回这种情况，客户端必须要等待下一个轮询来获取两个服务器端接收到的事件。

JSONP轮询基本上与HTTP轮询一样，不同之处是JSONP可以发出跨域请求。
Piggyback，捎带轮询。
对请求数据的响应和对服务器事件的响应，如果任一部分有发生。

Comet:请求被发送到服务器端并保持一个很长的存活期，直到超时或是有服务器端事件发生。在该请求完成后，另一个长生存期的Ajax就被送去等待另一个服务器端事件。
短轮询：
定时向服务器发送请求，看有没有更新的数据。

长轮询：页面发起一个到服务器的请求，然后服务器一致保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接，随机又发起一个到服务器的新请求。

HTTP流，在页面的整个生命周期内使用一个HTTP连接。浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性的向浏览器发送数据。
通过侦听readystatechange事件及检测readyState的值是否为3.

SSE（server-sent Event，服务器发送事件）
SSE用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据，服务器响应的MIME类型必须是text/event-stream，SSE支持长轮询、短轮询、HTTP流，能子啊断开连接时自动确定何时重新连接。

Web Sockets
全双工、双向通信。在js中创建了WebSockets之后，会有一个HTTP请求发送到浏览器以发起连接，在取得服务器响应之后，http协议会升级为Web Socket协议。在支持Web Socket的服务器上
同源策略对Web Socket不适用

var socket = new WebSocket("")

WenSocket.OPENING(0):正在建立连接
WenSocket.OPEN(1)：已经建立连接
WenSocket.CLOSING(2)：正在关闭连接
WenSocket.CLOSE(3)：已经关闭连接

WenSocket没有readystatechange事件

varsocket = new WebSocket("");
var message={}
socket.send(JSON.stringify(message));
socket.onmessage = function(event) {
	var data = event.data
}

WebSocket其他三个事件：
open：成功建立连接时触发
error：在发生错误时触发
close：在关闭连接时触发

安全
1.建立ssl连接
2.附带验证码
3.发送post请求
4.检查来源URL是否可信
5.基于cookie信息进行验证