Ajax相关

简述一下Ajax的工作原理：
通过XMLHttpResques对象来向服务器发起异步请求，从服务器获得数据，然后用Javascript来操作DOM，从而更新页面。这其中最关键的一步就是从服务器上获取数据。
如何解决Ajax的安全性问题？
增加验证码、增加随机Token、约束同一请求在规定时间内的最大请求数量，服务器端校验数据的正确性、尽量运用post方法。
Ajax是借助HTTP来完成通信的，因此需要通过XHR对象设置请求方法、请求URL、请求首部和请求实体（即请求内容）。接下来分析Ajax通信的各个部分。
1.创建：可以用构造函数XMLHttpRequest();

var xhr=new XMLHttpRequest();

2.指定请求的方法和URL：使用XHR对象的open()方法来指定请求的方法和URL。该方法接收三个参数，第一个参数是不区分大小写的请求方法字符串。可以是"get"、"post"或"head"等；第二个参数是请求URL，该URL需要满足同源策略的要求，第三个参数是一个可选的布尔值，表示请求的方式，默认使用异步方式，当设为false时，会变为同步方式。

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

3.指定请求首部：默认情况下，在进行Ajax请求时，会带上Accept、Accept-Language、Connection等请求首部，如果要自定义其他首部，可以使用setRequestHeader()方法。此方法接收2个参数，第一个参数是首部名称，第二个参数是首部值。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

注意：像Content-Length、Date、Cookie和User-Agent等首部是无法自定义的，这也是为了安全，防止服务器接收恶意伪造的请求。
4.发送请求实体：当嗲用XHR对象的send()方法时，就会向服务器发送指定的请求实体。如果是GET请求，那么就传递null或者省略方法参数，因为get请求的内容将作为URL的查询字符串发送给服务器。

xhr.open("get","index.php?id=1&status=1",true);
xhr.send(null);

如果是POST请求，那么就能发送各种格式的内容，例如XML文档，表单编码后的字符串或JSON格式的字符串等。
5.处理响应：一个完整的HTTP请求响应会包含状态码、响应首部和响应实体（即响应内容），可以通过XHR对象的属性和方法来获得这些信息。为了能处理响应中的信息，必须监听XHR对象上的readystatechange事件。为了保证浏览器的兼容性，通常会在调用open()之前注册该事件。

xhr.readystatechange=function(){
	if(xhr.readyState===4){
		if(xhr.status===200){
			xhr.statusText;//原因短语，说明状态码的含义
			xhr.responseText;//响应内容，用字符串表示
			xhr.getResponseHeader("Content-Length");//获取指定名字的响应首部的值
			xhr.getAllResponseHeaders();//获取所有的响应首部，用字符串表示。	
		}
	}
};
xhr.open("post","index.php",true)

在onreadystatechange事件处理程序中，XHR的readyState属相是一种数值属性，表示请求和响应的状态（即通信的状态）。每次改变该属性的值，就会触发一次readystatechange
0：未初始化。尚未调用open()方法。
1：启动。已经调用open()方法，但尚未调用send()方法。
2：发送。已经调用send()方法，但尚未接收到响应
3：接收。已经接收到部分相应数据
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用。
使用XHR发起异步的POST的请求：

function createHttpRequest(){
	if(window.XMLHttpRequest){
		xml=new XMLHttpRequest();
	}else{
		xml=ActiveXObject("Miscrosoft.XMLHTTP");
	}
	return xml;
}
var xhr=createHttpRequest();
xhr.onreadystatechange=function(){
//onreadystatechange属性（存在处理服务器响应的函数）
	if(xhr.readyState==4){
	//readyState属性（存有服务器响应的状态信息）
		if(xhr.status==200){
			doResponse(responseText);
			//responseText属性（取回由服务器返回的数据）
		}
	}
}
xhr.open("POST",'url',true);
//open()方法：第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步处理
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('data');
//send()方法，将请求送往服务器

$.Ajax({
	type:"post",
	dataType:"Json",
	url:"url",
	success:function(data){
		console.log(data);
	}
})

上传文件，在XHR2中允许给send()方法传递File对象实现上传文件。通过File元素的files属性能获得一个File对象。

<input type="file" id="upload">
<script>
	var input=document.getElementById("upload");
	input.addEventListener("change",function(){
		var file=this.files[0];
		var xhr=new XMLHttpRequest();
		xhr.open("post","index.php");
		xhr.send();	
	},false);
</script>