HTML-源生js的ajax怎么写（前后端传输数据）

什么是Ajax

Web数据前后台数据的交互方式。

使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

以下都为前端通过Ajax访问数据库的方法

<script>
  //1、创建出Ajax的通信工具
  const xhr = new XMLHttpRequest();
  //2、建立和对方（后台）的连接，通过什么接口、什么方法... 其中xhr.open(请求方式，地址，是否异步)
  xhr.open('get','/login?username=aaa&password=111',true);
  //3、发送消息
  xhr.send();
  //4、等待回复
  xhr.onreadystatechange=function(){
    //readyState是Ajax的状态码，有0 1 2 3 4
    if(xhr.readyState==4){
      //status  http状态码
      if(xhr.status>=200&&xhr.status<300||xhr.status==304){
        //拿到响应的文本
        console.log(xhr.responseText)
      }
    }
  }
</script>

上段代码可以console.log(xhr.readyState)，一般打印出来的是1 2 3 4
0代表Ajax创建成功
1代表建立联系 open
2 send （向后端）发送消息
3 部分数据接收，接受的数据还没有解析完毕
4 数据完全接收并解析完毕

其中在4中即代码块的 onreadystatechange ，等于4数据完全接收并解析完毕，但是其中回复可能正确也可能错误。这是就需要http的状态码进行判断。

常见http状态码所代表的意思：
2xx成功
3xx和4xx一般都是前端的错误 大部分是路径数据的问题
5xx和6xx一般是后台的错误
304重定向（短时间内访问了相同的接口。如果后台数据没有发生变化，让你访问缓存）
404路径错误

详细可看：

封装Ajax

ajax({
    url:'/login',
    method:'post',
    data:{
      username:'aaa',
      password:'111'
    },
    success:function(res){
      console.log(res)
    },
    error:function(err){
      console.log(err)
    }
  })
function ajax(option){
    const url  = option.url
    if(!option.url){
      alert('url是必填项！')
      return;
    }
    // option.method = option.method || 'get';
    const method = option.method || 'get';
    const data = option.data||{};//有就是option.data，没有循环就是空json，避免json遍历时候报错
    const xhr = new XMLHttpRequest();

    switch(method.toLowerCase()){
      case 'get':
        //get把数据放在地址栏，发生放在send
        xhr.open(method,url+'?'+json2url(data),true);
        xhr.send();
        break;
      case 'post':
        xhr.open(method,url,true);
        //发生前设置请求头类型(form表单请求头类型)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(json2url(data));
        break;
    }
    
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
        if(xhr.status>=200&&xhr.status<300||xhr.status==304){
          //拿到响应的文本
          console.log(xhr.responseText)
          option.success && option.success(xhr.responseText)
          // JSON.parse(xhr.responseText)
        }else{
          option.error && option.error(xhr.status)
        }
      }
    }
  }
  function json2url(json){
    let str='';
    json.t = Math.random();
    for(let name in json){
      str+=name+'='+json[name]+'&'
    }
    return str.substring(0,str.length-1) //删除最后一个//a=1&b=2
  }

注意事项：
1、一般url是必须填写的，method不填默认为get，可能不传数据，可能没有成功信息，也可能没有错误信息。
这是封装Ajax应该注意的。
2、关于调用ajax时候为什么传实参是一个json对象，而不是一个一个的参数。
如果是一个一个参数，要考虑到是否填写这个参数、可填可不填、还要考虑参数的顺序

扩展：
访问文件里的数据：
上面的方法不变，调用的时候改改。

ajax({
    url:'a.txt',
    method:'get',
    success:function(res){
      console.log(res)
    }
  })

其中url:'a.txt',也可写为url:'a',
ajax的请求是不关心文件的后缀名的,不管你文件名后缀名是否常见或者标准的。
所以不管是xxx.data、xxx.asdaksdnkl

JQuery中的Ajax

$.ajax({
      url:'',//接口名字 如： /login
      method:'', //获取方法 如：'get' 或者 'post'
      data:{
      	 //向后端传的数据
      },
      success:(res)=>{
      //成功时返回的（从后端发送给前端的）
      }
    })

扩展补充

1、Ajax必须运行在服务器上
2、不管后端返回给前端一个啥，都是返回的字符串的形式。如xxx.responseText
3、前端、后端、必须三者编码都是UTF-8，不然可能有中文时候会报错