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>

get

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>

post

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>

get

<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>

post

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>

axios

知识点总结：

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;

巴特西