前端 Ajax 异步get-post方法分析

在Ajax中请求的类型可以分为GET和POST两种方法。

get方法效率更高，大部分网站会选择get方法。

post方法由于大小不做限制，在某些情况也会使用post方法。

get方法的优点不多叙述，代码简单，效率高，不需要设置content-type等等。

//1 get method
		var xhr = new XMLHttpRequest;
		xhr.open("get","1.php?name=MichaelAn&age=25&sex=female",true);
		xhr.send(null);
		xhr.onreadystatechange = function(){
			console.log(xhr.status);
			if (xhr.readyState == 4 && xhr.states == 200){
				console.log(1);
				console.log(xhr.responseText);
			}
		}

//2 post method
		var xhr = new XMLHttpRequest();
		xhr.open = ("post","2.php");
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send('name=MichaelAn&age=25&sex=female');
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.states == 200){
				var result = xhr.responseText;
				console.log(result);
			}
		}

在特定的情况下，post更合适：
1.无法使用缓存文件（更新服务器上的文件或者数据库）。

2.向服务器发送大量数据（post没有数据量限制）。

3.发送包含未知字符的用户输入。

细节：Ajax在早期ie浏览器不兼容，开发需要考虑兼容性问题。

//检测浏览器兼容性代码：
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2019-3-3 补充

1. 工作中大部分请求需要加很多参数（id token path）所以大部分的请求需要使用post请求。常用的请求还有 delete and put 请求。这两个在更新数据和删除数据时使用较多。

2. 发送请求是，如果请求中包好文件路径或者特殊字符，需要 URL-encoding。

3.  现在很多场合使用 axios 请求，直接使用ajax请求的不是很多。

4. 发送请求的参数：注意是字符串还是字典，接受到的response也需要注意数据类型。

5.发送请求过程中，可能出现404或者500等错误，这时候需要对于 response.error 进行处理，避免界面白屏。