最常见的请求莫过于get和post了，今天详细的学习一下两种方式的内容，
GET
GET是常见的请求方式，常用于向服务器查询某些信息，它适用于URL完全指定资源，当请求对服务器没有任何副作用以及服务器的响应式可缓存的。
数据发送
使用GET的方式发送请求时，数据被追加到open()方法中URL的末尾
数据以问号开始，名和值之间用等号链接起来，名值对之间用&分割，使用GET方式发送的数据常常被称之为查询字符串。
xhr.open("get","example.php?name1=value1&name2=value2",true)【编码】
由于URL无法识别特殊字符，如果数据中包含特殊字符，则要使用encodeURLcomponent()进行编码
var url = 'test.php' +'?name=' + encodeURIComponent("小梦梦");
xhr.open('get',url,true);上面的URL将会被编码为：
test.php?name=%E5%B0%8F%E6%A2%A6%E6%A2%A6【函数编码】
下面这个函数可以向现有的URL的末尾添加查询字符串的参数
function newParm(url,name,value){
url+= (rul.indexOf('?')==-1 ? '?': '&');
url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}这个addURLParam()函数接受三个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查URL是否包含问号(以确定是否已经有参数存在)。如果没有，就添加一个问号；否则，就添加一个和号。然后，将参数名称和值进行编码，再添加到URL的末尾。最后返回添加参数之后的URL.
var url = 'test.php';
url = addURLParam(url,'name','aaa');
url = addURLParam(url,'data','bbb');
xhr.open('get',url,true);缓存
在GET请求中，为了避免缓存的影响，可以向URL添加一个随机数或时间戳。
xhr.open('GET',url + '&' + Number(new Date()),true);
xhr.open('GET',url + '&' + Math.random(),true);这里写代码片下面把使用get方式发送ajax请求的操作封装为get()函数.
function get(url,data,callback){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作
callback && callback(xhr.responseText);
}
}
}
for(var key in data){
url += (url.indexOf("?") == -1 ? "?" : "&");
//编码特殊字符
url += encodeURIComponent(key) + "=" + encodeURIComponent(data[key]);
}
//增加随机数，防止缓存
xhr.open('get',url+'&'+Number(new Date()),true);
//发送请求
xhr.send();
}//前端
<script>
get('form.php',{
a:1,
b:2,
c:3
},function(data){
//'a:1;b:2;c:3;'
console.log(data);
})//后端
<?php
foreach($_GET as $key => $value){
if(!empty($value)){
echo $key. ":" .$value .";";
}
}
?> POST
通常用于服务器发送应该被保存的数据，‘POST’常用与HTML表单，它在请求主题中包含额外数据且这些数据常存储在服务器上数据库中。相同的URL的重复POST请求从服务器上得到的响应可能不同，同时不应该缓存使用这个方法的请求。
POST请求应该把数据作为一个请求的主体提交，而GET上不是这样的，POST可以请求的主体可能包含非常多的数据。而且格式不限。在open()方法第一个参数的位置传入”post”，就可以初始化一个POST请求。
xhr.open("post","example.php",true);【设置请求头】
发送POST请求的第二部就是向send()中传入某些数据，由于xhr的最初设计是主要为了处理XML，因此可以在次传入xml文档，传入的文档进过序列化之后将作为请求的主体提交到服务器，也可以在此传入任何想发送到服务器的字符串。
在默认情况下服务器对POST请求和提交web表单的请求并不会一视同仁，因此服务器必须有相应的程序来读取发送过来的数据，并从中解析出有用的部分。不过，可以使用XHR来模仿表单提交：首先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型.
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 如果不设置Content-Type，发送给服务器的数据就不会出现在
如果对相同的头调用多次setReQuestHeader()，新值不会取代之前指定的值。相反，HTTP请求将包含这个头的多个副本或这个头将指定多个值.
发送主体
接下来要以适当的格式创建一个字符串，并使用send()方法发送
POST数据的格式与查询字符串格式相同，名和值之间用等号链接，名值对之间用和号(&)分隔，如下所示
xhr.send('name="aaa"&number=123');【编码和缓存】
由于使用POST方式传递数据时，需要设置请求头”content-type”，这一步骤已经能够自动对特殊字符(如中文)进行编码，所以就不再需要使用encodeURIComponent()方法了
POST请求主要用于数据提交，相同URL的重复POST请求从服务器得到的响应可能不同，所以不应该缓存使用POST方法的请求.
【性能】
GET对所发送信息的数量有限制，一般在2000个字符。与GET请求相比，POST请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，GET请求的速度最多可POST请求的两倍.
【封装函数】
function post(url,data,callback){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作
callback && callback(xhr.responseText);
}
}
}
var strData = '';
for(var key in data){
strData += '&' + key + "=" + data[key];
}
strData = strData.substring(1);
xhr.open('post',url,true);
//设置请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send(strData);
}//前端
<script>
post('form.php',{
a:1,
b:2,
c:3
},function(data){
//'a:1;b:2;c:3;'
console.log(data);
})
</script> //后端
<?php
foreach($_POST as $key => $value){
if(!empty($value)){
echo $key. ":" .$value .";";
}
}
?>