javascript ajax请求 get和post的区别

前言

2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。
Ajax 技术核心是 XMLHttpRequest 对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。

XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准，XMLHttpRequest标准分为1.0和2.0。

XMLHttpRequest 1.0的缺点：

• 受同源策略的限制，不能发送跨域请求；
• 只能发送纯文本数据，不能发送二进制文件（如图片、视频、音频等）；
• 在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

XMLHttpRequest 2.0中新增了以下功能：

• 在服务端允许的情况下，可以发送跨域请求；
• 支持发送和接收二进制数据；
• 新增formData对象，支持发送表单数据；
• 发送和获取数据时，可以获取进度信息；
• 可以设置请求的超时时间；

创建ajax的步骤

1、新建XMLHttpRequest对象

//IE7+、Firefox、Opera、Chrome、Safari等浏览器使用
var xhr=new XMLHttpRequest();
//IE7以下使用
var xhr=new ActiveXObject("Microsoft.XMLHTTP");

2、打开要发送的地址通道。

• 第一个参数为请求的方式：有"GET"，“POST”，“PUT”，"DELETE"等；
• 第二个参数为请求地址：如果是GET请求，参数要拼接在url后面，例如：http://localhost:8080?user=xiaoming&age=18；
• 第三个参数为一个布尔值，表示是否执行异步操作，默认为true，如果改成false，则表示执行同步操作；
• 第四个参数为用户名，可选参数，是访问获取通信时的用户名，默认参数为空string；
• 第五个参数密码，可选参数，是访问获取通信时的密码，默认参数为空string；

xhr.open("请求方式","地址","同步/异步","用户名","密码");

3、给XMLHttpRequest对象增加侦听器，用来侦听各种情况，包括各种链接状态，readyState 的值为0，1，2，3，4。

值	状态	描述
0	UNSENT	XMLHttpRequest 代理已被创建， 但尚未调用 open() 方法。
1	OPENED	open() 方法已经被触发。在这个状态中，可以通过 setRequestHeader() 方法来设置请求的头部， 可以调用 send() 方法来发起请求。
2	HEADERS_RECEIVED	send() 方法已经被调用，响应头也已经被接收。
3	LOADING	下载中；responseText 属性已经包含部分响应数据。
4	DONE	请求操作已经完成。意味着数据传输已经彻底完成或失败。

状态码 status，状态主要分：
1、信息 100-101
2、成功 200-206
3、重定向 300-307
4、客户端错误 400-417
5、服务器错误 500-505

xhr.onreadystatechange=function(){
	if(xhr.readyState<4) return;
         if(xhr.status===200){
             //请求成功
         }
}
//或者
xhr.addEventListener("readystatechange",readystatechangeHandler);
function readystatechangeHandler(){
	if(xhr.readyState<4) return;
         if(xhr.status===200){
             //请求成功
         }
}

4、发送数据给打开的地址

//如果是get请求
xhr.send();
//如果是post请求，参数为json字符串
xhr.send(data);

客户端中，写入请求头，读取响应头。

• 使用 xhr.setRequestHeader ( ) 来设置请求头；
• 请求头消息，必须在open后，send前写入；
• 如果ajax与php通信使用POST方法时，在消息头中必须写入 “content-type”,“application/x-www-form-urlencoded”；
• 如果请求头有自定义的数据，服务器必须做允许跨域请求头设置，“Access-Control-Allow-Headers”；
• 使用 xhr.getAllResponseHeaders ( ) 获取所有响应头；
• 使用 xhr.getResponseHeader (“content-type”) 获取到响应头的结果；

var  xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("GET","http://127.0.0.1:8001");
// 请求消息，必须在open后，send前写入
// 如果ajax与php通信使用POST方法时，必须这样写入消息头，PHP才可以解析POST数据
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// 如果请求头有自定义的数据，服务器必须做允许跨域请求头设置
xhr.setRequestHeader("names","xietian");
xhr.send();

function loadHandler(e){
	console.log(xhr.getAllResponseHeaders());//获取所有响应头
	console.log(xhr.getResponseHeader("content-type"));//获取到响应头的结果
}

超时事件，超时时间

• 超时时间：request.timeout，代表着一个请求在被自动终止前所消耗的毫秒数。默认值为 0，意味着没有超时。
• 设置超时时间后，不应该用在同步请求中，否则将会抛出一个 InvalidAccessError 类型的错误。
• 超时发生，会被触发 timeout 事件
• 超时时间必须设置在open以后，send之前。
• 超时事件：timeout ，当进度由于预定时间到期而终止时，会触发 timeout 事件。
• xhr.abort ( )，该方法将终止请求，它的 readyState 属性将被置为0（ UNSENT ），但是并不触发 readystatechange 事件。

var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
// 超时事件
xhr.addEventListener("timeout",timeoutHandler);
xhr.open("GET","http://127.0.0.1:8001");
// 超时时间
xhr.timeout=2000;
xhr.send();

function timeoutHandler(e){
    xhr.abort();//关闭当前通信，因为超时，服务器一直没有返回消息，属于挂起状态
}
function loadHandler(e){
	//...
}

send ( )

发送请求。如果该请求是异步模式(默认)，该方法会立刻返回。相反，如果请求是同步模式，则直到请求的响应完全接受以后，该方法才会返回。
注意：所有相关的事件绑定必须在调用 send() 方法之前进行。
void send();
void send(ArrayBuffer data);类型化数组
void send(Blob data);二进制大对象，是一个可以存储二进制文件的容器。
void send(Document data); 文档对象
void send(DOMString? data); 文本数据
void send(FormData data); 数据对象，可以直接封装内容

var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
function submitHandler(e){
    e.preventDefault();
    //新建FormData对象，将form作为参数传进去
    let fd=new FormData(form);
    let xhr=new XMLHttpRequest();
    xhr.addEventListener("load",loadHandler);
    xhr.open("POST","http://127.0.0.1:4002");
    //可以直接发送给服务端，但是要注意，服务端需要对FormData做处理才可以使用
    xhr.send(fd);
}
function loadHandler(e){
    console.log(this.response);
}

FormData 使用 for of 来遍历

var fd=new FormData();
fd.append("name","xiaoming");
fd.append("age","18");
fd.append("sex","man");
for(let value of fd){
    console.log(value);
}

打印结果如下：

使用Promise封装ajax

import QueryString from "./js/QueryString.js";
function ajax(data,type="GET"){
    if(type!=="GET") type="POST";
    return new Promise(function(resolve,reject){
        let getData="";
        let postData="";
        if(type==="GET"){
            getData="?"+QueryString.stringfiy(data);
        }else{
            postData=QueryString.stringfiy(data);
        }
        let xhr=new XMLHttpRequest();
        xhr.open(type,"http://localhost:4002"+getData);
        xhr.onreadystatechange=function(){
            if(xhr.readyState<4) return;
            if(xhr.status===200){
                resolve(xhr.response);
            }else{
                reject(xhr.response);
            }
        }
        xhr.onerror=function(){
            reject("地址错误");
        }
        
        xhr.send(postData);
    })
}
ajax().then(data=>{
    console.log(data)
})

GET和POST的区别

1. GET是从服务器上获取数据，POST是向服务器传送数据。
2. GET把参数包含在URL中，POST通过request body传递参数。
3. 对于GET方式，服务器端用Request.QueryString获取变量的值，对于POST方式，服务器端用Request.Form获取提交的数据。
4. GET传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍GET和POST的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）
5. GET安全性非常低，POST安全性较高。
6. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
7. GET请求只能进行url编码，而POST支持多种编码方式。