form&Ajax &fetch&axios

前端进行网络请求的方式

1. form表单、ifream、刷新页面
2. Ajax - 异步网络请求的开山鼻祖
3. jQuery - 一个时代
4. fetch - Ajax的替代者
5. axios、request等众多开源库

1、Ajax

Ajax的出现之前，任何和服务器的交互都需要刷新页面，用户体验非常差。Ajax的出现解决了这个问题，Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，它能够让我们前端去请求服务器，然后服务器返回给前端必要的信息，然后我们就可以根据服务器返回的结果进行界面更新等操作，这样就保证我们可以不用去刷新请求整个页面，局部改变Dom界面。

var xhr = new XMLHttpRequest();xhr.open('post','www.xxx.com',true)// 接收返回值xhr.onreadystatechange = function(){    if(xhr.readyState === 4 ){        if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){            console.log(xhr.responseText);        }    }}// 处理请求参数postData = {"name1":"value1","name2":"value2"};postData = (function(value){var dataString = "";for(var key in value){     dataString += key+"="+value[key]+"&";};  return dataString;}(postData));// 设置请求头xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 异常处理xhr.onerror = function() {   console.log('Network request failed')}// 跨域携带cookiexhr.withCredentials = true;// 发出请求xhr.send(postData);