js的ajax请求

1 js原生get请求

<script>
  window.onload = function(){
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
      let xhttp = new XMLHttpRequest();
      xhttp.open('get','http://localhost:3000/users');
      xhttp.send();
      xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4){//readyState 服务器响应的状态编码
          console.log(JSON.parse(xhttp.response));
        }
      }
    }
  }
</script>

 2 js原生post请求

<script>
    window.onload = function(){
      var oBtn = document.getElementById('btn');
      var obj = {
        "name":"zxq",
        "age":123
      }
      oBtn.onclick = function getData(){
        var xhttp = new XMLHttpRequest();
        xhttp.open('post','http://localhost:3000/users');
        xhttp.setRequestHeader("Content-type","application/json");//设置请求头
        xhttp.send(JSON.stringify(obj));//将对象转为json格式
        xhttp.onload = function(){
          console.log("请求执行完毕");
          console.log(xhttp.responseText);
        }
      }
      console.log(oBtn.onclick.name);//getData
    }
</script>

3 jq的ajax请求

<script>
  $(function(){
    $('#btn').on('click',function(){
      $.ajax({
        type:'GET', 
        url:'http://localhost:3000/users',
        success:function(response){//成功回调函数
          console.log('成功了');
          console.log(typeof(response));
        },
        error:function(data){//错误输出信息
          console.log('错误了');
          console.log(data);
        }
      })
      // 第二种get写法
      // $.get('http://localhost:3000/users',
      // {"name":"zxq"},//get的传入参数
      // function(data){//成功回调函数
      // console.log('成功了');
      // console.log(typeof(data));
      // })
    })
  })
</script>

<script>
  $(function(){
    $('#btn').on('click',function(){
      $.ajax({
        type:'POST', 
        url:'http://localhost:3000/users',
        dataType:'json',
        data:{name:'zzz'},//发送到服务器的数据，jq自动转化格式
        success:function(response){//成功回调函数
          console.log('成功了');
          console.log(response);
        },
        error:function(data){//错误输出信息
          console.log('错误了');
          console.log(data);
        }
      })
    })
  })
</script>

4 vue的axios发送ajax请求

  <script>
    var vm = new Vue({
      el:'#app',
      data:{
        msg:'vue实例'
      },
      methods:{
        getData:function(){
          axios.get('http://localhost:3000/users',{
            params:{//传入的参数
              id:20
            }
          })
          .then((response) => {//成功回调函数
            console.log(response.data);
          })
          .catch((response) => {//失败回调函数
            console.log('错误了');
            console.log(response);
          })
          .finally(function(){//始终执行的函数
            console.log('finally函数执行');
          })
          //第二种写法
          // axios({
          //   methods:'get',
          //   url:'http://localhost:3000/users',
          //   responseType:'json'//返回数据类型
          // })
          // .then(function(response){
          //   console.log(response);
          // })
        }
      }
    })
  </script>

知识点总结：

ajax的总体流程

1 创建XMLHttpRequest对象

2 为这个对象设置参数，也就是open方法

3 发送设置好的参数及内容，也就是send方法

4 接收服务器的响应数据，及对响应数据进行各种操作等

xhttp 的 readyState 存的是服务器请求响应的状态信息：

0：初始化，创建了XMLHttpRequest对象

1：请求开始，初始化XMLHttpRequest对象，调用open方法

2：请求发送，调用send方法

3：开始读取服务器响应,已经接收到响应头，开始接收响应体

4：服务器接收全部完成，存入到XMLHttpRequest对象中

json（特定的字符串）与对象的相互转化：

JSON.stringify(obj) 将对象转化为json格式

JSON.parse(json)将json格式转化为对象或数组等

var get = function getData(){}

这种方式定义的，get.name = getData;